Membuat Floating Social Bookmark pada Blogger

Heyo What's Up!!! Guys....

Begitu banyak cara untuk mempercantik sebuah blog, dan di kesempatan ini PeiterLuck akan memberikan tutorial bagaimana caranya membuat sebuah floating social bookmark. Untuk tutorialnya, ikuti panduan di bawah ini. 

1. Login ke Blogger anda
2. Masuk ke Template >> Edit HTML
3. Tekan cntrol+F, lalu cari ]]></b:skin> 
4. Letakkan kode CSS ini di bawah kode di atas ( ]]></b:skin> )   :

Code CSS

.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(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/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;

}

5. Berikutnya penambahan jquery dan javascript, masih di 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 warna biru di atas, jika pada template anda sudah terpasang, ditinggalkan saja.

5. Selanjutnya untuk memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </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>

Ganti tulisan warna biru di atas, dengan ID Anda,  jangan sampai keliru dengan ID orang lain ya.... 

6. Terakhir, Save Templates

Done, Itulah cara membuat floating social bookmark dengan efek easing.

Mudah bukan?

Sekian info mengenai "cara membuat floating social bookmark dengan efek easing" 

Jika ada yang kurang di mengerti, anda dapat berkomentar atau pun anda dapat menghubungi admin PeiterLuck melalui sosial media seperti Facebook, Twitter, dan Instagram.

Anda dapat merequis tentang apa pun yang menyangkut sebuah pembelajaran kepada admin PeiterLuck.

Untuk menjadi orang yang pertama dalam update PeiterLuck, silahkan subscribe melalui email anda di kolom subscribe.

Salam PeiterLuck. 

Terima Kasih ^_^