Sliding Social Icons With Hover Effect Widget

I present to you another Social Icons Widget for your Blogger blogs fully made with CSS3, withou using any JavaScript code. So if you want to add this Sliding Social Icons With Hover Effect widget to your blogs, follow next steps.



 

• Facebook
• Twitter
• Google plus
• Rss

How To Add Sliding Social Icons With Hover Effect In Blogger

Step#1 : First you need to add the widget, so let`s go.

• Go to Blogger
• Layout > Add widget > HTML/JavaScript
• Copy the below given code :

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7_qx2sfSWFE7k5yC-XJysMFTg5Twk3d5rXoGNJVz08XpJDgMjp88m8AW7xNPYgrjJJ0oKp41QEIaa-hZDcDWzMaw3_Krq4LX-aS6Rs-lQQou0EoHKEWUrhjQbo_H0L7BSfULYGsTLw/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7_qx2sfSWFE7k5yC-XJysMFTg5Twk3d5rXoGNJVz08XpJDgMjp88m8AW7xNPYgrjJJ0oKp41QEIaa-hZDcDWzMaw3_Krq4LX-aS6Rs-lQQou0EoHKEWUrhjQbo_H0L7BSfULYGsTLw/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdan7LWvssyvqfNuqoli8oF9TGRjLhr7BCQx9lfeNtT0FIobxoLtJ9HBQz2nQUPEWjWYyp338vAjukuGXVDMxr8bPyQOxGNhv-6S4e26R0WuU0fd8so2UoKFMmoTX5VW0Kag3V_IsWuw/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdan7LWvssyvqfNuqoli8oF9TGRjLhr7BCQx9lfeNtT0FIobxoLtJ9HBQz2nQUPEWjWYyp338vAjukuGXVDMxr8bPyQOxGNhv-6S4e26R0WuU0fd8so2UoKFMmoTX5VW0Kag3V_IsWuw/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrtE0B4FSwuQrybn92nRod4SwUTkLVGIcGsDxTFMAums_I5aKlR7d9kGzfzDDYLpUs71iZfaw4qktF57gfFER7m8n6T0dxmxQr3_tVAfc1IR-GcM9Wzqpdz9gmf8pJ_dUBPRtO-i4aGA/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrtE0B4FSwuQrybn92nRod4SwUTkLVGIcGsDxTFMAums_I5aKlR7d9kGzfzDDYLpUs71iZfaw4qktF57gfFER7m8n6T0dxmxQr3_tVAfc1IR-GcM9Wzqpdz9gmf8pJ_dUBPRtO-i4aGA/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBIiWjuE-amB1wNwdm2ggS_yFKiJaMwSDQF-7hunV1GcsZjha7gec4kSCt1UvBckvnEE1bRmc8Mgyh0hbAJJ-Mtz8qVAIvV2qBXW1o8Cs4UD6K6p-I_kluakbvSZx7y0mNkX7CAg-Y9w/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBIiWjuE-amB1wNwdm2ggS_yFKiJaMwSDQF-7hunV1GcsZjha7gec4kSCt1UvBckvnEE1bRmc8Mgyh0hbAJJ-Mtz8qVAIvV2qBXW1o8Cs4UD6K6p-I_kluakbvSZx7y0mNkX7CAg-Y9w/s1600/twitter.png) no-repeat 0 0}
</style> 

Step#2 : Customize the widget.
After adding the code change # to your desired URL and save the widget. Place the widget wherever you want this icons to appear.