Animated Horizontal Navigation Bar (Blogger Tabs)-2

Tab yang terlihat di atas adalah sebuah tab blogger beranimasi (animated blogger tabs) yang dibuat dengan menggunakan kode css3 transition. Animasi tercipta melalui permainan pada padding, opacity, top position dan background. Background image sama sekali tidak dipergunakan, karena untuk memperoleh efek gradasi warna kita hanya menggunakan css background gradient.
Blogger Tabs atau Blogger Horizontal navigation bar yang seperti terlihat di atas harus dibuat dengan menambahkan kode css baru dan sedikit merubah xhtml default blogger karena menggunakan tag baru sebagai tambahan agar tercipta efek animasi yang diinginkan. Anda harus menyelipkan tag span diantara tag pembuka li (<li>) dan tag pembuka "a" (<a href="...">).

Kode CSS

#GRtabanima .tabs .widget-content ul, 
#GRtabanima .tabs .widget-content li, 
#GRtabanima .tabs .widget-content li span, 
#GRtabanima .tabs .widget-content li a{
      list-style:none;
      margin:0;padding:0;
}
#GRtabanima .tabs .widget-content ul{
      background:rgba(0,0,0,.4);
      border-bottom:3px double #888;
      padding:4px 0 3px 8px;
      height:32px;
}
#GRtabanima .tabs .widget-content ul li{
      float:left;
      position:relative;
      overflow:hidden;
      text-align:center;
      margin-right:1px;
}
#GRtabanima .tabs .widget-content ul li span{
      display:inline-block;
      font-size:16px;
      letter-spacing:-1px;
      font-family:arial;
      padding:6px 10px;
      color:#fff;
      text-shadow:1px 1px 1px #000;
      background:#f3e2c7;
      background:linear-gradient(135deg, #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
      background:-o-linear-gradient(-45deg, #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
      background:-ms-linear-gradient(-45deg, #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
      background:-moz-linear-gradient(-45deg, #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);
      background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#f3e2c7), color-stop(50%,#c19e67), color-stop(51%,#b68d4c), color-stop(100%,#e9d4b3));
      background:-webkit-linear-gradient(-45deg, #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1);
      border:1px solid #ddd;
      position:relative;
      border-radius:5px;
}
#GRtabanima .tabs .widget-content ul li span a{
      font-weight:normal; 
      position:absolute;
      left:-1px;
      top:50%;
      padding:0;
      display:inline-block;
      font-size:0;
      width:100%;   
      color:blue;
      opacity:0;
      filter:alpha(opacity=0);   
      background:#f3c5bd;
      background:linear-gradient(135deg, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); 
      background:-o-linear-gradient(-45deg, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); 
      background:-ms-linear-gradient(-45deg, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);  
      background:-moz-linear-gradient(-45deg, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%);
      background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200));
      background:-webkit-linear-gradient(-45deg, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=1);
      cursor:wait;
      border:1px solid #333;
      transition:0.6s ease-in 0.6s; 
      -o-transition:0.6s ease-in 0.6s; 
      -ms-transition:0.6s ease-in 0.6s; 
      -moz-transition:0.6s ease-in 0.6s; 
      -webkit-transition:0.6s ease-in 0.6s;  
}
#GRtabanima .tabs .widget-content ul li.selected span{
      color:#ccc;
      background:#707375;
      background:linear-gradient(135deg, #707375 0%,#8c8f91 50%,#6c6e70 50%,#b2b8ba 100%);
      background:-o-linear-gradient(-45deg, #707375 0%,#8c8f91 50%,#6c6e70 50%,#b2b8ba 100%); 
      background:-ms-linear-gradient(-45deg, #707375 0%,#8c8f91 50%,#6c6e70 50%,#b2b8ba 100%);
      background:-moz-linear-gradient(-45deg, #707375 0%, #8c8f91 50%, #6c6e70 50%, #b2b8ba 100%);
      background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#707375), color-stop(50%,#8c8f91), color-stop(50%,#6c6e70), color-stop(100%,#b2b8ba));
      background:-webkit-linear-gradient(-45deg, #707375 0%,#8c8f91 50%,#6c6e70 50%,#b2b8ba 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#707375', endColorstr='#b2b8ba',GradientType=1 );
}
#GRtabanima .tabs .widget-content ul li:hover span a{ 
      font-size:16px;
      text-decoration:underline;
      letter-spacing:-1px;
      width:100%; 
      opacity:1.0;
      filter:alpha(opacity=100);
      top:-1px;
      padding:6px 0;
      color:#0ff;
      cursor:pointer;
      border-radius:5px;
      transition:0.3s ease-in 0.1s;
      -o-transition:0.3s ease-in 0.1s;
      -ms-transition:0.3s ease-in 0.1s;
      -moz-transition:0.3s ease-in 0.1s;
      -webkit-transition:0.3s ease-in 0.1s;
} 

Cara membuat

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Cadangkan/Pulihkan (Backup/Restore)
5. Edit HTML
6. Template › Edit HTML
   • Lanjutkan/Proceed
   • Cari kode ]]></b:skin>
   • Copy dan pastekan kode css di atas kode ]]></b:skin>
   • Simpan Template (Save Template)
   • Klik "Expand Template Widget"
   • Cari kode <div class='region-inner tabs-inner'>
   • Ganti dengan kode di bawah ini:
     <div class='region-inner tabs-inner' id='GRtabanima'>
   • Lanjutkan cari kode :
     <li class='selected'><a expr:href='data:link.href'><data:link.title/></a>
     
     Posisi kode di atas tak jauh (sedikit di bawah) kode <div class='region-inner tabs-inner'>)
   • Dibawah kode tersebut ada beberapa kode lain seperti terlihat di bawah ini:
     

     <li class='selected'><a expr:href='data:link.href'><data:link.title/>>/a</li>
               <b:else/>
                 <li><a expr:href='data:link.href'><data:link.title/></a></li>
     

     Ganti kode tersebut dengan xHTML Baru yang terletak di box bawah.
   • Simpan Template/Save Template
7. Selesai dan jika anda sebelumnya sudah menggunakan tabs blogger maka tab animasi baru anda bisa langsung terlihat.
8. Bagi anda yang sebelumnya belum menggunakan tab blogger, silahkan ikuti langkah di bawah.

xHTML Baru - Animated Blogger Tabs-2

<li class='selected'><span><data:link.title/><a expr:href='data:link.href'><data:link.title/></a></span></li>
          <b:else/>
            <li><span><data:link.title/><a expr:href='data:link.href'><data:link.title/></a></span></li>

Cara mengaktifkan tabs blogger

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