Menambahkan Widget Icon Sprite Media Sosial di Blog

Di postingan sebelumnya saya membagikan bagaimana caranya menampilkan dan menyembunyikan komentar di blog. Sekarang saya akan memberikan tutorial tentang menambahkan icon sosial media berbentuk sprite untuk blog kamu. Yang mana bisa mempercantik blog kamu dan mempopulerkannya, karena dilengkapi akses langsung ke facebook, twitter, google+ dan lainnya hanya dengan sekali klik. Langsung saja kamu lihat caranya di bawah ini :

1. Masuk ke Blogger.com

2. Klik Template --> Ubahsesuaikan --> Tingkat Lanjut --> Tambah CSS. Lalu kamu masukkan kode CSS di bawah ini kedalam kotak CSS tersebut.

/*Social Sprite Css*/
#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/AVvXsEgeCQnHcLXvZvQPpxC_BfXpCNloy7I1CpvhbEZ8Oucw9juaSLCgAQYsw55Q2lAsTftNiGmdmQdcKxjlZb8ES7WoLjXBvZntiOuHXNZazJo9Dh9i0luPQjQDC0TrPVTeT-cMloyNUTpT9u11/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;}
/*Social Sprite Csshttp://www.hzndi.blogspot.com */
/*Social Sprite Css http://www.spiceupyourblog.com */

3. Klik Terapkan ke Blog, setelah itu kamu klik bagian Tata Letak.

4. Di bagian Tata Letak, kamu klik Tambah Gadget --> HTML/Javascript --> Dan kamu masukkan kode Javascript di bawah ini.

<!--Social Sprite Html-->
<div id="head-soc">
<ul>
<li id="g"><a href="https://plus.google.com/b/108200902911276741668/108200902911276741668/posts">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/hzndi">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=hzndi&loc=en_US">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/hzndi">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/hzndi">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/profile/view?id=62595960">LinkedIn</a></li>
<li id="youtube"><a href="http://www.youtube.com/user/hzndi">YouTube</a></li>
</ul>
</div>
<!--Share by http://www.hzndi.blogspot.com-->
<!--Social Sprite Html http://www.spiceupyourblog.com-->

NOTE :

 - Ganti kode yang berwarna biru dengan alamat URL google+, Feedburner, Facebook, Twitter, Linkedln, Maupun akun youtube kamu.

-Jika kamu ingin mengahapus salah satu kode tersebut, cukup di hapus dari bagian <li id=... hingga </li>. Contohnya saya ingin menghapus linkedln, maka saya akan menghapus kode ini saja.

<li id="li"><a href="http://www.linkedin.com/profile/view?id=62595960">LinkedIn</a></li>

5. Simpan Template dan kamu lihat hasilnya.

Sumber kode : spiceupyourblog.com

Postingan Terkait:

Posted in: Blogger,Social Bookmarking,Social Sharing,Widget