Sekarang giliran bagaimana cara membuat menu Horizontal atau tampilan menu yang berderet ke samping, maksudnya gimana..bingung ya...emang gue juga bingung nih...tapi kita coba dulu yuk...kita liat dulu contohnya gambar dibawah ini...
Caranya:
1. Login ke blogger terus pilih Tata letak --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]>/b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px 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:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px 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:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
3. Kalau sudah selesai maka ke tahap berikutnya kopi kode berikut:
<div id="tabshori">
<ul>
<li><a href="http://blogmu.blogspot.com"><span>Home</span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
<ul>
<li><a href="http://blogmu.blogspot.com"><span>Home</span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
4. Ganti yang berwarna biru dengan alamat blog yang kita tuju, selanjutnya kita simpan scrift diatas sesuai dengan keinginan kita mau nyimpannya dimana. Nah kalo mau disempen seperti contoh diatas maka kita cari kode seperti ini ]]>/b:skin> lalu simpan dibawahnya. selesai deh...jangan lupa simpan template...!!

0 komentar:
Posting Komentar