Cara Membuat Menu Navigasi Horizontal Dropdown di Blogspot

Menu navigasi horizontal dropdown atau menu navigasi blog dengan sub menu dibawahnya atau menu navigasi bercabang pasti sering anda lihat di blog lain atau anda dapat melihat langsung di blog Terlintas. Untuk anda yang ingin memasang menu navigasi dropdown di blog kesayangannya, silahkan simak tutorialnya dibawah ini.

Cara Membuat Menu Navigasi Dropdown di Blog
1. Login ke blogger
2. Pada dasbor, pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

#navrudymenu{
background:#2D8FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT60LqJwFXLrQKgpR0kqrE3AUGERbuBOFu9NQnh1ltQY4bAM5adteQxVfpzaANRr5PmnX6xaY8is-2MYgo2rsTxirKPMVjZX5Xex5tFZGkHHDmtKMhIklAz2eeD_gB-E-N5cw7HT-Gu8Y/s1600/menunav.gif) repeat-x top;
width:700px;height:auto;margin:0;padding:0;border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;}
#navrudymenu ul{float:left;list-style:none;margin:0;padding:0;}
#navrudymenu li{list-style:none;float:left;}
#navrudymenu li a, #navrudymenu li a:link, #navrudymenu li a:visited{color:#000000;font-weight:bold;
display:block;text-shadow: 0px 1px 1px #fff;padding:9px 10px 9px 10px;font-size: 12px;
font-family: verdana;text-decoration:none;}
#navrudymenu li a:hover{background:#DADADA;color:#ffffff;}
#navrudymenu li ul{z-index:10;position:absolute;height:auto;width:200px;visibility:hidden;}
#navrudymenu li ul li a, #navrudymenu li ul li a:link, #navrudymenu li ul li a:visited{float:none;
background:#2D8FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT60LqJwFXLrQKgpR0kqrE3AUGERbuBOFu9NQnh1ltQY4bAM5adteQxVfpzaANRr5PmnX6xaY8is-2MYgo2rsTxirKPMVjZX5Xex5tFZGkHHDmtKMhIklAz2eeD_gB-E-N5cw7HT-Gu8Y/s1600/menunav.gif) repeat-x top;
width:200px;border-width:1px;border-style:solid;border-color:#575757;}
#navrudymenu li ul li a:hover{background:#000000;color:#ffffff;}
#navrudymenu li:hover ul{left:auto;visibility:visible;}

4. Cari kode yang mirip dengan kode dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Terlintas' type='Header'/>
</b:section>
</div>

5. Lalu letakkan kode berikut dibawahnya

<div id='navrudymenu'>
<ul id='navrudymenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Blogging</a>
<ul>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>Seo</a></li>
</ul>
</li>
<li><a href='#'>Desain Grafis</a>
<ul>
<li><a href='#'>Photoshop</a></li>
<li><a href='#'>Dreamweaver</a></li>
<li><a href='#'>Coreldraw</a></li>
</ul>
</li>
</ul>
</div>

6. Simpan template

Silahkan dicoba tutorial diatas mengenai cara membuat menu navigasi dropdown di blogspot, semoga bermanfaat, happy blogging.

tutorial blog

Terlintas

Cara Membuat Menu Navigasi Horizontal Dropdown di Blogspot

Related Posts

Entri Populer