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:

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!