Tutorial Membuat Menu Horizontal Dropdown + Search engine - Hallo
para Sobat Blogger. Kali ini saya akan share tentang cara membuat Menu
Horizontal Dropdown pada blog. dan kelebihan pada menu dropdown ini
adalah terdapat search engine di samping menu yg memudah kan para
pengunjung mencari informasi di blog anda
Contoh :
Berikut Tutorialnya :
1.) Seperti biasa, pertama-tama kita harus login ke account Blogger terlebih dahulu
2.) Masuk ke Dashboard, Template
3.) Pilih Edit HTML, lalu ceklis "Expand Template Widget"
4.) Cari kode ]]></b:skin> (tekan ctrl+f untuk mempermudah pencarian)
5.) bila sudah, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvEEV92uWeMLPHWLK3w8YZ-QBtIJrPPHGw0_fu3nZ72eyPu4_muZw2tuPOapWbgVuQcysjBk1cIrT3Wo0PY3_zjF7PrmxKhnPfSVlRfYHJWz95LH6j2dl8smqZU3wvRSLXKsZNfs2WZyQ/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/AVvXsEgazK67LEfwGmAgfzHfJLXbtzMue_wTZarpb7qZzD0rQ6bukTo0zOoGG82VPtD_0NJ6Eaxy0ttoFt1hVjcWX6v3cOIWfrTBLqPaDGmL3Mx6n9_dTpqdC3c6si80Nwa8zgAB-3wm3H1w3yQ/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}
6. Cari kode </head>, kode tersebut biasanya terdapat dua, kamu cari kode yang kedua
7. bila sudah ketemu, letakkan kode berikut tepat dibawah kode </head>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Culture</a></li>
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>
<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</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://boma-internet.blogspot.com'/>
<input id='search-box' name='q'
onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='';'
style='width:170px;border:none;padding:4px 10px; font:12px
Arial;color:#666;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPF8t8qSi3RlbbfUIeQaCIxxcLcPYYFCVo4zubC4yFWXijHB42GCzkPrWtXda3DxLzvMK-k_P9Mx2x92SvnJE85TVa8kM2oRFdkG2fEZjI-zpkowwJv7uySECkgPMpmj_A4hROCGIASQc/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/AVvXsEgtEleyTly7bLK6DXVzZKpF-wInGpqKr_-XmJuWAF9WjhCV42BGUJH6x6Bs-to5vSZpYA21Eq5pl-c-bX4Emfmye9m9MWi6h2jo-KsvwlUjafKRKVlnxqAq7TSs_BXBZEcQyco5FvwdITE/s1600/bg_search.gif'
type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
Keterangan : Yang warna
merah adalah link yang akan dituju
Yang warna
biru adalah judul dari Menu dropdownnya
Yang warna
ungu, ganti dengan url blog kamu
8.) Sebelum menyimpan template, sebaiknya klik
pratinjau/preview terlebih dahulu, supaya bisa melihat apakah widgetnya sudah benar atau tidak
9.) bila sudah, klik
Simpan template.
Semoga bermanfaat :D
