Friday, June 29, 2012

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:

27 comments:

  1. Tampak lebih cantik ya ? hasilnya seperti dipojok atas blog agan itu ya ?

    ReplyDelete
  2. wah ane coba tp blum bisa nich,,,
    mngkn ane ada yg slah ya,,
    coba lg ah,,

    ReplyDelete
    Replies
    1. iyah sob, mungkin ada kode yang terlewatkan

      Delete
  3. Trimakasih sobat atas share tips media socialnya

    ReplyDelete
    Replies
    1. sip gan sama2 makasih juga sudah datan ke blog ane :)

      Delete
  4. gk ada demox ya sob...?, thx for share ya... *smile

    happy blogging...

    ReplyDelete
    Replies
    1. ada sob, tuh demo tutorialnya malahan hehehe

      Delete
  5. postingan yang bermanfaat bagi saya yang masih belajar blogger...
    terima kasihh tips sobat.

    ReplyDelete
  6. wehhh sepertinya keren juga nih sobat :))
    bisa di coba nih di blog saya yang satunya :))

    ReplyDelete
    Replies
    1. sangaaaat keren ini sobat, wajib di pakai di blog ente :D

      Delete
  7. ini cara buat sosial bokmare ya sob

    ReplyDelete
  8. manteb tutorialnya sobat..boleh dicoba nich :)

    ReplyDelete
  9. . . bagus juga nich. tapi blog aq udah ada. he..86x . .

    ReplyDelete
    Replies
    1. ah kirain blom ada, kalau blom ada kan tutor pnya ane bisa dipasang hehehe

      Delete
  10. Berkunjung nih bang,mantef tuh bang tutornya pokoknya sippp..hahhahyy

    ReplyDelete
  11. Izin untuk menyimak gan..

    ReplyDelete
  12. Nice Tips tips seperti ini yang dibutuhkan untuk perkembangan blog dan media sosial di Indonesia.

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More