Sliding Social icons with Hover effect for Blog of Blogger

Today i'm attending to show however you'll add cool sliding Social icons with Hover result to your Blogger/Blogspot blog. These button have a extremely cool hover result.

These buttons square measure created with CSS while not mistreatment any JavaScript coding. The code has been optimized to load quicker. These buttons square measure engaging and their hover result build them awful. once hovered we will see a sliding result and alter within the buttons image. A live operating demo of this gadget are often seen slightly below.

Demo!

• Facebook
• Twitter
• Google plus
• Rss

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="bob-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>
.bob-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.bob-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}
.bob-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmPHw31OattsCL9ngAQFDtRbBHpgdBP9q8ipgDK_RUSANesWVVI_WuaPmQ7EKhYNw3HRr_9KJe8hKzLpM6fglbqDVakBWBnmOYdbR75IGVr3Epny_in1MjlmFmLzTMEbD8h-3ppmvPg/s1600/facebook.png) no-repeat 0 -88px}
.bob-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmPHw31OattsCL9ngAQFDtRbBHpgdBP9q8ipgDK_RUSANesWVVI_WuaPmQ7EKhYNw3HRr_9KJe8hKzLpM6fglbqDVakBWBnmOYdbR75IGVr3Epny_in1MjlmFmLzTMEbD8h-3ppmvPg/s1600/facebook.png) no-repeat 0 0}
.bob-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHR2aAmuJYuntyvW8AiPxtspLayZutL4n1SsL60I2zf__x6jtiBV2c3HLEOEXHjsk9NIz5N44gDJO6OcKUTYI6ycaGhYWHGNYO2nM2cg7FCF3ELsMxGdQGY0q-0NeJ1zHlA3lf5OXpXw/s1600/twitter-1.png) no-repeat 0 -88px}
.bob-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHR2aAmuJYuntyvW8AiPxtspLayZutL4n1SsL60I2zf__x6jtiBV2c3HLEOEXHjsk9NIz5N44gDJO6OcKUTYI6ycaGhYWHGNYO2nM2cg7FCF3ELsMxGdQGY0q-0NeJ1zHlA3lf5OXpXw/s1600/twitter-1.png) no-repeat 0 0}
.bob-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxeexVcRmOfmcE8KSFGAXB4prrHWAetGcqEkSX2ufJXQhOugpkVX2vVNFxJjB81MSDRCrNhTtNwz7ielOgMTk2CA_RLL_2HOtNJRVmup5XynWJMOev1KUPkMOLspxetyS3GjF_ShC_dg/s1600/google.png) no-repeat 0 -88px}
.bob-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxeexVcRmOfmcE8KSFGAXB4prrHWAetGcqEkSX2ufJXQhOugpkVX2vVNFxJjB81MSDRCrNhTtNwz7ielOgMTk2CA_RLL_2HOtNJRVmup5XynWJMOev1KUPkMOLspxetyS3GjF_ShC_dg/s1600/google.png) no-repeat 0 0}
.bob-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWtYWZtafEscpioF2V_ZWiIwtfwRdfTN5c9zhNFjcdsBcobQQPPjFS7Yw1aIoLmGpnplYH4ausu1On8KxgYQEPWqfWKmlJdkpIVJ6P3uYO2PsKul0jsIqJT9ZsUYzxejRxF6frWH-DgA/s1600/twitter.png) no-repeat 0 -88px}
.bob-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWtYWZtafEscpioF2V_ZWiIwtfwRdfTN5c9zhNFjcdsBcobQQPPjFS7Yw1aIoLmGpnplYH4ausu1On8KxgYQEPWqfWKmlJdkpIVJ6P3uYO2PsKul0jsIqJT9ZsUYzxejRxF6frWH-DgA/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 currently. currently you and your visitors will see this awing sliding social icons with Hover result in your blogger blog.

You Also Like:

How to Add Social Media and Newsletter Buttons for Blog of Blogger