Cara Membuat Menu Blogger

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:20px;margin-top:12px;float:left;float:left;width:920px;} #menueko{height:14px;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;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 input.s{height:20px;margin:0;border:1px solid #fff;padding:0;color:#ccc;height:20px;overflow:hidden;} .cari input.s{background:#fff;float:right; margin:0;border:1px solid #333;padding:3px 7px;color:#000;width:200px;height:20px;font:10px Arial,Helvetica,sans-serif;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
• Lalu Copy paste lagi kode di bawah ini setelah kode <div id='wrapper'> 
<div id="menusemua"> <ul id="menueko"> <li class="current_page_item"><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li> <li class="current_page_item"><a href='' title='Daftar Isi'>Daftar Isi</a></li> <li><a href="data:blog.homepageUrl/feeds/posts/default" title="Posts RSS">Posts RSS</a></li> <li><a href="data:blog.homepageUrl/feeds/comments/default" title="Comments RSS">Comments RSS</a></li> </ul> <form action='/search' class='cari' method='get'> <input class='s' maxlength='50' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search: type and hit enter...&quot;;}' onfocus='if (this.value == &quot;Search: type and hit enter...&quot;) {this.value = &quot;&quot;;}' size='18' type='text' value='Search: type and hit enter...'/> </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.