8 Membuat Tab Menu Horizontal Animasi

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Postingan kali ini masih akan mengetengahkan tutorial  modifikasi tab menu pada template blogger. Sebelumnya sudah ada beberapa postingan tutorial cara membuat tab navigator horizontal mulai yang paling sederhana  dan yang dilengkapi dengan 30 macam widget tab menu pilihan sampai drop down dengan css dan drop down dengan JQuery, maka kali ini saya coba mengetengahkan tab menu horizontal dengan animasi. Untuk tab menu animasi juga banyak pilihan, untuk mencoba yang paling sederhana seperti screnshoot dibawah ini, silahkan ikuti tutorial berikut:

Tab Menu navigator Horizontal Animasi

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>:

.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(http://4.bp.blogspot.com/_5yyQgf23Pco/S3HSwpU-xNI/AAAAAAAABdg/Vdkjbv3OG0w/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(http://3.bp.blogspot.com/_5yyQgf23Pco/S3HS0jX5ZkI/AAAAAAAABdo/9PmCN6mZfmw/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 <div id='header-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div class='animatedtabs'>
<ul>
<li><a href='http://www.amatullah83.blogspot.com' title='Home'><span>Home</span></a></li>
<li class='selected'><a href='http://amatullah83.blogspot.com/search/label/Widget' title='Blogger Widgets'><span>Widgets</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Modifikasi%20Tab%20Menu' title='Modifikasi Tab Menu'><span>Modifikasi Tab Menu</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Variasi%20Icons' title='Variasi Icons'><span>Variasi Icons</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Background' title='Background'><span>Background</span></a></li>   
<li><a href='http://amatullah83.blogspot.com/search/label/Blogger%20Templates' title='Free Blogger Templates'><span>Blogger Templates </span></a></li>
</ul>
</div>

4. Simpan template dan lihat hasilnya.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

8 komentar :

  1. Setelah sekian lama, saya mempelajari berbagai tip dari Ukhti (walaupun belum semua saya praktekan), saya jadi tertarik untuk membuat template blogspot sendiri atau setidaknya memodifikasi 80% dari template classic.
    Terima kasih.

    BalasHapus
  2. panjang banget, o ya bikin berat lodingnya ngga mba ana?

    BalasHapus
  3. aku coba dulu,, thanks sis sharenya sukses selalu

    BalasHapus
  4. bisa di coba ne....
    trim's artikelnya...

    BalasHapus
  5. makasih ya...
    sangat membantu,:)

    http://cellularmobile9.blogspot.com
    http://japanchord.blogspot.com

    BalasHapus
  6. kok ga ada tutorial mengedit tab nya sih,saya masih pemula..
    baru 4 hari bikin blog,, tips ini sangat berguna buat saya.. tapi saya bingung untuk merubah isi tab nya..
    mohon bantuanya

    BalasHapus
  7. siiiiip gan nice nieh blog gwe http://www.acereyzal.blogspot.com

    BalasHapus
  8. ass..
    mas mu tanya nieh ..
    klo ngisi beberapa postingan di tab horizontal gmana caranya???
    mhon bantuannya .
    pesankan melalui fb saya ipankbazrek@yahoo.co.id

    mkasih sebelumnya,
    sukses selalu mass

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!