Cara Pasang Widget Sosial Media Css Sprite Fast Loading

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

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

Kita dapat manfaatkan kebaikan situs CSS Sprite Generator untuk melakukannya. Kata beliau nih, This reduces the number of HTTP requests, speeding up page loading.

CSS Fanta dan Coca Cola itu, eh... CSS Sprite itu mengurangi jumlah seruan HTTP sehingga mempercepat tampilan halaman.

Widget Sosial Media biasanya memakai banyak gambar, meski kecil. Makin banyak akun media umum 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 instruksi berikut ini di atas instruksi ]]</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/AVvXsEgJjOT5UaaZFfMmo-5t0ECzWLisvxMl8_HSMvQ_wxXuT2M_F_ZQeJuzaFVVIp4P0ZfxFTevPeDQuEXoUIuaZ6BVOCx0Mr1u2_9VSvpNkpPcBLxwpOJVGTvtRoMUKMWJo9URZKeYSDz4_wVW/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 instruksi 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 umum yang ringan, fast loading, dengan CSS Sprite, sudah muncul di blog Anda. (http://klinikblogging.blogspot.com/).*

Tweet