Floating Social Bookmark Dengan Efek Easing

Widget kali ini yang saya aku share ke kalian yaitu, widget social bookmark dengan efek Easing ( Jika kita mengarahkan kursor ke salah satu ikon facebook, twitter, dll maka akan muncul efek bergerak ke arah kiri ) so simple dan elegant kan...

Nih contoh gambar widget nya, gimana bagus dan simple kan!

Berikut langkah-langkah pembuatannya :

1. Login ke blogger anda
2. Masuk ke template >>> Edit HTML
3. CTRL+F cari script ]]></b:skin> : Copykan CSS di atas nya

.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/AVvXsEhL4WGLu51WMKkwE4eEZ7_L31wsf23FUN9e5gkuvOl0yPBwOokhsfEwu7_KkAjp-HkbjY9NVXqrBGXapHSXx0kAn_LDOexiBhBQZK1DQZPLbx76hwWJJEsPTHQRKr0q9u4Vtyc8RllRg2Y/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 di Edit HTML letakkan kode berikut di atas </head> 

<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>

5.  Selanjutnya, letakkan kode HTML di bawah ini 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>

6.  Terakhir, Save Templates

Nah itu tadi tutorial membuat floating social bookmark dengan efek easing..

So, selamat mencoba dan semoga bermanfaat.. see you!