Cara Membuat Menu Blogger plus search

Bismillahirahmanirrahim. Pada tutorial kali ini kita akan membahas bagaimana caranya membuat menu bloggger. Menu blogger yang akan kita buat nantinya terdapat pula fasilutas kotak pencarian blogger (search blogger). Sebelum kita masuk ke langkah-langkah pembuatan menu blogger + kotak pencarian blogger sebaiknya kalian liat dulu tampilan menu bloggernya pada link demo di bawah ini.

Download Demo

• Pertama kalian harus login dulu di blogger
• Setelah login pilih Racangan --> Edit HTML dan beri cheklis pada Expand Template Widget
• Copy paste kode di bawah ini sebelum kode ]]></b:skin>
#menusemua{height:120px;margin-top:12px;float:left;width:920px;} #menueko{height:34px;float:left;width:600px}
#menueko,#menueko ul{padding:0;margin:0;list-style:none;line-height:1} #menueko{margin-bottom:1px}
#menueko ul{float:left;list-style:none;margin:0 0 0 0;padding:0}
#menueko li{float:left;list-style:none;margin:0;padding:0 6px 0 0}
#menueko ul li{list-style:none;margin:0;padding:0}
#menueko li a,#menueko li a:link{color:#fff;display:block;border:1px solid #fff; margin:0;padding:8px 8px 8px 8px;text-decoration:none;text-transform:uppercase;font:bold 11px Arial,Helvetica,sans-serif;background:#0D606B;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#menueko li a:hover,#menueko li a:active{color:#AAEDF6;display:block;text-decoration:none;background:#003D45}
#menueko li.current_page_item a{color:#fff;}
#menueko li:hover,#menueko li.sfhover{position:static}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWalAjbIPmKdr5e_Nbv4CpUVBGRqDuhbhlZEbPFQDX7QrXtwu5XoEHWu0dG9zabKXp0c2HCvnZoG2wmKrBBqapjiLgpn-sHvW32r0u1LggblVPe4yORIyS_kBJQxjUiI7P99nLr5i3MPwX/) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
• Lalu Copy paste lagi kode di bawah ini di widget HTML
<div id='menusemua'>
<ul id='menueko'> 
<li><a href='http://cktpanellistrik.blogspot.com/2010/04/panel-distribusi-lvmdplvsdp.html'>Panel listrik</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/2010/07/tool-parse-html.html' title='posts rss'>Tools</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/feeds/posts/default' title='comments rss'>Posts RSS</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/feeds/comments/default' title='comments rss'>Comments RSS</a></li>
</ul> 
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='go'/>
</form>
</div>
• Simpan template dan liat hasilnya

Mungkin sampai disini dulu tutorial kali ini.  Kalian ada yang kurang paham bisa tanyakan pada kotak komentar dan kalau ada kekurangan mohon tulis juga saran dan kritiknya di kotak komentar.  Terima kaish telah berkunjung dan tunggu posting-posting lainnya.

Artikel Terkait