Cara Pasang Widget Akun Media Sosial dengan CSS Sprite

Baca Juga

Cara Menampilkan, Membuat, atau Memasang Widget Akun Media Sosial di Sidebar Blog dengan Gambar CSS Sprite agar Fast Loading.

WIDGET akun media sosial di sidebar blog berupa ikon (icon) logo seperti Facebook, Twitter, Google Plus, dll. bisa memperlambat loading blog, jika image-nya besar, tidak menggunakan dimensi ukuran, juga bisa mengurangi skor SEO jika gambarnya tanpa deskripsi (alt tag).

Contohnya, blog CB ini sebelumnya menggunakan sidebar ikon akun media sosial berupa gambar biasa. Meskipun skor seo tetap 100%, namun saat dicek di GT Metrix kecepatan loading berkurang cukup besar alias mengurangi loads time.

Hasilnya cek: 88% (B) dan 75% (C). Ada banyak catatan, salah satunya: The following images served from blogspot.com should be combined into as few images as possible using CSS sprites.

Kata GT Metrix, gambar-gambar ikon sosmed itu sebaiknya digabungkan menggunakan CSS Sprites. CB menggantinya dengan tips Pasang Widget Akun Media Sosial dengan CSS Sprite dari Spiceup Yourblog. Hasilnya sebagai berikut:

Hasilnya menjadi 91% (A) dan 80% (B) dengan Page load time: 3.90s alias di bawah 4 detik saja. Mantap 'kan? Mau juga?

CSS Sprite sendiri artinya koleksi beberapa gambar yang disatukan dalam satu gambar (collection of images put into a single image). Bagus banget untuk mempercepat loading blog. (CSS Images Sprites).

Cara Pasang Widget Media Sosial di Blog dengan Image 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/AVvXsEjT8hAscwePfu81sEeFn-s1eCXs2A_Fx9N-c4DZVtnaJTOAQ0MdF6x6erM3MH4LZGCrhL45gPn8UXPZaN1Z66qsGfflLtaGK4tXz24yUFeDwxIix0-dFyh8ehC1l24DOi1yjvDD4WaRpEPx/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/).*