Pasang 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 :

RSSTwitterFacebookYouTubeGoogle+

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivRmXAZkJ4QJ5zSxHZmBttC7KQ-paLD79HqgurXsP7NJSogsoJiiMUx1Al6OFZi6GSWEAg3_RtCfklteuu7GqO7rwLfZjwlYNJefZEF7sOZVZ5aYZEQUN3B8l70dfn0Iazzs8EJGdw9-Q/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/trackmyblog" 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.

Related Posts by Categories