Menambahkan Clean Tab Bar

Tutorial ini menjelaskan bagaimana menambahkan Tab Bar pada Blogger dengan menggunakan CSS dengan satu background warna untuk setiap tab navigasi. Hasilnya seperti dibawah ini

Tutorial ini menjelaskan bagaimana menambahkan Tab Bar pada Blogger dengan menggunakan CSS dengan satu background warna untuk setiap tab navigasi. Hasilnya seperti dibawah ini

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.