Button Facebook, Twitter, dan G+ dengan Efek Hover

Assalamu'alaikum wr. wb, selamat siang. Apa kabar? Alhamdulillah, Luar Biasa ALLAHU AKBAR. Walaupun Bulan puasa, kita harus tetap semangat sobat, karena puasa bukanlah untuk bermalasan.

Oke langsung saja, kemarin saya sudah share bagaimana Cara Membuat Jam Saat Ini dengan Javascript , kali ini saya akan bagi-bagi Button Sosial nih yaitu (Facebook, Twitter, dan G+) tentunya lebih keren dengan Efek Hover. Apa Efek Hover itu? Efer hover adalah apabila kita menyentuh Button Facebook atau Twitter atau G+ tersebut, otomatis button tersebut akan berubah warna. ya untuk demonya lihat gambar dibawah ini:

Button Sosial dengan Efek Hover

Gimana? lumayankan buat mempercantik tampilan blog. Jika tertarik untuk memasangnya, langsung saja ikuti tutorial dibawah ini:
1. Login ke Blogger sobat
2. Masuk Template => Edit HTML
3. Letakan CSS dibawah ini, tepat diatas kode ]]></b:skin>

#sosial {display:block;margin:0px 0px 0;width:100%;float:center;background:transparent;position:relative;padding:0;height:40px;}
#sosial::before {content:"";width:0;height:0;bottom:-11px;position:absolute;right:-1px;border-right-color:transparent;border-bottom-color:transparent;}

#sosial::after {content:"";bottom:0;position:absolute;left:-40px;z-index:99999;border-left-color:transparent;}

#sosial ul {position:relative;}

#sosial ul::after {content:"";bottom:-47px;position:absolute;left:-43px;z-index:99999;}

#sosial li {display:block;float:left;margin:0 10px;text-indent:-999999px;}

#sosial li a {display:block;height:45px;width:133px;overflow:hidden;background:url(http://3.bp.blogspot.com/-_yX_V-or3pw/Ubi8AXEI4EI/AAAAAAAAAEs/eyXbDlhZnxo/s400/Sosial-Sprite.png);}

.fb {background-position:0 0;}

.fb:hover {background-position:0 -45px !important;}

.twitter {background-position:0 -177px !important;}

.twitter:hover {background-position:0 -225px !important;}

.gplus {background-position:0 -90px !important;}

.gplus:hover {background-position:0 -135px !important;}

Note: silakan sesuaikan CSS dengan template anda :)

4. Letakan kode HTML dibawah ini, sesuai dengan yang kamu mau :
<div id="sosial"><ul><li>

<a class="fb" href="https://www.facebook.com/nandarious" target="_blank">Join on Facebook</a></li><li>

<a class="twitter" href="http://twitter.com/Sunandar_" target="_blank">Follow on Twitter</a></li><li>

<a class="gplus" href="https://plus.google.com/107485250451185781334" target="_blank">Circles on Google+</a></li></ul></div>
5. Save

Oke, Cukup sekian. semoga bermanfaat :) jangan lupa tinggalkan Komentar!

Related

Tutorial Blog 5666668520356317582

