Animated horizontal tab menu with colorful background

Yang membedakan tab ini dengan tab sebelumnya (Animated Blogger Tabs with css3 transition) adalah pada warna background setiap tab yang berbeda. Perbedaan background tab tidak dilakukan dengan menambahkan sebuah class baru, namun memanfaatkan css selector. Anda dapat melihat kodenya dan melakukan perubahan background pada kode css yang disertakan di bawah (jika menginginkan warna background tabs berbeda!).

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;
}
#GRrainbowtabs .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='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