Cara Pasang Widget Sosial Media CSS Sprite Fast Loading

Baca Juga

BERIKUT ini cara memasang widget akun Media Sosial dengan menggunakan gambar CSS Sprites sehingga Fast Loading dan baik buat SEO blog. Demo atau contohnya ada header kanan blog ini.

CSS Sprite adalah minuman ringan nan segar. Bukan! Maksunya, CSS Sprite itu adalah "combining multiple images into a single file", menyatukan beberapa gambar dalam satu file. Tujuannya agar sang gambar jadi ringan, tidak membebani loading time blog.

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. COPAS 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/AVvXsEiSpAHKQyQDufaIHUpOeljToIwRuTFGpf-wqooayapFJoz_uQ01n1LSzDonq_oYM_8tjtu1cIU594Pq1xysrhy7W_DzvAupWBJ4_1V6dAxuatcMrCGd2pbsK4KrDyqjgRRQayfUYm3C2Wtf/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;}

3. Save Template!

4. Klik "Layput" > klik "Add a Gadget: di sidebar > pilih "HTML/Javasscript"
5. COPAS kode berikut ini di kolom "Content". Judul, cuekin aja, kosongkan!

<!--Social Sprite Html-->
<div id="head-soc">
<ul>
<li id="fb"><a href="http://facebook.com/romelteamedia" target="-blank">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/romeltea" 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/romeltea" target="-blank">YouTube</a></li>
<li id="li"><a href="http://www.linkedin.com/in/romeltea" target="-blank">LinkedIn</a></li>
<li id="sub"><a href="http://instagram.com/romeltea" target="_blank">Instagram</a></li>
<li id="rss"><a href="http://pinterest.com/romeltea" target="-blank">Pinterest</a> </li>
</ul>
</div>

6. Ganti ID akun sosmednya dengan "kepunyaan" Anda.
7. Save!

Kini widget akun media sosial yang ringan, fast loading, dengan CSS Sprite, sudah muncul di blog Anda. (http://klinikblogging.blogspot.com/).*