New Widget Follow Us Sexy Social Button Keren:ruang kita

New Widget Follow Us Sexy Social Button Keren

Seperti kita ketahui bahwa social media seperti Twitter, Facebook, Pinterest dan lainnya pada umumnya sudah terintegrasi ke Website atau Blog melalui Widget social media .banyak jenis widget social media button yang mempunyai tampilan dan fitur yang berbeda-beda, akan tetapi mempunyai tujuan dan kegunaan yang sama.

Pada posting kali ini, saya akan berbagi Widget social media terbaru, sederhana tapi keren yang di beri nama " Sexy Social Button ".Seperi apa sih, penasaran kan ?
Widget Sexy Social Button memiliki 5 button yaitu Facebook, Twitter, Google+, Pinterest dan RSS Feed.Kelebihannya terletak pada tampilan efek hover yang meluas, mulus dan sexy, Embrassed smile, efek hover dibuat dengan CSS3 transisi, tanpa java script dan murni CSS.
Kelebihan lainnya dari widget ini adalah Fitur CSS sprite yang berguna ketika anda memiliki terlalu banyak gambar, sehingga memperlambat loading.mungkin Anda mengira bahwa Widget ini menggunaka 5 Gambar button, tapi sebenarnya hanya menggunakan 1 gambar yang berisi semua ikon.jadi hanya mengirimkan satu permintaan HTTP bukan 5, tentu loadingnya lebih cepat dibanding 5 permintaan HTTP, masuk akal bukan ?

Screenshoot

DEMO SEXY SOCIAL BUTTON

Jika Anda ingin mencoba Widget ini silahkan Ikuti Tutorialnya berikut ini :

Login Ke dashboard blog Anda
Kemudian Pilih Tata Letak ---- Tambah Gadget ----HTML / Javasript
Masukkan Kode widget Dibawah ini :

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<!--Sexy Social Buttons Widget blogonasis.blogspot.com—>

<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://blogonasis.blogspot.com/2012/12/new-widget-follow-us-sexy-social-button.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>