Cara Memasang Widget Social Media Super Ringan di Sidebar Blog dengan Kode CSS Sprite

Apa Itu CSS Sprite???

CSS Sprite adalah cara menggabungkan beberapa image menjadi satu, agar mempermudah dalam pemanggilan image tersebut.
Kenapa saya sebut "Super Ringan" ?  Karena logikanya kayak gini deh, ibaratkan image itu adalah orang, ketika kita akan menyuruh orang maka kita akan melakukan panggilan. Jika kita melakukan satu panggilan untuk satu orang, kalau ada sepuluh orang maka kita akan melakukan sepuluh kali panggilan.
Nah.... dengan teknik CSS Sprite kita hanya akan melakukan satu kali panggilan untuk sepuluh orang tersebut, dengan cara menggabungkan sepuluh orang tadi menjadi satu kelompok atau satu komunitas. Jadi ga perlu repot-repot harus manggil satu persatu, cukup satu kali panggilan atau perintah maka semuanya langsung bekerja mengikuti perintah kita.

Gimana udah ngerti belum???

Nah sekarang saya akan berbagi bagaimana "Cara Memasang Widget Social Media Super Ringan di Sidebar Blog dengan Kode CSS Sprite".

• Pertama-tama kamu masuk dulu ke blogger.com
• Lalu pilih Tema 

• Kemudian pilih Edit HTML

• Masukan Kode CSS Sprite berikut ini diatas kode ]]></b:Skin>

#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/AVvXsEhXuphevRFPIPnM5Kfft_wXKn54kcjmrivwSgmiQCqRzo1xZNYk7PHnOVnRS9SqOc7wPh38sU3puMR_f_X_p8XTGPn9zdSnDj-ql70uWZuqYv81xR3j7wDra01uoVDmWSENbnSXpi0vBmM2/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;} #head-soc li#g a {background-position: 0px -32px;} #head-soc li#g a:hover {background-position: 0px 0px;} #head-soc li#rss a {background-position: -32px -32px;} #head-soc li#rss a:hover {background-position: -32px 0px;} #head-soc li#sub a {background-position: -64px -32px;} #head-soc li#sub a:hover {background-position: -64px 0px;} #head-soc li#fb a {background-position: -96px -32px;} #head-soc li#fb a:hover {background-position: -96px 0px;} #head-soc li#twit a {background-position: -128px -32px;} #head-soc li#twit a:hover {background-position: -128px 0px;} #head-soc li#li a {background-position: -160px -32px;} #head-soc li#li a:hover {background-position: -160px 0px;} #head-soc li#youtube a {background-position: -192px -32px;} #head-soc li#youtube a:hover {background-position: -192px 0px;}

• Kemudian Simpan, lalu pilih Tata Letak

• Pilih tambahkan Gadget

• Lalu Pilih HTML/Javascript

• Lalu Pastekan kode berikut ini

<!--Social Sprite Html--> <div id="head-soc" style="margin: 0 0 20px -10px"> <ul> <li id="g"><a href="Masukan Google Plus Anda Disini" target="-blank">Google+</a></li> <li id="rss"><a href="Masukan Profil Feed Burner Anda Disini" target="-blank">RSS Feed</a> </li> <li id="sub"><a href="Masukan EMail Subscribe Anda Disini" target="_blank">Subscribe</a></li> <li id="fb"><a href="Masukan Profil Facebook Anda Disini" target="-blank">Facebook</a></li> <li id="twit"><a href="Masukan Twitter Anda Disini" target="-blank">Twitter</a></li> <li id="li"><a href="Masukan Linkedin Anda Disini" target="-blank">LinkedIn</a></li> <li id="youtube"><a href="Masukan Profil Youtube Anda Disini" target="-blank">YouTube</a></li> </ul> </div>

• Terakhir tinggal Simpan.
• Jika pemasangannya berhasil, maka tampilannya akan seperti ini :

Oke sekian dulu dari saya, lebih kurangnya mohon dimaafkan.

Jangan lupa cek widget-widget lainnya, siapa tahu ada widget lain yang bisa menambah cantik blog anda.

"Salam Satu Widget"