Anda di sini : / / / Membuat Social Icon di Pinggir Halaman Blog dengan Efek Easing

Membuat Social Icon di Pinggir Halaman Blog dengan Efek Easing

Seperti pada postingan saya sebelumnya yaitu Membuat widget social share melayang di sidebar blog, kali ini saya akan berbagi cara Membuat social icon melayang di sidebar blog tapi dengan efek Easing pada bagian kiri laman blog anda, fungsi dari share bottom ini sama dengan Artikel yang saya posting sebelumnya yaitu untuk berbagi artikel ke berbagai social media, pastinya sudah tidak asing lagi dan sudah menjadi rahasia umum bahwa tombol share di blog bisa meningkatkan jumlah visitor blog anda jika pembaca membagikan artikel anda di sosial media. di samping efek easing yang saya tambahkan pada widget ini saya juga menambahkan beberapa jenis social media, berbeda dengan Postingan sebelumnya yang hanya saya pasangi 4 buah widget social media.

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/AVvXsEiUp3QcAwivp4kZBcKSsmHcYxy1T-z59SWd7mNE4Fjz5slrTur5zgDYeOPAB2YiyVQRz2EYi2wTenvABDIy5yaubh4qJdPI33sWJadnANK5vi0vkiGMIWtcKCT6l4xZeJ7AAXkppAtaGmM/s1600/mas-icons.png);}
.social-buttons #facebook-btn .social-icon {background-color: #3B5998;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUp3QcAwivp4kZBcKSsmHcYxy1T-z59SWd7mNE4Fjz5slrTur5zgDYeOPAB2YiyVQRz2EYi2wTenvABDIy5yaubh4qJdPI33sWJadnANK5vi0vkiGMIWtcKCT6l4xZeJ7AAXkppAtaGmM/s1600/mas-icons.png);}
.social-buttons #google-btn .social-icon {background-color: #DB4A39;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUp3QcAwivp4kZBcKSsmHcYxy1T-z59SWd7mNE4Fjz5slrTur5zgDYeOPAB2YiyVQRz2EYi2wTenvABDIy5yaubh4qJdPI33sWJadnANK5vi0vkiGMIWtcKCT6l4xZeJ7AAXkppAtaGmM/s1600/mas-icons.png);}
.social-buttons #rss-btn .social-icon {background-color: #FF8B0F;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUp3QcAwivp4kZBcKSsmHcYxy1T-z59SWd7mNE4Fjz5slrTur5zgDYeOPAB2YiyVQRz2EYi2wTenvABDIy5yaubh4qJdPI33sWJadnANK5vi0vkiGMIWtcKCT6l4xZeJ7AAXkppAtaGmM/s1600/mas-icons.png);}
.social-buttons #pinterest-btn .social-icon {background-color: #D43638;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUp3QcAwivp4kZBcKSsmHcYxy1T-z59SWd7mNE4Fjz5slrTur5zgDYeOPAB2YiyVQRz2EYi2wTenvABDIy5yaubh4qJdPI33sWJadnANK5vi0vkiGMIWtcKCT6l4xZeJ7AAXkppAtaGmM/s1600/mas-icons.png);}
.social-buttons #youtube-btn .social-icon {background-color: #C4302B;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUp3QcAwivp4kZBcKSsmHcYxy1T-z59SWd7mNE4Fjz5slrTur5zgDYeOPAB2YiyVQRz2EYi2wTenvABDIy5yaubh4qJdPI33sWJadnANK5vi0vkiGMIWtcKCT6l4xZeJ7AAXkppAtaGmM/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 berwarna kuning, Ganti dengan ID Anda masing-masing.
9. Save Template anda

 Sekian tutorial Cara Membuat Social Icon di Pinggir Halaman Blog dengan Efek Easing
Baca juga Cara -  Membuat Widget Social Share Melayang Di Sidebar Blog
   ,