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.
- 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 ]]>
- Lalu Copy paste lagi kode di bawah ini setelah kode
- Simpan template dan liat hasilnya
#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}
