Cara Membuat Menu Dropdown Horizontal Pada Blog

 Posted by Mochamad Robby Wijaya

Ok sobat,kali ini saya akan membagikan Pengetahuan Tentang Cara Membuat Menu Dropdown Horizontal Pada Blog,Mungkin banyak dari para Blogger yang masih Newbie,bertanya Tanya,..bagaimana sih cara membuat Menu Dropdown..?? sebenarnya mudah kok,asal kita sedikit mengerti tentang Pengeditan HTML pada Blog,,Baiklah,dengan senang hati saya akan memberitahu Cara Membuat Menu Dropdown Horizontal tersebut kepada Anda..OK,langsung Saja kita kepokok Pembahasan :

1. Masuk dulu ke Blog sobat

2. Pilih Menu “Rancangan”
 

3. Klik Tombol Edit HTML

4.Jangan Lupa Centang Expand Template Widget

5.Silahkan Download Template Blog anda untuk mengantisipasi kesalahan saat  anda melakukan pengeditan HTML

6. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F  untuk memudahkan pencarian kode)

7. Kalau sudah Ketemu Copas Kode Berikut dan letakan diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown

    ----------------------------------------------- */

    #menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkxeTSnFPL15lrXZcqMLYKKiqiOfrOyxgQWkWgQBK-324fq0jYsNQHiYmBw03g7hzIXTHNDG24sNvbJSi3x_pY9CmjSKajqPyObPMyTdhaxxiv_d1UbqVq-h_nIpfANkCQfD_Q0EhxyUk/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}

    #menuwrapper{width:960px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}

    .clearit{clear:both;height:0;line-height:0.0;font-size:0}

    #menubar{width:100%}

    #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}

    #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}

    #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDQj28E6YCHVrC93Dd1k-g74IDcfITxDFNglKarDVSY3ginAyFsLNlG_PhtJv6ATP0ZC28OBiQ008vKFZdoMNLxqUIpI4VOl8WmVRcNmhLmYPBR496OO2UmxdBi6XdWsyOH1KU12oQHpM/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}

    #menubar li{float:left;position:static;width:auto}

    #menubar li ul,#menubar ul li{width:170px}

    #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}

    #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}

    #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}

    #menubar li:hover ul,#menubar li.hvr ul{display:block}

    #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}

    #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}

    #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

8.Selanjutnya Cari Kode Berikut

<div id='header-wrapper'>   

    .............

   </b:section>

        </div>

    Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

    <div class='header-outer'>

        ...............................

    </b:section>

        </div>

Setelah anda menemukan salah satu kode diatas Copas Kode Dibawah ini dan letakan dibawah kode diatas.

<div id='menuwrapperpic'>

<div id='menuwrapper'>

<ul id='menubar'>

<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcUIG7xlY8ss6CUh3BPht6zb-E-f5pYNr6u_xVlr6VLaT4ZJQSaEPUSM2eCHrhfvkFF-4j_y4NeQ_B32ShlQsn3bSwBNZoHMuVG9p9NsiyDtodiyK8tIfZmm72HYM0XkQQzvYLmc1MZM/s1600/home_white.png' style='padding:0px;'/></a></li>

<li><a href=’#’>Beranda</a></li>

<li><a href=’#’>Tentang Kami</a></li>

<li><a href=’#’>Kontak</a></li>

<li><a class='trigger' href='#'>Download</a>

<ul>

<li><a href=’#’>Artikel Komputer</a></li>

<li class='hr'/>

<li><a href=’#’>Game PC</a></li>

<li class='hr'/>

<li><a href=’#’>Software</a></li>

</ul>

</li>

<li><a class='trigger' href='#'>ILMU</a>

<ul>

<li><a href=’#’>Tutorial Blog</a></li>

<li class='hr'/>

<li><a href=’#’>Komputer</a></li>

<li class='hr'/>

<li><a href=’#’>Electronics</a></li>

<li class='hr'/>

<li><a href=’#’>Otomotif</a></li>

<li class='hr'/>

<li><a href=’#’>Ilmu Lainnya</a></li>

<li class='hr'/>

</ul>

</li>

<li><a class='trigger' href='#'>EDUCATION</a>

<ul>

<li><a href=’#’>SD</a></li>

<li class='hr'/>

<li><a href=’#’>SMP</a></li>

<li class='hr'/>

<li><a href=’#’>SMA/SMK</a></li>

<li class='hr'/>

</ul>

</li>

</ul>

<div class='menusearch'>

<div style='float:right;padding:4px 8px 0 0;'>

<form action='http://www.google.com/search' method='get' target='_blank'>

<input name='sitesearch' style='display:none;' value='http://URL-blogmu.blogspot.com'/>

<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzDKO1hBO2-7RgdJjbGf_8jygFdmSTkAFSG4XIsFaMH-bkZM9DYiNlGJJIZVRUKwynHQrfiHZ_G4MzX-v91-oN-A_xXSx2i6S8X8QwT7IYE_KRiobC3JXAoL-dYeBAuJNZmiGOje0B8s/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvfTOodUqFM7HmVHfNctDNr8ycaNUHRNzp94dh928zPGZndbkUTmzRa3jIaMYH8K5k-2XD8OD1o96nFfI5cHjTJC9j0n5gYtpctu6weFCM8eeQDWuF2KGZi_ab6ypmrqXUrd7kyjTlKk/s1600/bg_search.gif' type='image' value='Search'/>

</form>

</div>

</div>

<br class='clearit'/>

</div>

<div style='clear:both;'/>

</div>

9. Kemudian Simpan Template dan Selesai…!!!!!

Keterangan :

1.# ganti dengan URL yang ingin anda masukkan pada Menu Dropdown

2.Width:960px; Panjang Menu Dropdown Horizontal yang bias anda sesuaikan dengan panjang

    Template Blog anda

3.http://URL-blogmu.blogspot.com Ganti dengan URL alamat Blog anda

Semoga bermanfaat bacaannya sobat dan sukses selalu