CARA MEMBUAT SUBMENU DENGAN KOTAK SEARCH

Cara Membuat SubMenu Dengan Kotak Search

Untuk Membuat submenu yang terdapat kotak search didalamnya sangatlah mudah,tapi sebulam saya menjelaskan seperti apa mekanisme pemasangannya, saya akan sedikit menjelaskan apa sich submenu itu ? submenu adalah bagian dari menu yang terdapat pada menu utama yang fungsinya untuk memudahkan para pembaca memilih artikel menu terkait tanpa harus berpindah pindah tempat.

Nah seperti apa penampakannya, berikut penampakannya :

 

 

Sekarang kita menuju langkah penerapan :

• Login Ke Blogger

• Klik Edit TEMPLATE

• Cari kode : ]]></b:skin> atau tekan control ctrl+f untuk mempermudah dalam pencarian kodenya

• jika sudah ketemu, kopy kode dibawah ini dan pastekan tepat diatas kode  ]]></b:skin> 

Kode yang di copy :

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje9E9ECUDwmInGALY_qSrl3csch1wPRHeQz7RQxhi_2Tmr_3Ofi6SjRaKpwUDUzIJbgqp-cWYYOFA3PHeZvFWk6lBAHZgOGsg2hnczwVSidHzN3YLMsA6d4mDx8dN8KHYtHf-qxbIYsQY/s1600/nav.png) repeat-x;width:980px;margin:0 auto;padding:0 auto}
#menuwrapper{width:980px;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/AVvXsEjWrP-d-AvrCFFmAYWGWi-a5xA-px2wI3GVyFF_gKpJuURmsjiOa5uRBWQKNKgx69mLPSFCDitr_i5r1yz2thSV1rk9_w9VSjWFnRoBBcrLEa68AzYX34Yu46nPSScvG2sERMjcRnlkASg/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}
 

Ket : Rubah kode yang berwarna biru dan atur sesuaikan dengan ukuran blog anda

 

Langkah selanjutnya :

• Cari kode </head> atau tekan control ctrl+f untuk mempermudah dalam pencarian kodenya

• jika sudah ketemu, kopy kode dibawah ini dan pastekan tepat diatas atau dibawah kode </head>

 

Kode yang di Copy :

<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://razebook.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/AVvXsEi02dgUo-sNirmg60HfbA7m3jyD6aIr0dQJzd4OVjqvVZwdmaSyqEorInCYCPnL4Sq4zSsoOSZPXSYJHX-B4tmNn9fxHnyNHAHNFK9CGfqUGvbZT3duPumzeI3gSveo1Gm3S5kJ3gABxL0/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/AVvXsEi4Rx3HX-m_o3a_FknYSzopxZ2iIq_Dz7EGQ1K1LsdoUDQ7xxJ_nmozT2oPmUJqKXsuEr1DsbDkGPB7ToMjmpeeyMLfElNLXE180LRWFAyqvMxJys3ZQq3_jN0buQta-xYgElpPLMDsuDY/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div> 

 

Ket : Rubah kode yang berwarna biru denagn URL blog anda

 

Demikan cara membuat submenu dengan kotak search, semoga bisa bermanfaat untuk anda semua.........