Membuat Social Widget Dengan Hover Transisi

Berawal dari berguru membuat image dengan css sprite, balasannya jadilah sebuah social widget dengan efek hover transisi dengan menggunakan image css sprite.

Kegunaan image dengan css sprite yakni gambar tidak terlalu membebani blog alasannya hanya butuh satu gambar untuk memunculkan beberapa gambar. Dan ini sangat dianjurkan dalam membangun sebuah web/blog.

Efek hover transisi ini akan terlihat dikala icon disorot dengan mouse dan icon akan bergulir ke atas digantikan oleh icon lainnya. Nah bagi yang ingin mencoba widget ini di blognya silahkan ikuti langkah-langkahnya di bawah ini.

Langkah pertama:

Silahkan copy arahan CSS di bawah ini dan paste di atas arahan ]]></b:skin>

#widget-social{padding:0;margin:0 auto}
ul.kompisocial{border:0;list-style:none;overflow:hidden;margin:10px}
.kompisocial li{float:right;background:none!important;margin:0 7px;padding:0!important}
.kompisocial li a {display:block;width:32px;height:32px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmmwbXQNOQQH4d_dePeRwQt426PTLf7earNVMCfPjRMTCGgoG82uzyrLB55PyAvhUR79wTvmZsGpSQFRw1YZ-YJ-giCWBivu5_JMFXcjYZQmUrA_oh0if-2q_2qLdQdLK25oWZ3GWmQFE/s1600/social2.png) no-repeat transparent;text-indent:-99999em!important}
.kompisocial li a:hover{padding:0!important}
.kompisocial li.blogicon a{background-position:-210px 0;transition:all 400ms ease-in-out}
.kompisocial li.emailicon a{background-position:-168px 0;transition:all 400ms ease-in-out}
.kompisocial li.rssicon a{background-position:-126px 0;transition:all 400ms ease-in-out}
.kompisocial li.gicon a{background-position:-84px 0;transition:all 400ms ease-in-out}
.kompisocial li.fbicon a{background-position:-42px 0;transition:all 400ms ease-in-out}
.kompisocial li.twicon a{background-position:0 0;transition:all 400ms ease-in-out}
.kompisocial li.blogicon a:hover{background-position:-210px -42px}
.kompisocial li.emailicon a:hover{background-position:-168px -42px}
.kompisocial li.rssicon a:hover{background-position:-126px -42px}
.kompisocial li.gicon a:hover{background-position:-84px -42px}
.kompisocial li.fbicon a:hover{background-position:-42px -42px;}
.kompisocial li.twicon a:hover{background-position:0 -42px}

Langkah kedua:

Silahkan copy arahan HTML (kode pemanggilnya) di bawah ini dan simpan di daerah di mana Anda ingin menampilkan widgetnya. Misalnya di sidebar, silahkan simpan di gadget HTML/Javascript.

<div id='widget-social'>
<ul class='kompisocial'>
<li class='blogicon'>
<a href='http://www.blogger.com/follow-blog.g?blogID=2583045784323695327' target='_blank' title='Follow This Blog'>Follow This Blog</a>
</li><li class='emailicon'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=kompiajaib' target='_blank' title='Subscribe by Email'>Email</a>
</li><li class='rssicon'>
<a href='http://feeds.feedburner.com/KompiAjaib' target='_blank' title='Subscribe by RSS'>RSS</a>
</li><li class='gicon'>
<a href='https://plus.google.com/u/0/117950600521728942551' target='_blank' title='Follow on Google+'>Google Plus</a>
</li><li class='fbicon'>
<a href='http://www.facebook.com/pages/Kompi-Ajaib/395526477133955' target='_blank' title='Like on Facebook'>Facebook</a>
</li><li class='twicon'>
<a href='http://twitter.com/kompiajaib' target='_blank' title='Follow on Twitter'>Twitter</a>
</li>
</ul>
</div>

Kode yang berwarna merah silahkan sesuaikan dengan akun blog Anda.

DEMO

Demikian sharing cara membuat social widget dengan efek hover transisi ini supaya dapat dimengerti dan bermanfaat.