Membuat Floating Social Bookmark Keren Pakai Efek Easing

Floating Social Bookmark keren dengan memakai efek easing patut dicoba, karena dengan penambahan Jquery, jika kalian mengarahkan cursor pada salah satu icon social bookmark, maka akan keluar secara perlahan icon social yang tersorot cursor mouse tersebut, itu karena efek easing yang ada pada jquery-ui.min. Berikut ini merupakan Cara Membuat Floating Social Bookmark Efek Easing tersebut:

1. Login ke dalam Blogger kalian

2. Masuk ke Template, Lalu Edit HTML

3. Letakkan kode CSS dibawah 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: #d19fe8;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-wtjXMjICdiWXyYDWYP_O3tNxdqFvxmRdZtL-233abpkbBwAxaCxE22VIhQzz5zcbnANdBoi632S_uJpibBPOkiJ904nlQ2Iyb5iUYTfedwBjiYDUxBDsHRQSVK6wg4mbcGBhKChApkk/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: #318ce7;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #08e8de;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #c32148;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #195905;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #5218fa;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #800020;
}
.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;
}

4. Untuk penambahan jquery dan javascript, Letakkan kode berikut ini 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 warna hijau diatas, jika pada template yang kalian gunakan sudah terpasang, harap ditinggalkan saja atau jangan ikut di masukkan.


5. Untuk memanggil widget tersebut, taruh kode HTML dibawah ini sebelum </body> :

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/Almeera-Titania-760638460707919' 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' 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/102289673422471971530' 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/' 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/deemustusher' 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' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

   Ganti tulisan ungu diatas, dengan ID milik kalian sendiri.

6. Simpan Template dan lihat hasilnya. Selamat Mencoba..