Sunday, August 1, 2010

Membuat Tab Menu Horizontal Animasi

Postingan kali ini masih akan mengetengahkan tutorial  modifikasi tab menu pada template blogger. Untuk tab menu animasi juga banyak pilihan, untuk mencoba yang paling sederhana seperti screnshoot dibawah ini, silahkan ikuti tutorial berikut:



  1. Setelah sig in pada account blogger sobat -> pada dasbor -> Klik Tata Letak -> Edit HTML
2. Tambahkan kode CSS berikut diatas tag  ]]>:
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm5FyjPvNyZ0LtSiy8fn-9TZzjL002Zprnv4jDFXJJDe5nDzvqNE3WVr3wWXi62udG6W7rIeBOpNIm3wutGVgLAnn8WIbpION9Zlghkuhb7vmEEIxqj2vhwwuTqB0xYagpHIUhT3Skn8E/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvY31YihNGmadzLxm4Kj6aiHSV-s2Cji_7Ck261XLYXzgY-PzqA2wLe8Ap7b2nY-Lztxikbfv81jxsyyELdFtRjBBfI_dkjQBEktiKJ5bbFE6EnbQeh1tKZcpaU9qmgCGeRA_9wKzz_BA/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

3. Tambahkan kode HTML berikut diatas atau dibawah
atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

4. Simpan template dan lihat hasilnya. Cukup mudah yaa...





2 comments:

  1. nice info... follow back my link
    http://sigithermawan12.blogspot.com/

    ReplyDelete
  2. thanks mbak atas infonya....ini link ku www.smpn1kenduruantuban.co.cc

    ReplyDelete

Anda punya tanggapan mengenai artikel ini?
Silakan isi komentar untuk berbagi ilmu disini :

Search !!!

-- Silakan Masukan Kata --

Rubah Bahasa

English French German Spain Italian

Dutch Portuguese Japanese Arabic Chinese Simplified

Adsense

Blog Archive

Komentar Terbaru!