Cara Membuat Menu Navigasi Dropdown Dibawah Header

              setelah saya lama menelusuri blog ke blog lain mencoba 1 cara ke cara yang lainnya tak pernah berhasil membuat navigasi nya juga bertanya katanya pengaruh templet tapi setelah lama menelusuri akhirnya ada yang bisa tapi sayangnya gak cocok dengan keinginan saya dan setelah saya edit dkit akhirnya mantap dah ok deh untuk hasilnya sobat bisa lihat navigasi di blog saya ini,menurut saya sebuah blog mesti berisi navigasi baik drop down ataupun tidak tujuannya untuk mempermudah pengunjung mengetahui detail blog kita ok deh buat sobat yang udah tak sabar mari ikuti saya langkah langkah nya
login ke blog sobat klik dasbor cari rancangan masuk edit html centang kotak Expand Template Widget download templet lengkap untuk jaga jaga bila ada kesalahan

kemudian cari kode ]]></b:skin>
gunakan f3 untuk mempercepat pencarian
kemudian paste kode dibawah ini tepat diatas kode ]]></b:skin>


#catmenucontainer{
height:33px;
width:1000px;
margin:-12px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObOIh1CvgT_Qo03HdGAVX8qrTZLfh9BlpFaIQWTJx0xVxYVjI3eP3wqFEO0Juy0RRGYunKhHs52-a1XtWv9wOGfwRajgweij8VI9zNiqoSzHdEVcP1296__TUXF6Vm11d5ADJ9veXo9sZ/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}


#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObOIh1CvgT_Qo03HdGAVX8qrTZLfh9BlpFaIQWTJx0xVxYVjI3eP3wqFEO0Juy0RRGYunKhHs52-a1XtWv9wOGfwRajgweij8VI9zNiqoSzHdEVcP1296__TUXF6Vm11d5ADJ9veXo9sZ/) repeat-x;
height:33px;
}


#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}


#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYWlhbhsu5MNfZoWdNHHYLT1KiWRPylKfWVrKu15w-W1hzK-WhvdALYe0i5ul-de_cvhcTbTI8XB1NXoG8NBUQicKCLXKXrWJkur8kiBrmcgYaySlb2wjzBAVHqsz9QABzekwysM1jjxK/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}


#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;


}


#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYWlhbhsu5MNfZoWdNHHYLT1KiWRPylKfWVrKu15w-W1hzK-WhvdALYe0i5ul-de_cvhcTbTI8XB1NXoG8NBUQicKCLXKXrWJkur8kiBrmcgYaySlb2wjzBAVHqsz9QABzekwysM1jjxK/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}


#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}


#catmenu li li {
}


#catmenu li ul a {
width: 140px;
}


#catmenu li ul a:hover, #catmenu li ul a:active {
}


#catmenu li ul ul {
margin: -34px 0 0 170px;
}


#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}


#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}



#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

kemudian cari kode <div id="content-wrapper">
Setelah itu copy kode dibawah ini dan paste tepat diatas kode <div id="content-wrapper">

<div id='catmenucontainer'>
<div id='catmenu'>


<ul>
<li><a href='http://bagaskara-vaidika.blogspot.com/'>Home</a></li>
<li><a href='#' title='vaidika'>bisnis online</a>
<ul class='children'>
<li><a href='http://bagaskara-vaidika.blogspot.com/2011/10/upload-file-ke-ziddu-dapat-dollar.html' title='Link-Title'>ziddu.com</a></li>
<li><a href='http://bagaskara-vaidika.blogspot.com/2011/10/upload-dan-download-file-di-enterupload.html' title='Link-Title'>enterupload.com</a></li>
<li><a href='http://bagaskara-vaidika.blogspot.com/2011/10/cara-buat-alertpay-rekening-online.html' title='Link-Title'>alertpay</a></li>
<li><a href="http://bagaskara-vaidika.blogspot.com/2011/11/kumpulblogercom-ptc-terbaik-indonesia.html">kumpulbloger.com</a></li>
<li><a href="http://bagaskara-vaidika.blogspot.com/2011/10/cara-daftar-adfly-situs-peringkas-link.html">adf.ly</a></li>
<li><a href="http://bagaskara-vaidika.blogspot.com/2011/11/bisnis-online-baca-email-dapat-dollar.html">cuma baca email dapat dollar</a></li>
</ul>
</li>
<li><a href='#' title='vaidika'>contact</a>
<ul class='children'>
<li><a href='http://bagaskara-vaidika.blogspot.com/2011/11/my-contact.html' title='Link-Title'>my vaidika contact</a></li>
</ul>
</li>
<li><a href='#' title='vaidika'>anti virus download</a>
<ul class='children'>
<li><a href="http://bagaskara-vaidika.blogspot.com/2011/09/membuat-key-smadav-pro-dengan-nama_19.html">smadav + key</a></li>
<li><a href="http://bagaskara-vaidika.blogspot.com/2011/10/avira-premium-security-suite10-licensy.html">avira premium + key</a></li>
<li><a href="http://bagaskara-vaidika.blogspot.com/2011/10/kis-dan-kav-2012-terbaru-key-dan-key.html">kaspersky kav dan kis + key</a></li>
</ul>
</li>
<li><a href='#' title='vaidika'>about</a>
<ul class='children'>
<li><a href='http://bagaskara-vaidika.blogspot.com/2011/11/about-web-me.html' title='Link-Title'>about vaidika</a></li>
</ul>
</li>
<li><a href='#' title='vaidika'>windows</a>
<ul class='children'>
<li><a href="http://bagaskara-vaidika.blogspot.com/2011/09/membuat-windows-xp-bajakan-jadi.html">windows xp bajakan jadi asli</a></li>
<li><a href="http://bagaskara-vaidika.blogspot.com/2011/09/kemarin-saya-sudah-share-cara-merubah.html">windows 7 bajakan jadi asli</a></li>
</ul>
</li>
<li><a href='#' title='vaidika'>tukeran link</a>
<ul class='children'>
<li><a href="http://bagaskara-vaidika.blogspot.com/2011/11/tukeran-link-atau-banner_13.html">tukerin link/banner yuk</a></li>
</ul>
</li>
<li><a href='http://bagaskara-vaidika.blogspot.com/2011/11/daftar-isi-blog-vaidika.html' title='vaidika'>daftar isi</a></li>
</ul>

</div>
</div>


<div class='clear'/>

save tamplet dan lihat hasilnya


catatan :ganti alamat linknya dengan link sobat bila ada yang kurang jelas silahkan berkomentar hasilnya silahkan sobat lihat navigasi / kolom home,bisnis online yang di bawah navbar di blog ini
semoga bermanfaat


kata kunci lain: cara membuat kolom home,about,contact di blog.cara buat kolom navigasi di bawah navbar,cara buat kolom drop down

Daftar Isi Blog