Kita bisa manfaatkan kebaikan situs CSS Sprite Generator untuk melakukannya. Kata dia nih, This reduces the number of HTTP requests, speeding up page loading.
CSS Fanta dan Coca Cola itu, eh... CSS Sprite itu mengurangi jumlah permintaan HTTP sehingga mempercepat tampilan halaman.
Widget Sosial Media biasanya menggunakan banyak gambar, meski kecil. Makin banyak akun media sosial yang ditampilkan, kian banyak pula gambarnya. Maka, CSS Sprite is the best way to reduce beban loading blog!
Cara Pasang Widget Media Sosial dengan CSS Sprite (Fast Loading!)
1. Klik "Template" > "Edit HTML"2. Copy & Paste kode berikut ini di atas kode ]]</b:skin>
#head-soc ul li{list-style:none;padding:0 0 10px 10px;float:left}#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 30px ;border:1px solid #fafafc; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHuOoZ-PHajQjPSRrtbCjyz9-DCSSTeNIqtwvsKoWDB4_YtUIWiN1W2aYKuJTxvqjJHhGxF3SS49mZu22n4aL7Tn80CV5JiJcLBwUQLpFsH-OOAFYASVQ-6eu6koqIKSEoOvgO1OdIHKF/w222-h64-no/spice-up-blog-sprites.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;}
#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;}
3. Save Template!
4. Klik "Layput" > klik "Add a Gadget: di sidebar > pilih "HTML/Javasscript"
5. Copy & Paste kode berikut ini di kolom "Content", kosongkan!
<!--Social Sprite Html-->
<div id="head-soc">
<ul>
<li id="fb"><a href="http://facebook.com/blogosmile" target="-blank">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/blogosmile" target="-blank">Twitter</a></li>
<li id="g"><a href="http://plus.google.com/103329103950948291283/" target="-blank">Google+</a></li>
<li id="youtube"><a href="https://www.youtube.com/user/blogosmile" target="-blank">YouTube</a></li>
<li id="li"><a href="http://www.linkedin.com/in/blogosmile" target="-blank">LinkedIn</a></li>
<li id="sub"><a href="http://instagram.com/blogosmile" target="_blank">Instagram</a></li>
<li id="rss"><a href="http://pinterest.com/blogosmile" target="-blank">Pinterest</a> </li>
</ul>
</div>
<div id="head-soc">
<ul>
<li id="fb"><a href="http://facebook.com/blogosmile" target="-blank">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/blogosmile" target="-blank">Twitter</a></li>
<li id="g"><a href="http://plus.google.com/103329103950948291283/" target="-blank">Google+</a></li>
<li id="youtube"><a href="https://www.youtube.com/user/blogosmile" target="-blank">YouTube</a></li>
<li id="li"><a href="http://www.linkedin.com/in/blogosmile" target="-blank">LinkedIn</a></li>
<li id="sub"><a href="http://instagram.com/blogosmile" target="_blank">Instagram</a></li>
<li id="rss"><a href="http://pinterest.com/blogosmile" target="-blank">Pinterest</a> </li>
</ul>
</div>
6. Ganti ID akun sosmednya dengan "akun sobat BS".
7. Simpan / Save!
Kini widget akun media sosial yang ringan, fast loading, dengan CSS Sprite, sudah muncul di blog Anda.
good luck & happy blogging:)