Cara Membuat Drop Down Menu Navigasi di template kang kapuk

Berikut cara pengaturan menu dropdown pada template buatan kang kapuk:
1. Masuk ke akun Blog kita
2. Pilih menu "Template"
3. Cari code ]]></b:skin>
(agar lebih mudah dalam mencari, gunakan tombol Ctrl+F)
4. Jika sudah ketemu, tambahkan kode berikut di atasnya kode ]]></b:skin>

#nav li ol{display:block;width:150px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;-webkit-transition:all 0.26s ease-out 0.2s;-moz-transition:all 0.26s ease-out 0.2s;-ms-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;} #nav ol li {background:none repeat scroll 0% 0% rgba(0, 0, 0, 0.6);box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;} #nav ol li a{color:#e65c00} #nav ol li a:hover{color:rgb(118, 185, 0);-webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out} #nav li li{display:block;float:none;width:100%;} #nav li:hover > ol{visibility:visible;width:140px;opacity:1;} #nav li li ol{left:140px;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:15px;right:5px;}

5.  Cari code <nav id='nav'>
(agar lebih mudah dalam mencari, gunakan tombol Ctrl+F)
6. Disitulah letak si menu,
menu akan terletak di antara kode  <nav id='nav'> dan kode </nav><div class='clear'/>
kalo sobat kurang paham mengenai ini, sobat block kode setelah kode <nav id='nav'> tapi sebelum kode <div class='clear'/>.
7. Lalu hapus lah, gantikan dengan kode berikut ini:

<ul> <li> <b:if cond='data:blog.pageType == "item"'> <h3> <a href='/' target='_blank'><strong>Beranda</strong></a></h3> <b:else/> <h2> <a href='/' target='_blank'><strong>Beranda</strong></a></h2> </b:if> </li> <li><a href='https://www.facebook.com/dwi.mubarak' rel='nofollow' target='_blank'><strong>About</strong></a></li> <li><a href='http://coretan-ringanku.blogspot.com' rel='nofollow' target='_blank'><strong>Daftar Isi</strong></a></li> <li class='sub'><a href='#' rel='nofollow' target='_blank' title='Menu'><strong>Menu</strong></a> <ol> <li><a href='http://coretan-ringanku.blogspot.com/search/label/Blogging' target='_blank' title='Tutorial Blogging'><strong>Blogging</strong></a></li> <li><a href='http://coretan-ringanku.blogspot.com/search/label/Windows' target='_blank' title='All about Windows'><strong>Windows</strong></a> <ol> <li><a href='http://coretan-ringanku.blogspot.com/search/label/Tips' target='_blank' title='Tips dan trik windows'><strong>Tips dan Trik</strong></a></li> <li><a href='http://coretan-ringanku.blogspot.com/search/label/Download' target='_blank' title='Download sotware untuk Windows'><strong>Download</strong></a></li> </ol> </li> <li><a href='http://coretan-ringanku.blogspot.com/search/label/Linux' target='_blank' title='Tips untuk Linux'><strong>Linux</strong></a></li> <li><a href='http://coretan-ringanku.blogspot.com/search/label/TipsTricks' target='_blank' title='Tips dan Trik'><strong>Tips Trik</strong></a></li> </ol> </li> <li><a href='http://coretan-ringanku.blogspot.com' rel='nofollow' target='_blank'><strong>Tukar Link</strong></a></li> </ul>

itu adalah kode untuk script menu blog saya ini.
sekali lagi untuk mencobanya, copy lah kode di atas, lalu paste setelah kode <nav id='nav'> dan sebelum kode <div class='clear'/>.
jika sudah, terlebih dahulu lah klik "Pratinjau". lalu silahkan edit lah sesuai keinginan,

Catatan: Pemasangan menu dropdown ini di khususkan untuk sobat yang memiliki template seperti punya saya ini, yang di buat oleh kang kapuk.
sekian terima kasih.

Artikel terkait :