Pasang Ikon Sosmed Menggunakan Image CSS Sprite

Seperti yang telah diketahui bahwa memasang beberapa ato banyak image menggunakan CSS Sprite diyakini mampu membuat blog menjadi cepet loading-nya. Kok bisa? iyaa karena tidak perlu me-load banyak field, hanya membuka satu file saja yang telah dibagi-bagi ( baca : diatur ) tampilannya. Hmmm hal yang menarik buat dicoba oleh blogger nubie seperti sayah.

Kali ini nyoba pasang ikon - ikon sosial media yang sering kita jumpai nangkring di blog tatkala kita blogwalkin. Berikut langkahnya :

Baca Juga :

Internet Gratis Supercepat, Bisakah??

Benarkah User iPhone Lebih Pintar Daripada User Android??

Tragedi Sebuah Topi, Hati-Hati Gan..

Siapkan image sprite nya, lalu cari ]]</b:skin> , kemudian copy dan pastekan kode berikut tepat diatasnya :

#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}

#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(http://1.bp.blogspot.com/-IWFniHoyd3A/T-YdTpaOuKI/AAAAAAAAG-0/tB_K-9hn02U/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;}

#head-soc li#g a:hover {background-position: 0px -32px;}

#head-soc li#rss a {background-position: -32px 0px;}

#head-soc li#rss a:hover {background-position: -32px -32px;}

#head-soc li#sub a {background-position: -64px 0px;}

#head-soc li#sub a:hover {background-position: -64px -32px;}

#head-soc li#fb a {background-position: -96px 0px;}

#head-soc li#fb a:hover {background-position: -96px -32px;}

#head-soc li#twit a {background-position: -128px 0px;}

#head-soc li#twit a:hover {background-position: -128px -32px;}

#head-soc li#li a {background-position: -160px 0px;}

#head-soc li#li a:hover {background-position: -160px -32px;}

#head-soc li#youtube a {background-position: -192px 0px;}

#head-soc li#youtube a:hover {background-position: -192px -32px;}

Kemudian masuk ke tata letak, tambahkan widget HTML. Lalu copy dan pastekan kode berikut :

<div id="head-soc" style="margin: 0 0 20px -10px">

<ul>

<li id="g"><a href="https://plus.google.com/123456666/posts" target="-blank">Google+</a></li>

<li id="rss"><a href="http://jasadh.blogspot.com/feeds/default/post" target="-blank">RSS Feed</a> </li>

<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=akun" target="_blank">Subscribe</a></li>

<li id="fb"><a href="http://facebook.com/jasadh" target="-blank">Facebook</a></li>

<li id="twit"><a href="http://twitter.com/jasadh" target="-blank">Twitter</a></li>

<li id="li"><a href="http://www.linkedin.com/in/akun" target="-blank">LinkedIn</a></li>

<li id="youtube"><a href="https://www.youtube.com/user/jasadh" target="-blank">YouTube</a></li>

</ul>

</div>