Cara Membuat Menu Dropdown+ Search Box

Halo sobat setia blogger...di jumpa kita kali ini saya akan membagikan satu tutorial yaitu Cara Membuat Menu Dropdown+ Search Box pada blog. Menambahkan menu pada blog rasanya lebih cantik dan lebih SEO Friendly. Coba perhatikan Gambar menu di bawah ini, keren kan...

Kalau sobat ingin menu seperti di atas mari kita simak bersama tutorialnya..Oke sudah siap untuk menyimaknya...?

Lihat opsinya berikut ini;

• LOGIN ke blog terlebih dahulu.
• Pilih blog yang ingin di tambahkan menu.
• Klik TEMPLATE >> Expand >> Unduh TEMPLATE LENGKAP >> Close POP UP Expand.
• Klik EDIT TEMPLATE
• Lalu cari kode seperti ini ]]></b:skin> atau gunakan Ctrl+F untuk mencari kode tersebut.
• Kalau sudah ketemu kode nya lalu copas kode dibawah ini, lalu letakkan tepat di atas kode ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbLMdX9juVNe63a6aEz7_ba_WyIJJj0L3gal0nblg6ENvE3sul6ZC7RiRJXGZYzK54crCad1cufQ1KaKG6IxR19nG5IZSWbpXjlTotQCqnIfQeGLDfvp3AuPktK6-YC3wVv0olD5pbFE/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/AVvXsEg3j_5ACdZeJ4pc2EbT-T4w2J-37hPoxewaya6L68DG6cLdFf4Jp68ZeR8sViHZzvzaLjBkAjOwB_YJuq-txnuBYlgJoSJnb_TRrSSi5HqIc9ua_ZG7BdYDrh1SC1Cb-MHnrgYRYDaX2Ck/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: perhatikan tulisan yang di cetak tebal berwarna biru, kode tersebut bisa anda rubah sesuai keinginan anda.

Langkah berikutnya adalah,

• Cari kode <header> atau gunakan Ctrl+F lalu copas kodenya letakkan pada box search.
• Lalu copas lagi kode di bawah ini dan pasang tepat di bawah atau di atas kode <header>
• Lalu SAVE.
• Selesai.

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='Your Link'>Home</a></li>
<li><a href='Edit Link'>Menu</a></li>
<li><a href='Edit Link'>Menu1</a></li>
<li><a href='Edit Link'>menu2</a></li>
<li><a class='trigger' href='#'>menu3</a>
<ul>
<li><a href='Edit Link'>Sub menu1</a></li>
<li class='hr'/>
<li><a href='Edit Link'>Sub Menu2</a></li>
<li class='hr'/>
<li><a href='Edit Link'>Sub Menu3</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Menu4</a>
<ul>
<li><a href='Edit Link'>Sub menu1</a></li>
<li class='hr'/>
<li><a href='Edit Link'>Sub menu2</a></li>
<li class='hr'/>
<li><a href='Edit Link'>Sub menu3</a></li>
<li class='hr'/>
<li><a href='Edit Link'>Sub menu4/a></li>
</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://newblogclub.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/AVvXsEiaxOJxdQjSzuUoaptitm7XbcmWwDfKTmIZDpP6i3Lrkrg-0hAO5SJ_gVg0NAemKJ19WrioXmAwfQWDXJBiVYJhCkGPYcsgfWaAUhNnjm-ymaGpMhMG_2ZG5DN3U7ZjeUk7t9Z0hGZkhi4/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/AVvXsEiuF6_yK9ej4XM9cWFC8S80dYn6w0S1nzZO6CnWtDFVRopfA-Z_AK2m4uLBMmM83TSOhCKYkbW1rdagJzuT71cHwyakap67phbG2eLdDeWAP9Pb3v2sLrGMG_eVRWkMEQmRufhp7Ubk488/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Keterangan: Lihat tulisan tebal berwarna merah, silakan di ganti dengan URL blog sobat.

Setelah semuanya selesai dan langkah di atas berhasil anda lakukan berarti anda semakin bisa membuat Blog dengan tampilan SEO Friendly.

Semoga tema tutorial kali ini yaitu Cara Membuat Menu Dropdown+ Search Box dapat bermanfaat bagi semua orang khususnya bagi blog pemula. Salam.....