Mini Social Icon Dengan CSS Sprite

Baru blogwalking ke blog-blog lain. Kali ini yang saya kunjungi adalah blog Spiceupyourblog. Tahu kan blog spiceupyourblog? Pasti kalau anda penggemar Google dan suka googling, sengaja tidak sengaja pasti anda menemukan spiceupyourblog dalam list google search. Nah, lagi kunjungan tidak sengaja menemukan widget mini social icon ini. Mini social icon ini menggunakan teknik CSS Sprite.

Apa sih CSS Sprite? Jadi CSS Sprite itu adalah suatu teknik dalam dunia CSS yang menggunakan satu gambar saja untuk menciptakan efek hover. Menggunakan teknik ini, membuat loading blog anda lebih cepat dan efeknya lebih smooth. Teknik ini memainkan atribut background-position pada pseudo class :hover. Tetapi bukan berarti hanya background-position saja yang anda tulis. Anda juga dapat menambahkan kode CSS lainnya, namun dasarnya hanya menggunakan background-position saja.

Live Demo

Menambahkan Widget 

1. Login ke akun Blogger anda.

2. Masuk ke Dasbor > Tata Letak > Add Gadget (anda dapat meletakkan pada sidebar, footer, dll.)

3. Pilih HTML/Javascript.

4. Isi dengan kode dibawah ini : 

<ul class="social-sprite">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>
<li class="dribbble">
<a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.social-sprite{float:right}ul.social-sprite li{float:left;list-style:none outside none;border:0}ul.social-sprite li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8VljJ3vseY3PKTFVhhxW7OFxnPumiGSgSnwHfyw-Akl_NYjLca1ztDYH8b0qr_Fz0BfqFedzspoLdsVysfPuDAiliR7IRE_R2VC0N4d1l7PDqIffHsiLDHQJWEFjnDxTjKfaIKkNIr0rZ/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:#fff;direction:ltr;display:block;height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all .2s ease 0s;width:32px}.ie7 ul.social-sprite li a,.ie8 ul.social-sprite li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8VljJ3vseY3PKTFVhhxW7OFxnPumiGSgSnwHfyw-Akl_NYjLca1ztDYH8b0qr_Fz0BfqFedzspoLdsVysfPuDAiliR7IRE_R2VC0N4d1l7PDqIffHsiLDHQJWEFjnDxTjKfaIKkNIr0rZ/s1600/spice-social-gadget-sprite.png' )}ul.social-sprite li.facebook a{background-position:0 0}ul.social-sprite li.flickr a{background-position:-32px 0}ul.social-sprite li.dribbble a{background-position:-64px 0}ul.social-sprite li.googleplus a{background-position:-96px 0}ul.social-sprite li.linkedin a{background-position:-128px 0}ul.social-sprite li.pinterest a{background-position:-160px 0}ul.social-sprite li.rss a{background-position:-192px 0}ul.social-sprite li.skype a{background-position:-224px 0}ul.social-sprite li.twitter a{background-position:-256px 0}ul.social-sprite li.vimeo a{background-position:-288px 0}ul.social-sprite li.youtube a{background-position:-320px 0}ul.social-sprite li.facebook a:hover,#sidebar ul.social-sprite li.facebook a:hover{background-position:0 -32px}ul.social-sprite li.flickr a:hover,#sidebar ul.social-sprite li.flickr a:hover{background-position:-32px -32px}ul.social-sprite li.dribbble a:hover,#sidebar ul.social-sprite li.dribbble a:hover{background-position:-64px -32px}ul.social-sprite li.googleplus a:hover,#sidebar ul.social-sprite li.googleplus a:hover{background-position:-96px -32px}ul.social-sprite li.linkedin a:hover,#sidebar ul.social-sprite li.linkedin a:hover{background-position:-128px -32px}ul.social-sprite li.pinterest a:hover,#sidebar ul.social-sprite li.pinterest a:hover{background-position:-160px -32px}ul.social-sprite li.rss a:hover,#sidebar ul.social-sprite li.rss a:hover{background-position:-192px -32px}ul.social-sprite li.skype a:hover,#sidebar ul.social-sprite li.skype a:hover{background-position:-224px -32px}ul.social-sprite li.twitter a:hover,#sidebar ul.social-sprite li.twitter a:hover{background-position:-256px -32px}ul.social-sprite li.vimeo a:hover,#sidebar ul.social-sprite li.vimeo a:hover{background-position:-288px -32px}ul.social-sprite li.youtube a:hover,#sidebar ul.social-sprite li.youtube a:hover{background-position:-320px -32px}
 </style>

5. Klik Simpan dan lihat hasilnya!

Catatan : 

• Setiap icon ada alamatnya misalnya http://twitter.com/ . Nah, anda ganti link tersebut sesuai dengan alamat twitter anda. Begitupun juga dengan Vimeo, Youtube, Facebook, dll.
• Jika anda tidak ingin menampilkan salahsatu icon social media, anda hanya menghapusnya mulai dari <li class="....."> sampai </li>. Misalnya anda tidak ingin menampilkan Vimeo. Maka yang anda hapus adalah <li class="vimeo"><a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo"></a></li>.