Animated Blogger Tab with css3 Transition

Animated tab merupakan sebuah tabs ,menu horizontal yang dapat digunakan untuk mengganti tab menu horizontal default blogger. Disebut sebagai tab animasi karena ketika cursor diarahkan diatas menu maka menu akan bergeser dengan bentu pergeseran dalam durasi tertentu yang diatur dengan css transition. Anda dapat menggunakan tabs ini untuk menggantikan tabs default yang ada di blog anda. Ada beberapa yang harus dilakukan agar tabs bisa bekerja secara sempurna.

Kode CSS

#tabbaru .tabs .widget-content{
    position:relative;
    background:rgba(150,150,150,.5);
    border-radius:0 0 15px 15px;
    height:45px;
    overflow:hidden;
    border:1px solid rgba(120,120,120,.5);
    border-top:9px double #333;
}
#tabbaru .tabs .widget-content:after{
    height:25px;
    content:"";
    width:98%;
    left:1%;
    top:-25px;
    position:absolute;
    box-shadow:5px 10px 20px rgba(0,0,0,0.9);
}
#tabbaru .tabs .widget-content ul{
    list-style:none;
    background:none;
    display:block;
    position:relative;
    padding:0 30px 10px;
    text-align:center;
    margin:0;
}
#tabbaru .tabs .widget-content ul li{
    margin:0 5px 0 0;
    float:left;
}
#tabbaru .tabs .widget-content ul li a{
    background:rgba(0,0,0,.3);
    padding:10px;
    display:block;
    text-decoration:none;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9);
    border-radius: 0 0 10px 10px;
    transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    font-family:Helvetica, Arial;
    font-size:14px;
    text-shadow:1px 1px 1px #000;
    color:#ff0;
    font-weight:normal;
    border:1px solid rgba(255,255,255,.3);
    border-top:none;
}
#tabbaru .tabs .widget-content ul li.selected a{
    background:rgba(0,0,0,.4);
    color:#aaa;
}
#tabbaru .tabs .widget-content ul li a:hover{
    background:rgba(50,50,50,.6);
    color:#0ff;
    padding:17px 10px 8px 10px;
    border-color:#aaa;
    box-shadow:-1px -1px 1px #000, 2px 2px 6px #000;
}

Kode css ini akan berfungsi membangun sebuah tabs blogger dalam bentuk yang baru. Anda bisa menyimpannya di atas kode ]]></b:skin>.

Setelah kode css tersimpan, klik "Expand Template Widget" kemudian cari kode <div class='region-inner tabs

Ganti kode denganh kode berikut:

<div class='region-inner tabs-inner' id='tabbaru'>

Agar bisa terlihat hasilnya maka anda harus segera mengaktifkan fitur Laman/Pages yang terdapat di halaman dasbor. Caranya sbb:

1. Login ke bLogger
2. Dasbor (Dasboard)
3. Laman (Pages)
   
   • Laman Baru/New Pages
     - Blank Page : Membuat posting di halaman statis.
     - Alamat web/web Address : Buat Title dan Alamat web/posting
   • Pilih Tab Atas (Top Tabs)
4. Simpan Setelan (Save Settings).
5. Buka blog dan lihat hasilnya di bawah header blog