Friday, June 29, 2012

Menambahkan Widget Icon Sprite Media Sosial di Blog

11:51 PM Hzndi 26 comments


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:

Blogger
Social Sharing
Social Bookmarking

Posted in: ,,,

26 comments:

  1. Djangkaru BumiJune 30, 2012 at 4:56 AM

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

    ReplyDelete
  2. arraJune 30, 2012 at 5:58 AM

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

    ReplyDelete
    Replies
    1. HzndiJune 30, 2012 at 10:18 PM

      iyah sob, mungkin ada kode yang terlewatkan

      Delete
  3. vlog media newsJune 30, 2012 at 6:12 AM

    Trimakasih sobat atas share tips media socialnya

    ReplyDelete
    Replies
    1. HzndiJune 30, 2012 at 10:20 PM

      sip gan sama2 makasih juga sudah datan ke blog ane :)

      Delete
  4. Rohis FacebookJune 30, 2012 at 7:57 AM

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

    happy blogging...

    ReplyDelete
    Replies
    1. HzndiJune 30, 2012 at 10:22 PM

      ada sob, tuh demo tutorialnya malahan hehehe

      Delete
  5. UnknownJune 30, 2012 at 8:09 AM

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

    ReplyDelete
  6. UnknownJune 30, 2012 at 10:49 AM

    ini cara buat sosial bokmare ya sob

    ReplyDelete
  7. BlogS of HariyantoJune 30, 2012 at 11:33 AM

    manteb tutorialnya sobat..boleh dicoba nich :)

    ReplyDelete
  8. Vpie ◥TwekzLibz◤ MahaDhifaJune 30, 2012 at 11:34 AM

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

    ReplyDelete
    Replies
    1. HzndiJune 30, 2012 at 10:28 PM

      ah kirain blom ada, kalau blom ada kan tutor pnya ane bisa dipasang hehehe

      Delete
  9. cak oniJune 30, 2012 at 1:18 PM

    nice share sob

    ReplyDelete
  10. UnknownJune 30, 2012 at 6:08 PM

    kesinsi lagi sob sambil ngupi

    ReplyDelete
  11. ICAH BANJARMASINJune 30, 2012 at 7:59 PM

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

    ReplyDelete
  12. AnonymousJune 30, 2012 at 9:29 PM

    Izin untuk menyimak gan..

    ReplyDelete
  13. HzndiJune 30, 2012 at 10:23 PM

    sangaaaat keren ini sobat, wajib di pakai di blog ente :D

    ReplyDelete
  14. Media Sosial TerbaruSeptember 14, 2012 at 9:39 AM

    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