When hovered we can see a sliding effect and change in the buttons image. A live working demo of this widget can be seen just below.
Once you have seen the demo we can move on with the tutorial for adding this widget to your blogger blog.
Adding the HTML/CSS through Layout
For adding this widget in your blog go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the below code in the box.
<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/AVvXsEjy-DnbvSZmFAGAZyGUYIfJ5ScHSQy5hKgQs-5JyPxqaPoZooYPviZlUokWm0tHGquNGY4mYSjPXyXc3zdPuqECIPuZTmSKeNL5Kzn-h7IjzwwO4Yf_yM3RkgoXFquiqix4QLpxWjfEeg/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-DnbvSZmFAGAZyGUYIfJ5ScHSQy5hKgQs-5JyPxqaPoZooYPviZlUokWm0tHGquNGY4mYSjPXyXc3zdPuqECIPuZTmSKeNL5Kzn-h7IjzwwO4Yf_yM3RkgoXFquiqix4QLpxWjfEeg/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKSx9FqPI4M_ULKh9b2WfmbRMnsecYcmbbSyt2g0P7ya65w8B2nOps2PTQ5S_pff7d_fihiZl9gT7c2xWYIAKvaNhIf5-8uUyjqTuhbcF8TTM8bjNaU5n4Nab_ZILmeCFa3PXMMy-OCw/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKSx9FqPI4M_ULKh9b2WfmbRMnsecYcmbbSyt2g0P7ya65w8B2nOps2PTQ5S_pff7d_fihiZl9gT7c2xWYIAKvaNhIf5-8uUyjqTuhbcF8TTM8bjNaU5n4Nab_ZILmeCFa3PXMMy-OCw/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaO3mKAaCOIhVOr8olAHBp6nVz4UmStYl_UewwxE-qTK5aUCDA-njvG_cZvhfCBUvkSOUD1qHpn_CqwvrBV1Sc9zmzOiCiF_Xn2wfXnPEwtxv0ZYv_AMu0T3KE82dwzk9EHtclb8R-Vw/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaO3mKAaCOIhVOr8olAHBp6nVz4UmStYl_UewwxE-qTK5aUCDA-njvG_cZvhfCBUvkSOUD1qHpn_CqwvrBV1Sc9zmzOiCiF_Xn2wfXnPEwtxv0ZYv_AMu0T3KE82dwzk9EHtclb8R-Vw/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_hvYx5Di_Ooic_Gf8LYkbwPAiPwoj0UfsiYGaMG7FzFUnYsgtYlKmvV1h4OqmuzIVZQrwP-fbaQCt2ZmhPiPY-Ce9-C4uhAAqh9_gDF604xpwOE7fFWawoOL4ypFIFU0fYEXGyfU8A/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_hvYx5Di_Ooic_Gf8LYkbwPAiPwoj0UfsiYGaMG7FzFUnYsgtYlKmvV1h4OqmuzIVZQrwP-fbaQCt2ZmhPiPY-Ce9-C4uhAAqh9_gDF604xpwOE7fFWawoOL4ypFIFU0fYEXGyfU8A/s1600/twitter.png) no-repeat 0 0}
</style>
After adding the code change # to your desired URL and save the widget. Finally save the template.
