Cara Memasang Tab/Menu Drop Down Pada Blog

Cara memasang membuat tab menu submenu drop down pada blog -


Akhirnya setelah sekian lama, saya berkesempatan untuk menulis di blog ini lagi. dan kali ini saya akan memberikan panduan cara untuk membuat menu drop down pada blog.

Tab atau menu yang akan saya berikan panduannya ini berbeda dengan menu biasa. Pada menu drop down ini terdapat Sub-menu horizontal yang dapat kita isi sesuai dengan keinginan. Untuk contoh website yang menggunakan jenis menu seperti ini bisa kita lihat pada website official Goal.com :))

Yang pertama kita lakukan untuk memasang tab/menu drop down adalah memasang kode CSS pada template blog yang kita gunakan. Dengan cara berikut :1. Login ke akun Blogger anda.
2. Klik Template.
3. Klik Edit HTML.
4. Cari kode ]]></b:skin> Dengan cara tekan ctrl+f kemudian ketikkan ]]></b:skin>
5. Letakkan kode script dibawah ini tepat di atas kode ]]></b:skin>

nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;}nav ul {overflow: hidden;float:left;background:#1BC7A5;margin: 5px 0;width: 100%;}nav li {float:left;display:inline;}nav li a {padding:3px 15px;line-height:40px;color:#fff !important;display:block;text-decoration:none;}nav li ul{margin:0px;display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s;}nav li li {display:block;float:none;width:100%;}nav li:hover > ul {visibility:visible;width:200px;opacity:1;}nav li li ul {left:200px;margin-top:-40px;}nav li.sub > a {position:relative;padding-right:30px;}nav li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px;}nav li.sub li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px;}nav li li:hover{background:rgba(0, 0, 0, 0.16);}

6. Klik Simpan Template


Nah, setelah kita selesai memasang kode CSS tersebut pada template blog kita, maka langkah terakhir yang harus kita lakukan adalah memasang kode HTML. Simak langkah berikut :

1. Buka Tata Letak, kemudian klik tambahkan Gadget
2. Pilih HTML/Javascript.
3. Kosongkan judulnya. kemudian copy dan paste-kan kode di bawah.

<nav>
<ul>
<li><a href='url'>menu</a></li>
<li class='sub'><a href='url'>submenu</a><ul>
<li><a href='url'>menu</a></li>
<li><a href='url'>menu</a></li>
<li><a href='url'>menu</a></li>
<li><a href='url'>menu</a></li>
</ul>
</li>
</ul>
</nav>

#note : ganti url dengan link tujuan. menu dan sub menu diganti dengan nama menu yang diinginkan. 
4. Klik simpan.
5. Geser sesuai keinginan, dan jangan lupa klik simpan :)

Nah, sekian tutorial yang dapat saya berikan, Terima Kasih dan Semoga Bermanfaat :)

Artikel Terkait