Labnol Social Media Widget With Hover Effect For Blog
Social Media Widget For Blogger. Berikut ini adalah widget Sosial Media yang di design oleh Amit Agrawal yang adalah seorang Blogger populer berasal dari India. Widget Sosial ini memiliki tapilan Simple dengan Hover Effect ketika di Sentuh mouse.

Jika sobat tertarik dengan widget-widget Sosial media, diartikel sebelumnya juga telah dibagikan mengenai widget Share dengan efek SLide yang dapat sobat letakkan di bawah artikel blog. Untuk sobat yang tertarik juga dengan efek-efek yang ada didalam template blog mungkin sobat dapat membaca cara membuat efek gambar bergetar dan membuat efek gambar SLide dengan Deskripsi di blog.

LIVE DEMO :




Ok sobat berikut ini adalah Memasang Labnol Social Media Widget di Blogger.

Buka Blogger Dashboard → Template → Html Editor → Tambah Gadget
Buka Html / Javascript Editor
Sekarang paste kode di bawah ini kedalamnya.

<style>
.SlidingSocial a{float:left;display:inline;margin-right:8px}
.SlidingSocial a:hover{-webkit-opacity:1;-moz-opacity:1;opacity:1}
.SlidingSocial  a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("https://lh5.googleusercontent.com/-9-xfdExpVCs/UgZHi7mnhlI/AAAAAAAABfA/ocF3QnOHF8M/s164/SlidingSocial.png") 0 0 no-repeat;-xwebkit-opacity:.7;-xmoz-opacity:.7;xopacity:.7;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}
#iconTwitter{background-position:-33px -33px}
#iconTwitter:hover{background-position:-33px 0}
#iconFacebook{background-position:-66px -33px}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS{background-position:0 -33px}
#iconRSS:hover{background-position:0 0}
#iconYouTube{background-position:-99px -33px}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus{background-position:-132px -33px}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class="SlidingSocial">
<a href="http://feeds.feedburner.com/seocips" id="iconRSS" target="_blank" title="RSS Feed">RSS</a>
<a href="http://twitter.com/seocips" id="iconTwitter" target="_blank" title="Twitter">Twitter</a>
<a href="http://www.facebook.com/seocips" id="iconFacebook" target="_blank" title="Facebook Page">Facebook</a>
<a href="http://www.youtube.com/" id="iconYouTube" target="_blank" title="YouTube Channel">YouTube</a>
<a href="https://plus.google.com/+Seocipscom" id="iconGooglePlus" target="_blank" title="Google Plus">Google+</a>
</div>

Setelah itu simpan dan lihat hasilnya.

Sekian mengenai tombol widget sosial yang dapat dibagikan untuk saat ini dan silahkan lihat artikel seocips terbaru lainnya yang membahas seputar widget blog.
0 Komentar untuk "Labnol Social Media Widget With Hover Effect For Blog"