Cara Memasang Widget Akun Media Sosial dengan CSS Sprite

Kali ini saya akan sharing cara memasang widget akun Media Sosial dengan menggunakan gambar CSS Sprites sehingga Fast Loading dan pastinya SEO Friendly. Apa itu CSS Sprite? CSS Sprite adalah minuman bersoda yang segarrrr. Eh bukan! Maksudnya, CSS Sprite itu adalah "Combining multiple images into a single file", alias 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. Katanya dalam bahasa Jawa, "This reduces the number of HTTP requests, speeding up page loading". Artinya 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!

Oke langsung saja ke caranya yaa daripada muter muter malah bingung hehe

1. Masuk dulu ke dashboard blog
2. Kemudian masuk ke menu Template - Edit HTML
3. Copy Pastekan kode alien dibawah ini di atas kode ]]</b:skin> , ingat jangan diketik yaa bisa kesleo nanti jarinya :v
#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/AVvXsEhB8MMGK5uY_Z4WZQre9GgpvkTYEEK1EXOLtagelgZaXlY-J6nLMSDWPhElo6D2qsaPSDUWBephdXex9Nmr7B9ZfO8P-6RI1UsRxXSSbL5m4IXTtbDTt7iEcRLCWViXrqNqxqIpunPRX9tM/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;}


4. Kemudian Save Template
5. Lalu masuk ke menu Layout, klik "Add a Gadget : di sidebar, pilih "HTML/Javasscript"
6. Selanjutnya Copy Paste 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>


7. Ganti ID akun Social Media nya dengan kepunyaan Anda.
8. Selesai deh. Mudah bukan? :)

Sekian dulu yaa, selanjutnya akan ada cara cara yang lain lagi yang keren keren. Semoga bermanfaat. terimakasih sudah berkunjung :)