menu horizontal di blog selain memperindah blog kamu, juga untuk mempermudah pengunjung mengakses posting sesuai keinginan mereka. bagi kamu yang pengen memasang menu horizontal, ni ane kasih tutorial singkat dan mudahnya.
- seperti biasa kamu harus sudah login ke blog menu
- pilih template, edit HTML dan centang expand nya
- cari kode " ]]></b:skin> "
- letakkan kode
float:center;
width:100%;
font-size:13px;
border-bottom:0px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:center;
background: url("http://i1076.photobucket.com/albums/w444/semuaadalho/Picture2.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:center;
display:block;
background: url("http://i1076.photobucket.com/albums/w444/semuaadalho/Picture2.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% auto;
}
#tabshori a:hover span {
background-position:100% auto;
}
diatas kode ]]></b:skin> tadi
- save template kamu.
jika kamu ingin mengganti gambar tab, kamu tinggal mengganti background: url("http://superinhost.com/gambar/blackleft.gif") no-repeat left top; url didalam kurung itu aja
langkah selanjutnya yang perlu kamu lakukan adalah
- kembali ke menu tata letak, tambah gadget pilih " HTML/JavaScript "
- di dalam kontent nya diisikan kode dibawah ini
<ul>
<li><a href='http://semua-ada-lho.blogspot.com/'>home</a></li>
<li><a href='http://semua-ada-lho.blogspot.com/search/label/Islami'>Islamic Corner</a></li>
<li><a href='http://semua-ada-lho.blogspot.com/search/label/Pendidikan'>Pendidikan</a></li>
<li><a href='http://semua-ada-lho.blogspot.com/search/label/Kesehatan'>Kesehatan</a></li>
<li><a href='http://semua-ada-lho.blogspot.com/search/label/Anak%20dan%20bayi'>Anak & Bayi</a></li>
</ul>
</div>
- gantikan yang berwarna merah seperti yang kamu mau
- sedangkan yang berwarna pink kamu ganti dengan url kamu
- simpan dan selesai
dibeberapa template mungkin tidak bisa, tenang saja, kamu gantikan
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='semuanya ada disini (Header)' type='Header'>
<b:includable id='title'>
menjadi
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='semuanya ada disini (Header)' type='Header'>
<b:includable id='title'>
semoga berhasil
