Langkah-langkah Buat Menu bar Keren Di Blogspot

Langkah-langkah Buat Menu bar Keren Di Blogspot :

Setelah anda log in maka anda akan di bawa ke dasboard blog, nah di dasboard blog inilah anda harus klik tanda segitiga kebalik (opsi pilihan) lalu pilih TEMPLATE. Untuk lebih detail nya lihat gambar di bawah ini :

Gambar tampilan dasboard blogger

Jika anda sudah mengklik template anda maka anda akan di bawa ke halaman HTML dan pilih EDIT HTML Untuk lebih detail nya lihat gambar di bawah ini :

Gambar tampilan edit html blogger

Jika anda sudah masuk di dalam kolom halaman html blog lalu cari kode ]]></b:skin> untuk mempercepat pencarian klik 1x di dalam kotak HTML lalu anda tekan CTRL + F Nanti akan ada kolom kecil di di pojok kanan atas lalu masukan kode ]]></b:skin> di kolom tersebut dan tekanENTER pasti langsung dapat kode tersebut. Lalu Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :

MASUKAN KODE DI BAWAH INI TEPAT DI ATAS KODE : ]]></b:skin>

/* Menu Horisontal
---------------------------------------------*/
.menupic{width:100%;margin:0 auto;padding:0 auto;}
.menuhorisontal{background:#e9e9e9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwEJsCvrFeq6tHl__nkmrD04QgZ51Z-AiwwcQ5_0l7NZY81n7CuQQEwRNHd2ZaofsVYOFpzIeCuBmx52LLGEyoDIFubZdSwuyT6BQ-7i7CqY_UcfOL75jlvIczXONRcw-UEI32stP5czg/s1600/bg_menu.gif) repeat-x bottom left;width:980px;height:30px;margin:0 auto; padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;border-top:solid 1px $bordercolor;}
.menuhorisontal ul{margin: 0; padding-left: 0px;color:#357798;text-transform: capitalize;list-style-type: none;font:bold 12px Arial, Helvetica,Arial,Verdana,sans-serif;}
.menuhorisontal li{display: inline; margin: 0;}
.menuhorisontal li a{float: left;display: block;text-decoration:none;
padding:7px 7px 7px 7px;border-right:1px solid #dadcde;border-bottom:solid 1px #d2d4d6;color:#357798;}
.menuhorisontal li a:visited{color:#357798;}
.menuhorisontal li a:hover {background:#fff;color:#333;text-decoration:none;border-bottom:solid 1px #fff; /*Background Setelah Pointer Diarahkan */}
.menuhorisontal li.selected a {background:#fff;color:#333;border-bottom:solid 1px #fff;padding:7px 10px 7px 10px;}

Sekarang Cari Kode  Cara nya sama untuk mencari nya CONTROL + F lalu letakan kode di bawah tepat di bawahnya :

<div class='menupic'>
<div class='menuhorisontal'>
<ul>
<li><a href='http://www.berbagi-ilmu-terlengkap.blogspot.com/'>HOME</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
</div>

CATATAN PENTING ...!!!

A. Ubah Tulisan yang bewarna kuning dengan alamat blog anda.
B. Ubah tulisan yang orange dengan menu blog anda.
C. Ubah tanda # dengan alamat tujuan dari judul menubar anda.

Jika Kode  tidak ketemu carilah kode yang mirip atau memiliki kesamaan,  biasanya terletak di bawah tag <body> Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas.

Jika anda masih ada yang blum mengerti bertanya saja, Dengan cara koment di bawah ini entah dari facebook ataupun dari kkomentar blog terimakasih.