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 |
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 :
<!--Sexy Social Buttons Widget blogonasis.blogspot.com-->
<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>
- Ganti Kode # dengan Alamat URL Social media Anda
- Atur letak Widget ini sesuai selera Anda.
- Klik Simpan / Save
- Silahkan Lihat hasilnya
Selamat mencoba, semoga bermanfaat bagi Anda.Sampai jumpa di postingan berikutnya yang lebih seru dan terkini.
Regards
