Pada kesempatan kali ini saya akan berbagi ilmu tutorial blogging yang cukup keren sobat . Sesuai dengan judulnya, kali ini saya akan membagikan tutorial bagaimana cara membuat "
Menu navigasi horizontal dropdown" yang saya pakai saat ini atau bisa lihat sendiri pada gambar yang saya pasang diatas. langsung saja berikut langkah-langkah membuat menu navigasi :
1. Masuk ke akun blogger sobat
2. Masuk ke Dashboard > Template > Edit Html > Lanjutkan
3. Centang tanda Expand Template Widget
4. Lalu cari kode
]]></b:skin>
5. Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode
]]></b:skin>.mazwaone{font:bold 16px Calibri,Arial,Sans-Serif;}
mazwaone *{margin:0 0 0 0;padding:0 0 0 0;list-style:none;}
mazwaone ul{background:#333;height:30px;box-shadow:inset 0px 1px 0px rgba(029,058,099,0.4), inset 0px 2px 0px rgba(255,255,255,0.1), 0px 1px 2px rgba(029,058,099,0.4);}
mazwaone li {float:left;display:inline;}
mazwaone li a{padding:0px 15px;line-height:30px;color:#ddd !important;text-shadow:0px -1px 0px #1d3a63;display:block;
text-decoration:none;border-right:1px solid #232323;border-left:1px solid #303030;}
mazwaone li a:hover, mazwaone li a:active{background:#636465;}
mazwaone ul li:first-child a {border-left:medium none;}
mazwaone li.sub li:first-child a {border-left:1px solid #7b818b;}
mazwaone li ul{display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0.6;height:auto;-webkit-transition:all 0.26s ease-out 0.2s;-moz-transition:all 0.26s ease-out 0.2s;-o-transition:all 0.26s ease-out 0.2s;transition:all 0.26s ease-out 0.2s;}
mazwaone li li{display:block;float:none;width:100%;}
mazwaone li:hover > ul{visibility:visible;width:200px;opacity:1;}
mazwaone li li ul{left:200px;margin-top:-30px;}
mazwaone li.sub > a{position:relative;padding-right:30px;}
mazwaone li.sub > a:after{content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:#ccc transparent transparent transparent;position:absolute;top:15px;right:10px;}
mazwaone li.sub li.sub > a:after{content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #ccc;position:absolute;top:11px;right:10px;}
6. Simpan Template
7. Buka
Tata Letak >
Tambah Gadget >
Html/Javascript.8. Masukkan kode berikut di form Konten yang tersedia.
<mazwaone><ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>Sitemap</a></li>
<li><a href='/'>Group</a></li>
<li class='sub'><a href='#'>Cheat</a>
<ul><li><a href='/'rel='nofollow'>Ninja Saga</a></li>
</ul></li>
<li class='sub'><a href='#'>Tutorial</a>
<ul><li><a href='/'rel='nofollow'>Photoshop</a></li>
<li><a href='/'rel='nofollow'>Blogspot</a></li>
</ul></li>
<li><a href='/'>Tips & Trik</a></li>
<li><a href='/'>Become A Fans</a></li>
</ul></mazwaone>
Keterangan : - Ganti tanda "/" dengan URL yang dituju.
- Tulisan yg berwarna orange ganti dengan judul menu.
9. Klik Save dan lihat hasilnya.
Sekian dari tutorial kali ini semoga bermamfaat...^_^
