Cara Membuat Menu Horizontal di Blog
Senin, 24 Desember 2012
0
komentar
Menu horizontal, sangat penting peranannya baik dalam website atau pun
blog. Menu horizontal sendiri adalah menu berupa link - link yang
terpasang secara memanjang yang biasanya diletakan di bawah header atau
di atas header atau kadang kadang ada juga yang keduannya menggunakkan
menu horizontal.
Bagi sobat - sobat blogger yang menggunakan template yang tidak
mendukung menu horizontal, tenang saja karena posting kali ini, saya
mencoba untuk mencari source code dari menu horizontal tersebut.
Bagi sobat yang ingin menambahkan menu horizontal tersebut, silahkan ikuti langkah - langkah berikut ini :
- Pertama - tama, masuk ke Akun Blog Sobat,
- Klik Template dan Klik Edit HTML,
- Selanjutnya, cari kode ]]></b:skin> (gunakan Ctrl + F), dan Copy Paste Code dibawah tepat di atas kode tersebut.
ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic2jc7n_4OM3mDsV3lJucTuVJrK6FmQwTxQc10KSNRuP81cbctpj_r8aoNEuoNS0jC3uqRr79fbgrkIA-qrs1RUdB2jgjdewmoSacq2ExdJX2D7hcW_TeydIn1DJw7yX8Xeml_z0vzx-w/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}ul.menu li {display:block;float:left;margin:0;padding:0;}ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic2jc7n_4OM3mDsV3lJucTuVJrK6FmQwTxQc10KSNRuP81cbctpj_r8aoNEuoNS0jC3uqRr79fbgrkIA-qrs1RUdB2jgjdewmoSacq2ExdJX2D7hcW_TeydIn1DJw7yX8Xeml_z0vzx-w/s1600/bg.png") repeat-x top left;text-decoration:none;}ul.menu .current a {color:#fff;font-weight:700;}/*Garis Merah*/ul.menu.red{background-color:#B11718;}ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}
- Setelah kode tersebut selesai ditambahkan, silahkan Save Template.
Selanjutnya, Masuk ke Tata Letak dan ikuti langkah - langkah berikut :
- Klik Tambah Gadget,
- Lalu tambahkan Fungsi Pihak ke tiga HTML/Javascript,
- Selanjutnya, Copy Paste Kode di Bawah,
Keterangan :<ul class="menu red">
<li class="current"><a href="http://fileprofessional.blogspot.com/" target="_self">Home</a></li>
<li><a href="http://fileprofessional.blogspot.com/p/about-me.html" target="_self">About</a></li>
<li><a href="http://fileprofessional.blogspot.com/p/contact.html" target="_self">Contact</a></li>
<li><a href="http://fileprofessional.blogspot.com/2012/04/tukar-link.html" target="_self">Tukar Link</a></li>
<li><a href="" target="_self"></a></li>
</ul>
Silahkan ganti tulisan berwarna biru dengan kata - kata yang sobat inginkan, dan ganti juga tulisan berwarna merah dengan link url sobat.
Sumber : http://fileprofessional.blogspot.com/2012/04/cara-membuat-menu-horizontal-di-blog.html
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat Menu Horizontal di Blog
Ditulis oleh The Jocker
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://nopomawonenten.blogspot.com/2012/12/cara-membuat-menu-horizontal-di-blog.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh The Jocker
Rating Blog 5 dari 5
0 komentar:
Posting Komentar