Blog Equator : Tutorial Blog

Anatomi Tab Bar

Kita lihat gambar diatas terdiri dari 3 elemen :

• Aktif elemen ( Home )
• Standar Tab ( Comunity, Blog,Contact )
• On Mouse Over ( Blog )

Setiap elemen memiliki rounded-corners dan text-width nya sesuai dengan width tab.
Ok. Langsung saja, buka edit template blogger dan kopikan CSS code nya.CSS code :

ul, li{border:0; margin:0; padding:0; list-style:none;}<br />ul{<br />border-bottom:solid 1px #DEDEDE;<br />height:29px;<br />padding-left:20px;<br />}<br />li{float:left; margin-right:2px;}<br /><br />.tab a:link, .tab a:visited{<br />background:url(img/tab-round.png) right 60px;<br />color:#666666;<br />display:block;<br />font-weight:bold;<br />height:30px;<br />line-height:30px;<br />text-decoration:none;<br />}<br />.tab a span{<br />background:url(img/tab-round.png) left 60px;<br />display:block;<br />height:30px;<br />margin-right:14px;<br />padding-left:14px;<br />}<br />.tab a:hover{<br />background:url(img/tab-round.png) right 30px;<br />display:block;<br />}<br />.tab a:hover span{<br />background:url(img/tab-round.png) left 30px;<br />display:block;<br />}<br /><br />/* -------------------------------- */<br />/* ACTIVE ELEMENTS */<br />.active a:link, .active a:visited, .active a:visited, .active a:hover{<br />background:url(img/tab-round.png) right 0 no-repeat;<br />}<br />.active a span, .active a:hover span{<br />background:url(img/tab-round.png) left 0 no-repeat;<br />}

Jangan Lupa Expand widget Template harus di checklist dulu, kemudian kopikan HTML code nya sperti dibawah ini :

HTML Code :


<br /><ul class="tab"><br /><li class="active"><a href="home.html"><span>Home </span></a></li><br /><li><a href="community.html"><span>Community </span></a></li><br /><li><a href="blog.html"><span>Blog </span></a></li><br /><li><a href="messages.html"><span>Messages </span></a></li><br /><li><a href="contact.html"><span>Contact </span></a></li><br /></ul><br />
Lihat tampilan blog anda. Untuk link page sesuaikan dengan kebutuhan blog.

Selamat mencoba

author: Antonnio Lupeti