Tutorial: membuat widget media sosial di blog dengan efek easing

Media sosial memang menjadi salah satu utama da tidak dapat dipisahkan dari yang namanya blog. Karena lewat media sosial ini blog kita bisa dikenal da mempunyai penggemar tersendiri bagi penikmatnya. Oleh karena itu banyak para blogger yang menampilkan sotus jejaring media sosial diblognya mulai dari Facebook, Twitter dan sebagainya.

Nah penempatan itu ada yang diletakan di sidebar, di kolom posting dan ada juga yang ditempatkan terpisah dengan tampilan blog. Penempatan tersebut memiliki tujuan masing-masing sesuai dengan keinginan yang punya blog.

Nah untuk membuatnya diperlukan bebeapa cara dengan menempatkan kode CSS, javascript dan HTML. Hal ini dimaksudkan untuk memunculkan widget media sosial yang kita inginkan. Nah beikut ini cara menempatkan dan membuat widget media sosial di blog dengan efek easing dibagian terluar blog sebelah kanan yang mana akan ikut sesuai scroll yang dimainkan.

Caranya adalah sebagai berikut:
1. Letakan JAVASCRIPT ini diatas kode </head> di Blog kamu!

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

2. Setelah itu letakan pula kode CSS dibawah ini dibagian atas  ]]></b:skin> :

//membuat widget media sosial di blog dengan efek easing.........................................................//.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/AVvXsEht3GJKatlP_aNlm7HAxiLQLMN4QhMzLlyiZcLNjNf3QFv1ZJ9CnzLwDy8KPzR_Kjs8UO-lj1YyViHpN2LFXWTinPvF9PpBFKoP1BLSB6otaUmM96hoBWFQh8MZ450rcX_OmS57Gl4TvU8/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;}//END efek easing.........................................................//

3. Nah hal yang terakhir adalah letakan kode HTML berikut diatas kode </HEAD>.

//efek easing.........................................................// 

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/ID 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/TWITTER KAMU' 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/GOOGLE PLUS KAMU' 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 PINTERAS KAMU' 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 YOUTUBE KAMU' 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/FEED KAMU' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
//END efek easing.........................................................// 

catatan: sebelum disave rubah dulu menggunakan ID kamu yang berwarna merah

4. Lalu save dan lihat hasilnya!!

Nah itu cara untuk membuat widget media sosial berada di luar tampilan blog kita sebelah kanan.