CARA PASANG WIDGET AKUN MEDIA SOSIAL DENGAN CSS SPRITE

1. Klik "Template" > "Customize"
2. Klik "Advanced" > "Add CSS"
3. Copy & Paste kode berikut ini di kolom yang tersedia:

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyJPnm069aDf99KhGzvJginT9f0ZMfti4hMbxF45ulbgrbA4O32RN-bZzZ1RU3zsEKm801XRIs6Bo0mqXdJ-niHQ_pOxKjHSeGqpjJ8q0KoDRav4IwecThdW-on2HUXnD2c_s0UUpPR_n/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;}

4. Klik "Apply to Blog"

Catatan:
- Kode CSS di atas terpasang di atas kode ]]</b:skin>
- Anda juga bisa memasangnya dengan cara Template > Edit HTML dan Copas kode tersebut di atas kode ]]</b:skin>

5. Klik "Back to Blogger Dashboard"
6. Klik "Layout" > Add a Gadget > pilih "HTML/Javascript"
7. COPAS kode berikut ini di kolom "Content". Judul gadget kosongkan.

<!--Social Sprite Html-->
<div id="head-soc" style="margin: 0 0 20px -10px">
<ul>
<li id="g"><a href="https://plus.google.com/106869251529186655236/posts" target="-blank">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/contohblognih" target="-blank">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=contohblognih" target="_blank">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/cbblogger" target="-blank">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/contohblog" target="-blank">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/in/cbblogger" target="-blank">LinkedIn</a></li>
<li id="youtube"><a href="https://www.youtube.com/user/CBBloggerz" target="-blank">YouTube</a></li>
</ul>
</div>

8. Jangan lupa, ganti tulisan berwarna merah dengan ID akun medsos Anda. Jika belum punya, minjem dong, eh... ya bikin dulu lah...! Banyak akun medsos Bagus lho buat SEO blog!

9. Save!

Kini Widget Akun Media Sosial dengan image CSS Sprite yang Fast Loading sudah terpasang dan mestinnya sudah muncul di sidebar blog Anda. Good Luck! (http://contohblognih.blogspot.com/).*

sumber : http://contohblognih.blogspot.com/2015/02/widget-akun-media-sosial-gambar-css-sprite.html