Cara Membuat Drop Down Menu Navigasi di template kang kapuk

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

itu adalah kode untuk script menu blog saya yang Coretan-Ringanku.blogspot.com .
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 Template ". lalu silahkan edit lah sesuai keinginan,

Catatan: Pemasangan menu dropdown ini di khususkan untuk sobat yang memiliki template seperti punya saya ini dan template seperti blog saya yang coretan-ringanku, yang di buat oleh kang kapuk.
semoga bermanfaat, sekian terima kasih.