Sliding Social icons with Hover effect for Blogger



Today I am going to show how you can add cool Sliding Social icons with Hover effect to your Blogger/Blogspot blog. These button have a really cool hover effect.

These buttons are made with CSS without using any JavaScript coding. The code has been optimized to load faster. These buttons are attractive and their hover effect make them awesome. 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/AVvXsEh9eKTEKe9Heis9mhRfKBsGlIfYXdQhyphenhyphenDfug5cfBd4pRlwTGzTY2m_YOFjw5bWwjt1IkGon0seA_3BxZFlrsa7xiButDTc5W70-KJLk1_95nJfAKlbuUAJ15_49DSH0pPeH-GoTUqqjrg/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9eKTEKe9Heis9mhRfKBsGlIfYXdQhyphenhyphenDfug5cfBd4pRlwTGzTY2m_YOFjw5bWwjt1IkGon0seA_3BxZFlrsa7xiButDTc5W70-KJLk1_95nJfAKlbuUAJ15_49DSH0pPeH-GoTUqqjrg/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJmPrjAjFtoIsaGiyBXD7AJS-9KAWEcNFFPvl4MomjsVGv7uHasuHRGk3v5Sy6Zdv-yA8SpUUH_FX-jJ4b4ovwSxduAN_3Eshdr8zNA1PNMua79K_-bK_6MWxLOSy0EHbt6m4Y3AbSg/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJmPrjAjFtoIsaGiyBXD7AJS-9KAWEcNFFPvl4MomjsVGv7uHasuHRGk3v5Sy6Zdv-yA8SpUUH_FX-jJ4b4ovwSxduAN_3Eshdr8zNA1PNMua79K_-bK_6MWxLOSy0EHbt6m4Y3AbSg/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5n3bRng8ptJ6kOYM-0wpQXDwfsB4aeGtdLPzbs8VXia1_vj7E6_1UWxOe4l6i7XEoJ8M3Jb1nkbmhho5W19wny-ZxL76U0ya5N3n8wHMvAxyGwtRt9bVAWbkEBXapoaVyq7-xnOyVrg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5n3bRng8ptJ6kOYM-0wpQXDwfsB4aeGtdLPzbs8VXia1_vj7E6_1UWxOe4l6i7XEoJ8M3Jb1nkbmhho5W19wny-ZxL76U0ya5N3n8wHMvAxyGwtRt9bVAWbkEBXapoaVyq7-xnOyVrg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN774OIgCTZP5EgsLlwJKchIepS0_I9h9iWqlUik6QS_gXLUOQ45GraFZNLrUCNJI1qAetRc1K6PtJKd70Dl-wOb6WmNnXT_HuOFzLOkvXN3poNvImhTfVupukyg8EiKCZHLk9qYX97Q/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN774OIgCTZP5EgsLlwJKchIepS0_I9h9iWqlUik6QS_gXLUOQ45GraFZNLrUCNJI1qAetRc1K6PtJKd70Dl-wOb6WmNnXT_HuOFzLOkvXN3poNvImhTfVupukyg8EiKCZHLk9qYX97Q/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.

You are done now. Now you and your visitors can see this awesome sliding social icons with Hover effect in your blogger blog.

6 comments:

  1. Thaaaanks my friend ^_^

    ReplyDelete
  2. nice one!!

    But, how can align these icons on the right side?

    My website: https://www.outlived.co.uk

    Thank you in advance,
    Helmuts
    Outlived Classifieds

    ReplyDelete
  3. find a solution myself how to align them on the right side...

    in my case:

    .abt-social-slide{ width:356px; float:right; }

    thank you for an excellent tutorial!!
    Helmuts Meskonis
    Outlived Classifieds
    https://www.outlived.co.uk

    ReplyDelete
  4. awesome.. i just wished there's option for image size or resolution?i need smaller buttons to fit for my blog (www.pisoandbeyond.com) but thanks this is great nonetheless

    ReplyDelete
  5. Awesome! I've managed to modify this to include linkedin and remove twitter. just have to play with the "no repeat 0 - 60px" to get the desired position of the icon. thank you!!!

    ReplyDelete