Post a Comment

  1. sip keren nih sob, saya bungkus dulu scritnya yah...

    ReplyDelete
    Replies
    1. oke gan :) semoga bermanfaat yah :)

      Delete
    2. Dibungkus buat sahur ya mas Muroi .. he he

      Delete
    3. ahha makan sahur nya sama script ya gan :D

      Delete
  2. Replies
    1. owh iya judulnya kelebihan itu gan, skrg udah diganti :)

      Delete
    2. eh maksudku tadi RSS.
      tapi ok mi sudah dihilangkan kata rss nya.
      atau coba buat button pake style css semua tanpa pake background image atau image apapun,, pake icon font juga boleh . bagus ntuh

      Delete
    3. bener tuh mas. yang kaya diblog saya bukan? lihat di menu atas :)

      Delete
    4. iyo macam itu,
      keknya kamu gunakan font-awesome

      Delete
  3. mas, ada ralaat..
    coba liat submenu dari Academic dan Rupa-Rupa tpi liatnya dihomepage.. pasti eroor @-)

    ReplyDelete
    Replies
    1. submenunya ketutupan sama slider skitter mas..

      Delete
    2. iya gan saya tahu.. tapi biarin lah.. cuma label ini, label juga bisa dilihat di sidebar gan :)

      Delete
    3. zz yaudahlah terserah masnya ajaa.. :p

      Delete
    4. zz yaudahlah terserah masnya ajaa.. :p

      Delete
    5. wkwk iya gan, sebenernya pengen ganti navigasinya tapi ga ada yang sesuai.. ;(

      Delete
    6. Oh ya mas... Di Laptop Saya Menu nya Mas Ada Code code NggaJelas... knp ya..

      Delete
    7. kode seperti apa ya mas? kirim pict nya aja disini :)

      Delete
    8. ini lo mas http://ximg.us/upload/1373859851.png

      Delete
    9. owh itu mah font awesomenya gan belum terlihat semua.. disebabkan karena koneksi gan :)

      Delete
    10. emang bukanya dibrowser apa gan ?

      Delete
    11. loadingnya belum sempurna mungkin mas

      Delete
    12. Mozila Mozila... Koneksi ma cepet.. -_- Saya pakai comodo baru bisa... Loading dari Tadi uda Selesia...

      Delete
    13. tapi skrg udah bisa kan gan ?

      Delete
  4. top markotop mas :)

    ReplyDelete
    Replies
    1. mas, bikin gtexr area gitu gimana caranya ? :-?

      Delete
    2. itu ada diblognya dte gan :)

      Delete
    3. linknya gan?? :-?

      Delete
    4. http://www.dte.web.id/2012/07/tema-vanila-untuk-tag-pre.html#.UeDx7NKl5mY :)

      Delete
    5. oke bos :)
      bisa buat template jd responsive gak gan ?

      Delete
    6. coba ini http://willyseo.blogspot.com/2013/02/Buat-Responsive.html :)

      Delete
    7. tetep belum paham gan :(

      Delete
    8. tinggal tambahin aja gan kode css nya diatas skin. trus html nya masukin didalam postingan

      Delete
  5. kudu dicoba nih sog, bolehdong niru hehehe

    ReplyDelete
  6. Boleh juga widget nya.. saya coba mas, cocok ndak dg template nya.

    ReplyDelete
    Replies
    1. oke gan.. pasti cocok ko.. tinggal diedit aja CSS nya :)

      Delete
  7. Valid HTML5 gak gan?? kereen tuh...

    ReplyDelete
    Replies
    1. wah kurang tau gan @-) saya bukan ahli seo :)

      Delete
    2. valid HTML5 ?? :-? SEO ??? :-? hmmm ... bingung :D

      Delete
    3. iya gan, biasanya valid HTML5 itu bagus bukan buat seo? :-d wkwkw saya juga kurang tau :))

      Delete
    4. mmmm .. iya mungkin gan :D ,, tak kira html5 sendiri , seo sendiri :-d ,,, hehehe

      Delete
  8. widget dengan efek hover memang keren :)

    ReplyDelete
  9. wah keren ... ,, seperti punya blog mbahqopet :-d hehehehe ....

    ReplyDelete
    Replies
    1. wah iya sama gan... padahal saya ngambil script ini bukan diblog dia loh :D wkwkw

      Delete
    2. hahaha ,, iya mas gk papa ,, tetep keren ini :D

      Delete
  10. menarik nih mas....pengen juga nyoba :)

    ReplyDelete
  11. tombol share nya unik dan keren om...yang lebih bikin saya salut, template blognya unik, kolom komentarnya azh sempet bikin saya bingung, terpaksa pikiran saya yang jarang banget saya pake ini, terpaksa diperes...tapi karena dasarnya saya ini cerdas, akhirnya kolom komentarnya ketemu juga...nih buktinya saya bisa komentar panjang disini kan...
    ditunggu komentar panjangnya di cilembu okeh....;o)
    salam sehat dan ceria selalu, tak lupa kecup kering ah dikit

    ReplyDelete
    Replies
    1. hahaha oke deh kang :D untung aja ya ketemu :p
      siap segera meluncur :)

      Delete
    2. mas, komentarnya kok lucu ya, hahaha :d

      Delete
    3. hayoooo...lagi ngomongin saya yah...
      saya emang cakep loh... :)

      Delete
    4. hahaha nggak kok om :-)
      btw, salam kenal om cilembu, saya blogger baru :)

      Delete
    5. salam kenal kembali :p wkwkw

      Delete
    6. bukan buat mas nandar salam kenalnya :-b

      Delete
  12. wew coba praktekin akh :D

    ReplyDelete
  13. Langsung masukkan kodenya mas langsung jadi Mas,,terima kasih ini mas.

    ReplyDelete
  14. widgetnya oke, tapi kode2nya susah di copas dari browser opmin :(

    ReplyDelete
  15. keren mas, bingung mau gw taruh dmna nih.. :D

    ReplyDelete
  16. enteng juga nih blognya bro..keren hahahay

    ReplyDelete
  17. ane bookmark dulu sob,,,
    btw blognya keren :D

    ReplyDelete
  18. gan mau tnya nih, knapa google fonts misalnya Open Sans, Droid,Skranji kayak gitu gak terbaca di Chrome ya?
    Chrome saya yg nggak beres atau emang gitu ??

    ReplyDelete
    Replies
    1. kebaca ko gan..
      emangnya di firefox bisa? atau browser selain chrome?

      Delete
    2. di firefox normal, kalo di chrome pecah2 fontnya, bisa kirim gambar nggak ni di komentar?

      Delete
    3. https://www.google.com/images/srpr/logo4w.png.

      Delete
    4. http://1.bp.blogspot.com/-CMM0_ZQxD3c/UeET--hFwQI/AAAAAAAAAFA/85xUmVenMbk/s320/Cara+Memutihkan+Kulit+Wajah+Secara+Alami+-TrikBerbagi.jpg

      Delete
    5. wah ko bisa si gan?
      bisa gan.. gambar siapa tuh? bening bgt :-d

      Delete
    6. gak tau juga gan, ntar saya ksh SS-nya disini..
      itu calon saya, hahaha :))

      Delete
    7. haha ciusan gan ? itu bukannya foto yang ada di blognya mbak yulia :D
      ok

      Delete
    8. yach ketahuan deh :-)
      itu kira2 orang atau boneka ya mas? bisa putih kayak sapi gitu =))

      Delete
    9. hahaha yah ga tau lah :D wwkwkw

      Delete
    10. itu kulitnya halus bgt gan, kayak button pake efek hover transisi .7s ease-in-out, luar dalam halusnya =))

      Delete
    11. hahaha bener gan .. bisa2 :D wkwkw

      Delete
  19. This comment has been removed by the author.

    ReplyDelete
  20. mlm sobat trmksih banyak sob dah berbagi ilmu

    ReplyDelete
  21. kunjungan pagi sob :)

    ReplyDelete
  22. wah mantap nih mas... tapi di template saya sudah banyak banget tuch mas.. kebanyakan sih. dan nggak berguna kayaknya... ntr di ganti dech...

    ReplyDelete
  23. Wah buttonnya keren mas, di save dulu ya mas.

    ReplyDelete
  24. keren mas butonnya,,, bisa dicoba nih :)

    ReplyDelete
  25. bagus sebenarnya, simpan aja deh dulu males buka-buka lagi males otak-atik template :)

    ReplyDelete
  26. keren gan social button nya , tapi gk demonya ya ? :)

    ReplyDelete
    Replies
    1. demonya diwakili sama gambar nya aja gan :) hehehe

      Delete
  27. mau copy gmana la pakai disable klik kanan jadi gak bisa di copy,,, :))

    ReplyDelete

Terimakasih telah membaca artikel di atas. Silahkan berkomentar dengan sopan.

emo-but-icon

Side Ads

Facebook

Adv

item