Membuat Social Widget Dengan Hover Transisi
Berawal dari mencar ilmu menciptakan image dengan css sprite, karenanya jadilah sebuah social widget dengan efek hover transisi dengan memakai image css sprite.
Kegunaan image dengan css sprite yaitu gambar tidak terlalu membebani blog alasannya yaitu hanya butuh satu gambar untuk memunculkan beberapa gambar. Dan ini sangat dianjurkan dalam membangun sebuah web/blog.
Efek hover transisi ini akan terlihat saat 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 isyarat CSS di bawah ini dan paste di atas isyarat ]]></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/AVvXsEjukipRfdmHkdZbqOZgCIRCGbQWBqBuhprxzKV428o0i4BTs2RqU7CQ2Ns0bjjhf9KYoMCXh9BiQBlHUTF5WcOnfp2RyA6TXRctp8eso5LIJFRstcvugG7CF5bKqgPUw7MzihWA5OY04ck/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 isyarat 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.
Demikian sharing cara menciptakan social widget dengan efek hover transisi ini agar sanggup dimengerti dan bermanfaat.
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Social Widget Dengan Hover Transisi"
Posting Komentar