Cara Membuat Sosial Media Dengan Style Floating

SosMed Widget

Posted by: Admin On: 03/07/14

Sosial Media Floating - Tombol sosial media yang berada melayang di sisi blog, sosial media yang saya share kali ini dengan efek hover border radius. Jika anda penasaran silahkan memasang widget ini di blog kalian.
Untuk memasang widget sosial media floating ini silakan ikuti langkah-langkah dibawah ini.

• Masuk/login ke Dashboard blogger.com
• Tata Letak
• Tambahkan Gadget
• HTML/Javascript
• Masukan kode dibawah ini

<style type='text/css'>
#widget-social{position:fixed;padding:0;margin:0 auto;left:0px}
ul.tt-social{border:0;list-style:none;overflow:hidden;margin:10px}
.tt-social li{background:none!important;margin-left:4px;padding:0!important}
.tt-social li a {display:block;width:57px;height:57px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtfBf9hy6ysfaPA2vjwpAd5DRXjXwkwp-_KwKuLvacE_crhDVzJefFTD6i3GGLKCnfW3xG75IdnTaEvVlWn0MBWhN9VE1nsEtKLnV70oiIxGmwuOeAQWrabmAKikmv9xWcNkRwo1cV2Slo/s1600/mixicon.png) no-repeat transparent;text-indent:-99999em!important}
.tt-social li a:hover{padding:0!important;border-radius:20px 0 20px 0;}
.tt-social li.rssicon a{background-position:-186px 0;transition:all 400ms ease-in-out}
.tt-social li.gicon a{background-position:-124px 0;transition:all 400ms ease-in-out}
.tt-social li.twicon a{background-position:-62px 0;transition:all 400ms ease-in-out}
.tt-social li.fbicon a{background-position:0 0;transition:all 400ms ease-in-out}
.tt-social li.rssicon a:hover{background-position:-186px -62px}
.tt-social li.gicon a:hover{background-position:-124px -62px}
.tt-social li.twicon a:hover{background-position:-62px -62px;}
.tt-social li.fbicon a:hover{background-position:0 -62px}
</style>
<div id='widget-social'>
<ul class='tt-social'><li class='rssicon'>
<a href='http://feeds.feedburner.com/ID FEEDS' rel="nofollow" target='_blank' title='Subscribe by RSS'>RSS</a></li>
<li class='gicon'><a href='http://plus.google.com/ID GPLUS' rel="nofollow" target='_blank' title='Follow on Google+'>Google Plus</a></li>
<li class='twicon'><a href='http://www.twitter.com/ID TWITTER' rel="nofollow" target='_blank' title='Follow on Twitter'>Twitter</a></li>
<li class='fbicon'><a href='http://www.facebook.com/ID FACEBOOK' rel="nofollow" target='_blank' title='Add on Facebook'>Facebook</a></li></ul></div>

Terakhir SIMPAN.

Ganti tulisan yang saya block dengan warna biru, sesuai dengan ID sosmed anda.

Kurang lebih DEMO Hovernya seperti ini.

• RSS
• Google Plus
• Twitter
• Facebook

Sumber Artikel dan Inspirasi :
www.kompiajaib.com