Cara Membuat Menu Horizontal Dropdown di Blog

Cara Membuat Menu Horizontal Dropdown di Blog + Search engine M.1 sangatlah penting Untuk mempermudah pengunjung Untuk mencari sesuatu yang mereka butuhkan dan di katakan + Search engine M.1 yaitu dengan tambahan search engine maka pengunjung akan lebih mudah mencari artikel-artikel di blog kita. 

Langsung Saja Langkah-langkah Cara Membuat Menu Horizontal Dropdown di Blog + Search engine M.1 adalah sebagai berikut :

• Login ke akun blogger anda  
• Pilih Menu Tempelate           

  

• Silahkan Download lengkap template anda untuk mengantisifasi kesalahan Saat anda melakukan Edit HTML 
• Klik Edit HTML

• Kemudian Klik Lanjutkan dan akan muncul halaman Edit HTML, jangan lupa  Centang Expand Template Widget.

• Sekarang Cari kode ]]></b:skin>   Gunakan tombol Control +  F untuk mempermudah pencarian.
• Bila sudah ketemu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIifLyx92Xusl0pObJkfIQUvpg_ChGMZg6sF9nKCg9VtNpG8jjU9bgUESOAlP6J48uTMX8bgIPyCB6n6KZaTttKV356HE4FrTi2AytqY756MAx0eysadS7t_2YoZRyZUjKVZnRQrgGt1U/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/AVvXsEjjLhiHRbydDTSFe4wwcwnp29uzCzrww8yNeudA5KXuNCLE61AvoTNcuM8YcdRdYKyfxjVsgiKu7Xpyj8FypgT8SWiaI1D_5xnL5GEZBEHfpUyNNUIj08F1ohErB4tW-4s3t9l5k6_if8M/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}

 Keterangan :  Silahkan sesuaikan lebar menunya dengan mengganti kode width:960px

• Cari kode <header>, kode tersebut biasanya terdapat dua, cari kode yang kedua
• Bila sudah ketemu, letakkan kode berikut tepat dibawah kode <header> 

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitlwVLuAiBrH1S2y7b1m_nF8Og4tGWdc0Xi5YHx2GoYrt2FeokzxPU1QtAdrMHYcwfTTHZQqxKz6Y8DljvEeHu9yYBxEsZ8cylU2Xv-oPkMtN4jAHt-QSly0gl2RNJtiLNLoqaHV9Hy2w/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://bistori.blogspot.com/2012/09/daftar-isi.html'>Daftar Isi</a></li>
<li><a class='trigger'>Qnet Ltd.</a>
<ul>
<li><a href='http://bistori.blogspot.com/search/label/Qnet%20Unlimited'>Qnet Unlimited</a></li>
<li class='hr'/>
<li><a href='http://bistori.blogspot.com/search/label/Produk%20Qnet'>Produk Qnet</a></li>
<li class='hr'/>
<li><a href='http://bistori.blogspot.com/search/label/Pertanyaan%20Qnet'>Pertanyaan Tentang Qnet</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Tutorial</a>
<ul>
<li><a href='http://bistori.blogspot.com/search/label/Tutorial%20Blog'>Tutorial Blog</a></li>
<li class='hr'/>
<li><a href='http://bistori.blogspot.com/search/label/Tutorial%20Blog'>Tutorial Wordpress</a></li>
<li class='hr'/>
<li><a href='http://bistori.blogspot.com/search/label/SEO%20Blog'>SEO Blog</a></li>
<li class='hr'/>
<li><a href='http://bistori.blogspot.com/search/label/SEO%20Blog'>SEO Wordpress</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Artikel</a>
<ul>
<li><a href='http://bistori.blogspot.com/search/label/Berita'>Berita</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Sofware</a>
<ul>
<li><a href='http://bistori.blogspot.com/search/label/Programming%20Grafis'>Programming Grafis</a></li>
<li class='hr'/>
<li><a href='http://bistori.blogspot.com/search/label/Internet'>Internet</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://www.facebook.com/akang.darisman?ref=tn_tnmn'>Facebook</a></li>
<li class='hr'/>
<li><a href='https://twitter.com/akangdarisman'>Twitter</a></li>
<li class='hr'/>
<li><a href='http://bistori.blogspot.com/2012/10/var-servicedomainwww_17.html'>Contact Form</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://bistori.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/AVvXsEj54ikAH5zQPHLEv-6XGmDcL2vBOyLFyl0JwOBH8RbfXszIn5l_jbKy3FgvhvufYfajS6pVAxwzsqBs9NHsmXIoQS2-zNb-POFfwWTVAdQIFUioy2VpP7niF3taOrFtTwUJj_3FSEue0hQ/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini yaaa........'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWcfuxEfddnE2QA_eHQoNMDiEfV9cZsrfd-na7QRce-S_2XYXllJUPaogWhb6YEfJ2-LaCZ7I-NDXjvWDR4tBfcyGijhZ_FoiUJQmMBVcNrrWTelCNko5JPO3r-ErchWDE3MZZRnDAGo/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

• Kemudian Klik Simpan Template dan selesai........!

Keterangan : 

1. Yang berwarna Merah dengan link tujuan Menu/URL yang ingin anda masukan ke Menu Dropdown
2. Yang berwarna Biru dengan Menu yang ingin anda tampilkan
3. Yang berwarna Kuning  Sub Menu yang ingin anda tampilkan

Demikianlah tutorial Cara Membuat Menu Horizontal Dropdown di Blog + Search engine M.1 Semoga bermanfaat dan Jangan lupa beri komentarnya ya!!!