[Tutor]Membuat Social Icon di Pinggir Halaman Blog dengan Efek Easing

Jadi bagi anda yang tertarik memasangnya silahkan ikuti langka-langka berikut ini.

1. Login ke Blogger anda terlebih dahulu
2. Masuk ke Template > Edit HTML dan cari kode ]]></b:skin>
3. Jangan lupa beri centang pada "Expand widget templates"
4. Kemudian Letakkan CSS berikut ini tepat diatas kode ]]></b:skin>

HTML CODE                                                                                                                             </>
.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  {background-color: #62BDB2;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2nT7E9NZ2xiKEXoNW1wJX3OiDvqIa7wWyP0YqKr-jJ9jeydtrCLNeQPuWJiFgmvq_BZZXFcZS37TGq59pW9rnudNJN-DOPsGbx5X2385-TqxgS4gEayL_nw2ioZ7bYXUWbwR3ky4eq0c/s1600/mas-icons.png);}
.social-buttons #facebook-btn .social-icon {background-color: #3B5998;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2nT7E9NZ2xiKEXoNW1wJX3OiDvqIa7wWyP0YqKr-jJ9jeydtrCLNeQPuWJiFgmvq_BZZXFcZS37TGq59pW9rnudNJN-DOPsGbx5X2385-TqxgS4gEayL_nw2ioZ7bYXUWbwR3ky4eq0c/s1600/mas-icons.png);}
.social-buttons #google-btn .social-icon {background-color: #DB4A39;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2nT7E9NZ2xiKEXoNW1wJX3OiDvqIa7wWyP0YqKr-jJ9jeydtrCLNeQPuWJiFgmvq_BZZXFcZS37TGq59pW9rnudNJN-DOPsGbx5X2385-TqxgS4gEayL_nw2ioZ7bYXUWbwR3ky4eq0c/s1600/mas-icons.png);}
.social-buttons #rss-btn .social-icon {background-color: #FF8B0F;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2nT7E9NZ2xiKEXoNW1wJX3OiDvqIa7wWyP0YqKr-jJ9jeydtrCLNeQPuWJiFgmvq_BZZXFcZS37TGq59pW9rnudNJN-DOPsGbx5X2385-TqxgS4gEayL_nw2ioZ7bYXUWbwR3ky4eq0c/s1600/mas-icons.png);}
.social-buttons #pinterest-btn .social-icon {background-color: #D43638;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2nT7E9NZ2xiKEXoNW1wJX3OiDvqIa7wWyP0YqKr-jJ9jeydtrCLNeQPuWJiFgmvq_BZZXFcZS37TGq59pW9rnudNJN-DOPsGbx5X2385-TqxgS4gEayL_nw2ioZ7bYXUWbwR3ky4eq0c/s1600/mas-icons.png);}
.social-buttons #youtube-btn .social-icon {background-color: #C4302B;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2nT7E9NZ2xiKEXoNW1wJX3OiDvqIa7wWyP0YqKr-jJ9jeydtrCLNeQPuWJiFgmvq_BZZXFcZS37TGq59pW9rnudNJN-DOPsGbx5X2385-TqxgS4gEayL_nw2ioZ7bYXUWbwR3ky4eq0c/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. Selanjutnya masih di Edit HTML cari kode </head>
6. Kemudian letakkan kode berikut ini di atas kode </head>

HTML CODE                                                                                                                             </>
<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>

7. Selanjunya letakkan CSS berikut tepat di atas kode </body>

HTML CODE                                                                                                                             </>
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/ ID anda' 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 anda' 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/ ID anda' 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 anda' 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/ ID anda' 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 anda' d='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

8. Pada tulisan yang ID anda, Ganti dengan ID Anda masing-masing.
9. Save Template anda

Sekian tutorial Cara Membuat Social Icon di Pinggir Halaman Blog dengan Efek Easing