Cara Membuat Menu Css Di Blog

Pada kesempatan pertama kali ini nih ya.. Ane akan membahas tentang bagaimana cara membuat menu css di blog. mungkin saja bagi para blogger yang sudah dewa atau sudah cukup lama malang melintang di dunia per blogger-an sudah cukup mengerti dengan cara membuat menu css di blog. maka dari itu ane sengaja membuat tutorial ini untuk para newbie dan para blogger yang mungkin sedang membutuhkan menu css di blog untuk memperindah tampilan blog mereka.

sedikit bocoran saja ya, karena memang tutorial ini untuk blogger pemula, maka dari itu akan saya berikan cara yang gampang bahkan mudah juga untuk dipahami dan akan saya bahas secara detail.

Lanjutt...
sebelum memulai ke tutorial silahkan terlebih dahulu login ke account blogger anda. kemudian, klik menu template yang ada di sebelah kiri ( lihat gambar dibawah ) :

catatan penting : sebelum merubah kode html nya mungkin ada baiknya silahkan anda backup terlebih dahulu template anda, untuk menghindari hal hal yang tidak kita inginkan, misal terjadi kesalahan pada pengeditan, maka kita tinggal upload kembali template sebelumnya yang telah kita backup tadi.

untuk membackup template anda, klik tombol cadangkan/pulihkan yang ada di sebelah kanan atas :

setelah itu klik unduh template lengkap :

Oke teman teman proses pengamanan terhadap template kita sudah selesai... kalau begitu mari langsung saja kita mulai tutorial cara membuat menu css di blog.

langkah yang pertama, kembali ke menu template, kemudian klik " edit HTML " :

maka selanjutnya akan muncul pilihan seperti pada gambar dibawah ini, klik saja " lanjutkan " :

Langkah yang pertama silahkan centang Expand Template Widget di sebelah kiri atas pada kotak edit HTML :

Langkah kedua, cari kode ]]></b:skin> gunakan CTRL + F untuk mempermudah pencarian kode tersebut, jika sudah ketemu silahkan letakan kode css dibawah ini diatas kode ]]></b:skin> lalu klik simpan template

/*-start indoblogger css menu-*/
.menuindooblogger1{
width: auto;height:33px;
}
.menuindooblogger1 ul{
width:auto;height:33px;float:left;list-style:none;padding:0px 20px 0 20px;margin:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6IId1EpvHJclZv-xMmh9ThWjlseoqbp-wUsWd6s-kYUWONfruwznYmJuHn0ZMCzSskY2Gf4b8VFYSTOn3oSt43z91VAD0PHK56MfzPh2vNh9aSrT_ERaMhD9PmvdyTxHjcJTu2nPL1A/s1600/backgroundmenu.png) repeat-x center;
 border-radius: 5px 5px 5px 5px;
}
.menuindooblogger1 ul li{
padding:0px;margin:0px 0 2px 0;display:inline;line-height:33px;
}
.menuindooblogger1 ul li a{text-decoration:none;padding:0 9px 0 9px;margin:0 10px 0 10px;color:#fff; float:left;}
.menuindooblogger1 ul li a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcHCXOdfD4EWQUfk8fa2tQT3bhfuIGQ8M4KUEcjMAPrRT6heevdIZJNgL2MCtls2H13X8OYj-N0jFQpTKdEZ1U7a0b33FB-LuzMDNe6iBCpNH719_M0n0bt_YUzv2wD3pZvXd2mAdW7Mg/s1600/select.png) no-repeat center bottom;}

Langkah ketiga, masuk pada menu tata letak, kemudian pilih tambah gadget lalu pilih HTML/Javascript :

Kemudian letakan kode dibawah ini pada kotak HTML/Javascript :

<div class="menuindooblogger1">
            <ul>      
            <li class="selected"><a href="#">Home</a></li>
             <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Sitemap</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Indooblogger</a></li>
            </ul>
    </div>

kemudian klik simpan dan lihat apa yang terjadi pada blog anda !Terima kasih semoga bermanfaat bagi anda...