Cara Membuat Menu Navigasi drop down ( Menu Bercabang )

Pada awal membuat blogger saya bingung, harus di apakan blog ini saya browsing browsing nyari inspirasi akhirnya saya putuskan untuk mendesain dulu blog saya mulai dari mngetur template, background, membuat gambar header sampai membuat menu navigasi drop down / menu bercabang, nah berikut saya share bagaimana membuat menu drop down seperti pada blog saya ini :

Berikut Langkah – langkahnya :

1.  Pertama masuk dulu ke akun Blogger.

2.  Lalu masuk ke menu : template >> edit HTML.

3.   Dan cari tulisan ]]></b:skin>

      Gunakan ctrl + F biar cepet nyarinya.

4.  Dan copy kode css berikut ini tepat diatas kode ]]></b:skin>

      /*Start Css Menu*/<br /> .menu{<br /> border:none;<br /> border:0px;<br /> margin:0px;<br /> padding:0px;<br /> font-family:verdana,geneva,arial,helvetica,sans-serif;<br /> font-size:14px;<br /> font-weight:bold;<br /> color:8e8e8e;<br /> }<br /> .menu ul{<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtdHefflVt58UnF7MLOQbnKf86EmbUMxek2j-NWI4bnmPi6iAvrfxk-bMkUkt-LOU68MMFKziChwHzq1MV6Evbjkf2PAn3BNcXl_AlAAOqtZ-dq6KClCaP126pn8c9_wSBGN844I7ici0J/s1600/menu-bg.gif) top left repeat-x;<br /> height:43px;<br /> list-style:none;<br /> margin:0;<br /> padding:0;<br /> }<br /> .menu li{<br /> float:left;<br /> padding:0px 8px 0px 8px;<br /> }<br /> .menu li a{<br /> color:#666666;<br /> display:block;<br /> font-weight:bold;<br /> line-height:43px;<br /> padding:0px 25px;<br /> text-align:center;<br /> text-decoration:none;<br /> }<br /> .menu li a:hover{<br /> color:#000000;<br /> text-decoration:none;<br /> }<br /> .menu li ul{<br /> background:#e0e0e0;<br /> border-left:2px solid #a80329;<br /> border-right:2px solid #a80329;<br /> border-bottom:2px solid #a80329;<br /> display:none;<br /> height:auto;<br /> filter:alpha(opacity=95);<br /> opacity:0.95;<br /> position:absolute;<br /> width:225px;<br /> z-index:200;<br /> /*top:1em;<br /> /*left:0;*/<br /> }<br /> .menu li:hover ul{<br /> display:block;<br /> }<br /> .menu li li {<br /> display:block;<br /> float:none;<br /> padding:0px;<br /> width:225px;<br /> }<br /> .menu li ul a{<br /> display:block;<br /> font-size:12px;<br /> font-style:normal;<br /> padding:0px 10px 0px 15px;<br /> text-align:left;<br /> }<br /> .menu li ul a:hover{<br /> background:#949494;<br /> color:#000000;<br /> opacity:1.0;<br /> filter:alpha(opacity=100);<br /> }<br /> .menu p{<br /> clear:left;<br /> }<br /> .menu #current{<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKtFKxO2mW0GZivs5LT4N6L0OeAbvDDbTz_XcmxqaV6h3eHe4ZhzbSNN_BfXbn97pC_BwSIFyV2Iw_8WIgKc4QVQSb5nyCMqmbj63HrVtGZYo9OxFeKeOegHPz4nhVSjMg_DbG100ADv-/s1600/current-bg.gif) top left repeat-x;<br /> color:#ffffff;<br /> }

5.  Setelah itu simpan template.
6.  Selanjutnya, masuk ke menu : Tata Letak >> tambahkan gadget di bawah header.
7.  Pilih mode HTML, judul terserah dan copy kan kode HTML berikut ini :

       <div class="menu"> <ul> <li><a href="http://amix24.blogspot.com/p/blog-page_65.html"> Go Home</a></li> <li><a href="http://amix24.blogspot.com/search/label/Education">Education</a><br /> <ul> <li><a href="http://amix24.blogspot.com/search/label/Materi%20Kuliah">Materi Kuliah</a></li> <li><a href="http://amix24.blogspot.com/search/label/TIK">Zona TIK</a></li> </ul> </li> <li><a href="http://amix24.blogspot.com/">Book</a><br /> <ul> <li><a href="http://amix24.blogspot.com/">Novel</a></li> <li><a href="http://amix24.blogspot.com/">SEO Tips</a></li> <li><a href="http://amix24.blogspot.com/">Adsense</a></li> <li><a href="http://amix24.blogspot.com/">Feed</a></li> </ul> </li> <li><a href="http://amix24.blogspot.com/">Sport</a><br /> <ul> <li><a href="http://amix24.blogspot.com/">Phone Secret Codes</a></li> <li><a href="http://amix24.blogspot.com/">Phone Screenshot</a></li> </ul> </li> <li><a href="http://amix24.blogspot.com/">Blogging</a><br /> <ul> <li><a href="http://amix24.blogspot.com/">Artikel Komputer</a></li> <li><a href="http://amix24.blogspot.com/">Panduan SEO</a></li> </ul> </li> <li><a href="http://amix24.blogspot.com/search/label/Cheat%20&%20Tutorial">Cheat & Tutorial</a><br /> <ul> <li><a href="http://amix24.blogspot.com/2015/08/materi-biologi-dasar.html">Cheat PS 2</a></li> <li><a href="http://amix24.blogspot.com/2015/08/anatomi-morfologi-tumbuhan.html">Cheat PS 3</a></li> <li><a href="http://amix24.blogspot.com/search/label/Cheat%20Game%20PC">Cheat Game Lainnya</a><br /> </li> </ul> </li> <li><a href="http://amix24.blogspot.com/search/label/Software%20&%20Aplication">Software & Aplication</a></li> <li><a href="http://amix24.blogspot.com/">Insight</a></li> <li><a href="http://amix24.blogspot.com/p/pasang-iklan-super-murah.html">Advertise</a></li> </ul> </div>

8.  Setelah itu simpan, dan lihat blog.

Catatan :
- Ganti http://amix24.blogspot.com/p/blog-page_65 dengan url menunya.
- dan untuk tulisan Go Home, Education, Materi Kuliah, Zona TIK dst. itu di ganti nama menu sesuai menu blog anda.

Anda sedang berada pada artikel tentang Cara Membuat Menu Navigasi drop down ( Menu Bercabang ) dengan url https://kenkyona.blogspot.com/2015/08/cara-membuat-menu-navigasi-drop-down.html,Boleh copy paste tapi sertakan Cara Membuat Menu Navigasi drop down ( Menu Bercabang ) sebagai sumbernya.