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.
oh iya, mungkin teman teman sekalian bisa melihat demo nya terlebih dahulu nih, silahkan klik DEMO untuk melihat demo dari menu nya.
Nah sudah lihat kan ? tenang saja memang menu ini cukup simple dan mudah untuk kita buat kok..
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 :
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/AVvXsEjILrvS__7OLmbdHTSh5U3aVqmRlMjp1-mZiAO6DIhyKtUPsPQ28ga41km1nyC5Wutkep74rWkkafbEGpBp32YXaemCNNXjZEVYAprPXWZ0OqoTyEcdfKI7PkRv7nB4wnnZyhbjAJ3eLjg/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/AVvXsEhyhS045GvGiMn8YruFgXzIgLruPxI7B5y9afl0YfQCzxY0DQcNq3Bzg6TbIjfyIs49icOpDCt30oA_6VbzVIIQLm7kmY52bpNT5oyzBo0mDYx0lmBEsEs-8NzZWdWd-8AFBzHAWJywNjg/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 ! hehehe... kalau memang tutorial cara membuat menu css di blog anda ikuti dengan teliti dan benar maka pasti hasilnya adalah menu seperti yang ada pada demo yang telah anda lihat tadi.. oke deh.. karena pada tutorial ini memang bisa dibilang terlalu detail dan saya anggap anda sudah paham langkah-langkahnya, maka pada tutorial - tutorial membuat menu css di blog berikutnya akan saya berikan secara singkat dan langsung pada intinya... hehehe..