Blogger Tabs with Bouncing Effect

Bloggertabs dengan efek bounce merupakan pengembangan dari animated tab with css3 transition dan Colorful tabs. Anda bis melihat kedua macam tab tersebut melalui link di bawah ini:

• Animated Blogger Tabs with css3 transition
• Colorful Tabs on Blogger

Bouncing effect dibuatmenggunakan css3 animation sehingga tabs ini bisa dibilang bebas javascript tapi penuh efek dan animasi serta colorfull

Kode CSS

#GRrainbowtabs .tabs .widget-content {
    position:relative;
    background:rgba(150,150,150,.5);
    border-radius:0 0 15px 15px;
    height:50px;
    overflow:hidden;
    border:1px solid rgba(120,120,120,.5);
    border-top:9px double #333;
}

#GRrainbowtabs .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);
}
#GRrainbowtabs .tabs .widget-content ul{
    list-style:none;
    background:none;
    display:block;
    position:relative;
    padding:0 30px 10px;
    text-align:center;
    margin:0;
}
#GRrainbowtabs .tabs .widget-content ul li{
    margin:0 5px 0 0;
    float:left;
}
#GRrainbowtabs .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;
    letter-spacing:-1px;
    text-shadow:1px 1px 1px #000;
    color:#ff0;
    font-weight:normal;
    border:1px solid #eee;
    border-top:none;
}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(1) a{background:#a00;}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(2) a{background:#da0;}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(3) a{background:#aa0;}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(4) a{background:#060;}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(5) a{background:#00a;}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(6) a{background:#2b0062;}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(7) a{background:#682bc2;}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(8) a{background:#9E6215;}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(9) a{background:#1C72E3;}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(10) a{background:#E38D1C;}
#GRrainbowtabs .tabs .widget-content ul li:nth-child(11) a{background:#1D9296;}
#GRrainbowtabs .tabs .widget-content ul li.selected a{
    background:rgba(0,0,0,.4);
    color:#ccc;
}
@keyframes GRtabsanima{
0%{margin-top:5px;background-color:black;}
50%{margin-top:-10px;background-color:white;}
100%{margin-top:0px;background-color:red;}
}
@-o-keyframes GRtabsanima{
0%{margin-top:5px;background-color:black;}
50%{margin-top:-10px;background-color:white;}
100%{margin-top:0px;background-color:red;}
}
@-ms-keyframes GRtabsanima{
0%{margin-top:5px;background-color:black;}
50%{margin-top:-10px;background-color:white;}
100%{margin-top:0px;background-color:red;}
}
@-moz-keyframes GRtabsanima{
0%{margin-top:5px;background-color:black;}
50%{margin-top:-10px;background-color:white;}
100%{margin-top:0px;background-color:red;}
}
@-webkit-keyframes GRtabsanima{
0%{margin-top:5px;background-color:black;}
50%{margin-top:-10px;background-color:white;}
100%{margin-top:0px;background-color:red;}
}
#GRrainbowtabs .tabs .widget-content ul li a:hover{
    animation:GRtabsanima 0.9s ease-in-out;
    -o-animation:GRtabsanima 0.9s ease-in-out;
    -ms-animation:GRtabsanima 0.9s ease-in-out;
    -moz-animation:GRtabsanima 0.9s ease-in-out;
    -webkit-animation:GRtabsanima 0.9s ease-in-out;
    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='GRrainbowtabs'>

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)
   
   • New Pages
     - Blank Page : membuat posting di halaman statis.
     - Alamat web/web Address : Isi title dan URL
   • Pilih Tab Atas (Top Tabs)
4. Simpan Setelan (Save Settings).
5. Buka blog dan lihat hasilnya di bawah header blog