Blogger Tabs with css3 Animation

Blogger tabs ini memang memanfaatkan css3 animation serta multiple background image untuk mendapatkan efek hover yang terlihat seperti sorotan cahaya. Anda bisa memanfaatkan tab horizontal atau navigasi horizontal ini untuk menggantikan tabs horizontal default blogger. Image yang digunakan sebagai background dapat anda upload diblogger untuk mengganti URL yang telah disertakan di kode css. Pernggantian background dengan milik anda sendiri (hasil upload) semata-mata untuk menjaga berbagai kemungkinan yang tak diharapkan.

Kode css

.tabs .widget ul{
    overflow:visible; 
    }
.tabs2 .widget li{
    padding:0;
    margin:0;
    }
@keyframes tabs_anima{0%{opacity:0.0;}60%{opacity:0.6;}100%{opacity:1.0;}}
@-o-keyframes tabs_anima{0%{opacity:0.0;}60%{opacity:0.6;}100%{opacity:1.0;}}
@-ms-keyframes tabs_anima{0%{opacity:0.0;}60%{opacity:0.6;}100%{opacity:1.0;}}
@-moz-keyframes tabs_anima{0%{opacity:0.0;}60%{opacity:0.6;}100%{opacity:1.0;}}
@-webkit-keyframes tabs_anima{0%{opacity:0.0;}60%{opacity:0.6;}100%{opacity:1.0;}}
.tabs  .widget ul li:hover{
    animation:tabs_anima 0.8s linear;
    -o-animation:tabs_anima 0.8s linear;
    -ms-animation:tabs_anima 0.8s linear;
    -moz-animation:tabs_anima 0.8s linear;
    -webkit-animation:tabs_anima 0.8s linear;
    }
.tabs .widget ul{
/* display:block;  */
    list-style-type:none;
    margin:0;
/* float:left; */
    padding:2px 80px 40px 80px;
    background:red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirAX0A6DGxlLk_ILkZwaeDejqXBryH4UgcKlxuOmzOQ3PeLMbT1LSbCHQIcSn6Lf3O3Whb-JGFEBESIQZmbX1h0TZtg1jOKvBcPJUpkW7kx58fLRi3pXSplOZ-iUD7kTQW5iquXYre9pw/s1600/bg-ul.png) top left repeat;
    }
.tabs .widget ul li{
    float:left;
    padding:0px 10px;
    line-height:240%;
    font-size:14px;
    height:34px;
    background-position:left center, right center;
    background-repeat:no-repeat;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHIj2nFitnvTvdUaVBOF2LJ7VShPSRI3tYxWdrNq_loTjYlaY2nNsDi-f8aQLf420zpJ1pZ6zX1fB4G7SjRWCMCbyEPXmBaiovpOHt1wJYcI8_NBy-rclfPDXdW0QhgsKiyFt8aaetZw/s1600/bg-li-L.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJGi0-XXcKdXxdA_C1irTNZAB5Q8KCxCdYhCwlqTjjAH8LG7tCcEnsR_ub1oDPrjnagQDrSb8B7CmOmWBlb0z6LfzrovAnNT-b454zYDMWjSYDbaLahVPvFi7ZSftwB7domYgp6yuzd-U/s1600/bg-li-R-no-arrow.png);
    }
.tabs .widget ul li a{display: inline-block;
    text-decoration:none;
    font-family:Arial;
    text-shadow:1px 1px 2px #000;
    background:transparent !important;
    text-align:center;
    color:#fff;
    font-weight:normal;
    }
.tabs .widget ul li:hover a,.tabs .widget ul li.selected:hover a{
    color:yellow;
    }
.tabs .widget ul li.selected a{
    color:#888;
    }
.tabs .widget ul li, .tabs .widget ul li a{
    transition:1.2s linear;
    -o-transition:1.2s linear;
    -ms-transition:1.2s linear;
    -moz-transition:1.2s linear;
    -webkit-transition:1.2s linear;
    }
.tabs .widget ul li:hover{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh3LsKYaN0qtm667pRc1GmH6Wu4Wtl7eE7LQ9ka17yl2LaDaDFYczfhXeqIW6NjMddzNsVK2qlOwR-tT3R8dUm2G0DRtlDmaS4kT_7VA75aE3HopPsnLta7Yh-kBsDd5eUq-1sbiZ6rLs/s1600/bg-li-hover-L.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_MClhjI0xR6bhcbP7J9CUGkREmNuof_EoH5N_VbxYgI02rJWdR0_QPZOMhcUp7KEB_Yaj0mheJq3HCXe1CnNnwJuMd2lMvkDIQDgOXduRTjEKMCi3LYZBsBSDbB3Hx890ByQMIY_rw9I/s1600/bg-li-hover-R-no-arrow.png);    
    background-position:left top, right top;background-repeat:no-repeat;
    }
.tabs .widget ul li a{
    border:none;
    }
.tabs-inner .widget ul{
    }

xHTML

<ul>
    <li><a href="http://bestbloggermenus.blogspot.com/" target="_blank">Home</a></li>
    <li><a href="http://gubhugreyot.blogspot.com/" target="_blank">gubhugreyot</a></li>
    <li><a href="http://bestbloggerhack.blogspot.com/" target="_blank">Best Blogger Hacks</a></li>
    <li><a href="http://bestbloggermenus.blogspot.com/p/blogger-menus.html" target="_blank">Blogger Menus</a></li>
</ul>