Widget Floating Sosial Media dengan Efek Easing

Floating Sosial Media

Apa itu Widget Floating Sosial Media? Widget Floating Sosial Media adalah Tombol Follow via Facebook, Twitter, Google+, P, YouTube, Langganan. Widget ini tidak asing lagi bagi para blogger yang biasannya otak atik blog yang mereka punya, Widget ini akan mengikuti gerak naik turun cursor. Nah, kali ini saya akan berikan tutorial Cara Membuat Widget Floating Sosial Media dengan tambahan efek Easing.

• Login ke Blogger
• Masuk ke Template >> Edit HTML (centang expand widget templates)
• Letakkan kode CSS di bawah ini diatas ]]></b:skin> :

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNpIYjyKePp1hvkIXv1C4qDStodF2esqRro4rgqdF7e9ZV-sF0gEgSr6r279SpZ9hI2EOTDgAZTIS6kxHy_Mg9Rltlo_2u22QEXe-LB2AhrOxmvt1eogqJuLGcdx6UCs2z2XW_pSJ-P1M/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

Berikutnya penambahan jquery dan javascript, masih berada didalam Edit HTML letakkan kode berikut sebelum </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});  
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>

Untuk jquery library script atas sendiri, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja. Selanjutnya memanggil widget tersebut, dengan cara meletakkan kode HTML di bawah ini tepat diatas </body> :

<div class='social-buttons button-right hidden-phone hidden-tablet'>

<a class='itemsocial' href='https://www.facebook.com/your FB'
 id='facebook-btn' target='_blank'><span 
class='social-icon'><span class='social-text'>Follow via 
Facebook</span></span></a>

<a class='itemsocial' href='https://twitter.com/your twitter'
 id='twitter-btn' target='_blank'><span 
class='social-icon'><span class='social-text'>Follow via 
Twitter</span></span></a>

<a class='itemsocial' href='https://plus.google.com/your G+'
 id='google-btn' target='_blank'><span 
class='social-icon'><span class='social-text'>Follow via 
Google</span></span></a>

<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>

<span class='social-text'>Follow via Pinterest</span></span></a>

<a class='itemsocial' href='https://www.youtube.com/user/your ID'
 id='youtube-btn' target='_blank'><span 
class='social-icon'><span class='social-text'>Follow via 
Youtube</span></span></a>

<a class='itemsocial' href='http://feeds.feedburner.com/your feed'
 id='rss-btn' target='_blank'><span 
class='social-icon'><span class='social-text'>Follow via 
RSS</span></span></a>

</div>

Keterangan : Ganti tulisan warna biru diatas, dengan ID yang anda miliki, Lalu Save Templates dan lihat hasilnya.

sumber code : http://www.maskolis.com/2013/03/floating-social-bookmark-dengan-efek.html