Memasang Widget Labnol Social Media Efek Hover di Blog

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

Labnol Social Media Widget With Hover Effect For 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.

'Script' Widget Labnol Social Media Efek Hover


<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/AVvXsEgjqlBYAQFMCMFpHuVQBbsapQxUt3ch7pjKPMLxXHCr709eolHvpUKiJAGLd5fqjuHO_rOHoCEjQrbS5A7wgD6gbfvS2vJgXY3ygt0voPpg0f0fy3wNKMNJEIOz8l1x2lZd-qUAoiKJ52Y/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.

Sekian mengenai tombol widget sosial yang dapat dibagikan untuk saat ini dan silahkan lihat artikel seocips terbaru lainnya yang membahas seputar widget blog.