What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's look like this:
To
create it is not as simple as it's look, it's complicated. You have to
design button, you have to create CSS and HTML code. Now I will show you
how to create "Horizontal tabs menu" in blogger.
Sorry saya berbahasa Inggris, maklum pernah kursus di EL MATRA, hehe:
ok langsung saja tips nya :
1. Log in di Blogger
2.Klik pada menu template dan Edit HTML
3.cari kode ]]></b:skin> , gunakan Ctrl+F agar lebih cepat mencari kode
4Copy kode dibawah ini dan Paste di atas kode ]]></b:skin>
/*credits : http://trick-blog.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /*Under Line, you can change or delete it */
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /* Menu position*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://blogoholic.info/files/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://blogoholic.info/files/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E; /*Text menu color*/
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
5. hapus tulisan yang warna merah dan ganti dengan URL Blog yang ingin di pasang
menu dropdown
6 ganti tulisan biru tebal dengan menu yang ingin di pasang
7.setelah itu pergi si menu tata letak/widget setelah itu klik add gadget atau tambah gadget
dan pilih HTML/java script , jika sudah copy script dibawah ini :
<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://trick-blog.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http:/trick-blog.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
8. ganti tulisan yang warna merah dengan URL/alamat Blog kamu,dan tulisan yang warnah biru tebal ganti dengan daftar menu Blog/website kamu.
HAVE FUN,,,,
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment