2 Langkah Membuat Menu Dropdown Horizontal pada Blog

HTML

2 Langkah Membuat Menu Dropdown Horizontal atau membuatmenu dan submenu dropdown di blog atau 2 langkah membuat menu dan submenu dropdown horizontal di blog atau 2 cara membuat menu dan sub menu pada blog__________ halo blogger, pada postingan kali ini saya akan berbagi tutorial blogger yang sangat penting untuk diterapkan di blog manfaatnya untuk mengirit tempat pada blog, untuk menerapkan tutorial ini ada  2 Langkah yang harus dilakukan atau pengeditan html yaitu pada html dan css, 2 langkah Membuat Menu Dropdown Horizontal pada Blogini sudah banyak sekali dibahas oleh para blogger, tapi tidak ada salahnya saya juga berbagi tetang 2 langkah membuat menu dropdown horizontal. Tapi sebelumnya saya akan sedikit membahas tentang Apa menu dropdown horizontal itu. Menu adalah satu navigasi yang memudahkan para pengunjung blog untuk menelusuri elemen pada blog. Horisontal yaitu sejajar ke samping, sedangkan dropdown artinya sejajar kebawah atau turun. Jadi menu dropdown horizontal adaah navigasi sejajar kesamping di blog yang akan mengeluarkan sederet sub.menu ke bawah. Berikut 2 langkah tutorialnya : 

•  EDIT HTML

HTML

 Masuk di blog >> desain>>pilih template >>  Peringatan UNDUH dulu html Template sobat untuk jaga jaga sebai pemulihan,,, kalu sudah di unduh lalu klik edit HTML > > centang expand template widget

Cari kode berikut atau yang mirip >>>

<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RezDown7 (Header)' type='Header'/>
</b:section>

Lalu paste kode berikut di bawah </b:section> tapi sebelum mempaste kode ini rubah dulu judul menu dan sub menu dan link warna merah dengan link yang sobat bloger inginkan karena kode

<div id='outer'>

<div id='navbarmenu'>

<div id='navbarmenuleft'>

<ul id='nav'>

<li><a href='http://kementerian-agama-ksb.blogspot.com'>BERANDA</a></li>

<li><a href='#'>PROFIL</a>

<ul>

<li><a href='http://kementerian-agama-ksb.blogspot.com/2012/05/sejarah.html'>Sejarah</a></li>

<li><a href='http://kementerian-agama-ksb.blogspot.com/2012/05/visi-misi.html'>Visi Misi</a></li>

<li><a href='http://kementerian-agama-ksb.blogspot.com/2012/05/renstra.html'>Renstra</a></li>

<li><a href='http://www.blogger.com/profile/16522175733298954863'>Tentang Kami</a></li>

</ul></li>

<li><a href='#'>PRODUK HUKUM</a>

<ul>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/Produk%20Hukum'>Produk Hukum</a></li>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/UU%20Perkawinan'>UU Perkawinan</a></li>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/PP%20Tentang%20Haji'>PP Tentang Haji</a></li>

</ul></li>

<li><a href='#'>URAIS PHU</a>

<ul>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/Seksi%20Urais'>Seksi Urais</a></li>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/PHU'>PHU</a></li>

</ul></li>

<li><a href='#'>PONTREN PENAMAS</a>

<ul>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/Seksi%20Pekapontren'>Seksi Pekapontren</a></li>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/Seksi%20Penamas'>Seksi Penamas</a></li>

</ul></li>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/Mapenda'>Mapenda</a></li>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/Zawa'>ZAWA</a></li>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/Subbagian%20TU'>SUB.BAGIAN TU</a></li>

<li><a href='http://kementerian-agama-ksb.blogspot.com/search/label/Berita'>BERITA</a></li>

</ul>

</div></div></div>

•   EDIT CSS

CSS

 Cari kode css seperti ini ]]></b:skin> lalu paste kode di bawah ini di atas kode ]]></b:skin>

#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

Sebelum menyimpan klik pratinjau terlebih dahulu, kalau sudah yakin bisa baru di simpan