Tabs Menu Horizontal Blogger dengan Animasi css3 transition

CSS3 transition memungkinkan dibuatnya berbagai animasi tanpa perlu menggunakan javascript ataupun bantuan gambar animasi berekstensi gif. Dengan kode css yang disertakan di bawah, sebuah tabs menu horizontal blogger beranimasi dapat dibuat untuk menggantikan blogger tabs/navigasi menu horizontal default blogger.
Ada beberapa kode baru (tag, id dan kode css) yang perlu ditambahkan agar tabs baru berfungsi secara optimal. Penambahan dilakukan di antara tag pembuka dan penutup head (di atas kode ]]></b:skin>) serta di antara tag pembuka dan penutup body melalui "Expand Template Widget".

Kode css Animated Blogger Tabs-3

#GRtabanima3 .tabs .widget-content ul, 
#GRtabanima3 .tabs .widget-content li,
#GRtabanima3 .tabs .widget-content li span, 
#GRtabanima3 .tabs .widget-content li a{
      list-style:none;
      margin:0;
      padding:0;
}
#GRtabanima3 .tabs .widget-content ul{
      padding:4px 8px;
      height:38px;
      background:#333;
}
#GRtabanima3 .tabs .widget-content ul li{
      float:left;
      position:relative;
      overflow:hidden;
      text-align:center;
      margin-right:1px;
}
#GRtabanima3 .tabs .widget-content ul li span{
      display:inline-block;
      box-shadow:0px 0px 4px #000;
      font-size:16px;
      letter-spacing:-1px;
      font-family:arial;
      padding:6px 10px;
      color:#fff;
      text-shadow:1px 1px 1px #000;
      background:#999;      
      border:1px solid #aaa;
      position:relative;
}
#GRtabanima3 .tabs .widget-content ul li span a{
      position:absolute;
      left:-1px;
      color:transparent; 
      top:50%;
      padding:0;
      font-size:0;
      text-shadow:0 0 0 transparent;      
      cursor:wait;
      display:inline-block;

}
#GRtabanima3 .tabs .widget-content ul li.selected span{
      color:#ccc;
      background:rgba(255,0,0,.2);
}
#GRtabanima3 .tabs .widget-content ul li span{
      transition:0.8s ease-in 0.4s;
      -o-transition:0.8s ease-in 0.4s;
      -ms-transition:0.8s ease-in 0.4s;
      -moz-transition:0.8s ease-in 0.4s;
      -webkit-transition:0.8s ease-in 0.4s;
}
#GRtabanima3 .tabs .widget-content ul li:hover span{
      color:transparent;
      text-shadow:none;
}
#GRtabanima3 .tabs .widget-content ul li:hover span,#GRtabanima3 .tabs .widget-content ul li span a{
      transition:0.6s ease-in 0.2s; 
      -o-transition:0.6s ease-in 0.2s; 
      -ms-transition:0.5s ease-in 0.1s; 
      -moz-transition:0.6s ease-in 0.2s; 
      -webkit-transition:0.6s ease-in 0.2s; 
}
#GRtabanima3 .tabs .widget-content ul li:hover span a{
      font-size:16px;
      letter-spacing:-1px;
      text-shadow:1px 1px 1px #000;
      width:100%; 
      opacity:1.0;
      color:blue;
      top:-1px;
      padding:6px 0;
      color:#0ff;
      cursor:pointer;
      background:none;
      border:1px solid #333;
} 

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='GRtabanima3'>
   • 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