store science
Selasa, 14 Februari 2012
Membuat Menu horisontal
Apa itu tab menu horisontal? horisontal tab menu adalah bla .. bla .. bla ... . Saya tidak bisa menjelaskan lagi, he .. he, itu terlihat seperti ini:
Untuk membuat menu. Anda harus merancang tombol, Anda harus membuat kode CSS dan HTML. Sekarang saya akan menunjukkan cara untuk membuat "menu horizontal tab" di blogger.
Ok, mari kita mulai :
1. Login ke Blogger, memilih "Lay out -> Template -> Edit HTML"
2. Jangan lupa untuk membackup template anda terlebih dahulu.
3. Periksa "Expand Template Widget" centang.
4. Coba cari kode ini ]]> </ b: skin>, jika Anda menemukan itu kemudian meletakkan kode di bawah ini di atasnya :
/*credits : http://silvaallakadarnya9.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;
}
Anda dapat mengubah teks tebal dengan gambar lainnya, misalnya, jika Anda ingin memilih gambar menu merah saya kode akan menjadi seperti ini:
background:url("http://blogoholic.info/files/menu/redleft.gif") no-repeat left top;background:url("http://blogoholic.info/files/menu/redright.gif") no-repeat right top;
Untuk membuat menu. Anda harus merancang tombol, Anda harus membuat kode CSS dan HTML. Sekarang saya akan menunjukkan cara untuk membuat "menu horizontal tab" di blogger.
Ok, mari kita mulai :
1. Login ke Blogger, memilih "Lay out -> Template -> Edit HTML"
2. Jangan lupa untuk membackup template anda terlebih dahulu.
3. Periksa "Expand Template Widget" centang.
4. Coba cari kode ini ]]> </ b: skin>, jika Anda menemukan itu kemudian meletakkan kode di bawah ini di atasnya :
/*credits : http://silvaallakadarnya9.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;
}
Anda dapat mengubah teks tebal dengan gambar lainnya, misalnya, jika Anda ingin memilih gambar menu merah saya kode akan menjadi seperti ini:
background:url("http://blogoholic.info/files/menu/redleft.gif") no-repeat left top;background:url("http://blogoholic.info/files/menu/redright.gif") no-repeat right top;
5. Kemudian salin kode di bawah :
<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://silvaallakadarnya9.blogspot.com"><span>Home</span></a></li>
<li><a href="http://silvaallakadarnya9.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://silvaallakadarnya9.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://silvaallakadarnya9.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http://silvaallakadarnya9.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
<ul>
<!-- Change the links with your own links -->
<li><a href="http://silvaallakadarnya9.blogspot.com"><span>Home</span></a></li>
<li><a href="http://silvaallakadarnya9.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://silvaallakadarnya9.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://silvaallakadarnya9.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http://silvaallakadarnya9.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
6. Dan ubahlah http://silvaallakadarnya9.blogspot.com dengan link Anda sendiri, dan mengubah teks tebal dengan teks Anda sendiri.
Label:
Blogger
:.
