Floating Media Social Efek Easing Untuk Blog

Minggu, 18 Agustus 2013

Floating Media Social Efek Easing Untuk Blog - Masih pagi yang cukup cerah ini walaupun mata masih ngantuk kita harus tetap semangat. Postingan saya yang satu ini membahas tentang media sosial, apa sih media sosial itu? media sosial merupakan tempat perkumpulan untuk berbagi informasi dan membuat talisilahturahmi yang baik kepada sesama manusia. Apa macam-macam media sosial itu? macam-maca media sosial sangat banyak seperti facebook, twitter, ask fm, plus google, dan masih banyak lagi serta tidak bisa disampaikan satu per satu, saya yakin pasti anda sudah mempunyai akun facebook serta akun twitter. Kemudian apa kegunaan sosial media itu? seperti yang saya sudah sebutkan tadi yaitu untuk berbagi informasi, membuat talisilahturahmi yang baik dan berbagi cerita kepada orang lain. Mempersingkat waktu saja, widget ini tidak terlalu berat untuk blogger anda tetapi cara pemasangan widget ini sedikit rumit bagi anda yang penasaran untuk segera memasang widget ini, mari ikuti langkah-langkah dibawah ini.

1. Masuk ke blogger.
2. Dari dashboard, anda bisa pilih template.
3. Pilih edit html.
4. Cari kode ]]></b:skin>
5. Salin kode dibawah ini dan taruh kodenya tepat diatas kode tadi.

.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;}

6. Sesudah mempastekan kode tadi, kemudian anda bisa cari lagi kode </head>
7. Salin kode dibawah ini dan pastekan kode yang sudah anda copy tadi diatas kode tadi.

<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(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>

8. Cari kembali kode </body>
9. Salin kode dibawah ini dan taruh tepat diatas kode tadi.

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/usernamefacebookanda' 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/usernametwitteranda' 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/idgoogle+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-pinterest-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-youtube-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-feedburner-anda' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

10. Yang terakhir simpan.

Catatan:
Kode yang berwarna hijau anda bisa mengganti dengan username atau id social media milik anda.
sumber: lostsector.blogspot.com