-->

Stylish Social Sharing Buttons with Cool Hover for Blogger

Probably you have seen many social Sharing widgets for blogger, but in this post i am going to share with you a Stylish Social Sharing Buttons for Blogger with Cool Hover Effect. It is build with light weight coding that doesn't affect on your site's performance such as fast loading speed and other user navigation features. It is most attractive social media widget with beautiful hover effect for blogspot users, the best thing of this gadget is that you can add it on any place like you can add it on left or right sidebar, at Footer or any place you want.

This gadget is not only have an eye-catching design but it will also help your blog to get more fans from social media sites such as Facebook, G-Plus, Twitter and much more. In this gadget 7 major social sharing icons has been added, so that users could get full benefit from almost all compulsory sites. By using it on your website you will surely gain many post shares on many site and by this way traffic will increase. In previous articles i have shared many other useful gadgets which are liked by many readers and you will surely like this type of gadget too as it has awesome look in it. You can see its demo below...


Social Sharing Buttons for Blogger with Hover effect

Adding Stylish Social Media Buttons in Blogger

After seeing its demo, you will hopefully want to add it on your website. Okay so let start to add Stylish Social Media icons with Hover Effect in Blogger.

1. Go to Blogger Dashboard >> Layout, now choose Edit/HTML option and paste the below set of code in that box
<style>
.socialLinks{text-align:center;margin:50px 0 0}.socialLinks a{display:inline-block;margin:0 .5em;-webkit-transition-property:all !important;-moz-transition-property:all !important;-o-transition-property:all;transition-property:all !important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;border:2px solid #8fb73e}.socialLinks a:hover{-webkit-border-radius:40px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;border-radius:40px}.socialLinks span{display:none}.fTwitter{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -655px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:1px -1083px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook:hover{background-color:#369;border-color:#fff;background-position:1px -1141px}.fTwitter:hover{background-color:#28aae1;border-color:#fff;background-position:0 -718px}.fInstagram:hover{background-color:#517fa4;border-color:#fff;background-position:0 -597px}.fPintrest:hover{background-color:#cc2127;border-color:#fff;background-position:0 -285px}.fLinkedIn:hover{background-color:#007fb1;border-color:#fff;background-position:0 -860px}.fDribbble:hover{background-color:#ea4c89;border-color:#fff;background-position:0 -52px}.fGoogle:hover{background-color:#e46044;border-color:#fff;background-position:0 -395px}.fInstagram{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -527px;background-repeat:no-repeat;height:62px;width:62px}.fPintrest{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -226px;background-repeat:no-repeat;height:62px;width:62px}.fLinkedIn{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -790px;background-repeat:no-repeat;height:62px;width:62px}.fDribbble{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 11px;background-repeat:no-repeat;height:62px;width:62px}.fGoogle{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);background-position:0 -343px;background-repeat:no-repeat;height:62px;width:62px}

</style>
<div class="socialLinks">
<a href="https://facebook.com/bloggercell" class="fFacebook transition"><span>Facebook</span></a>
<a href="https://twitter.com/bloggercellfans" class="fTwitter transition"><span>Twitter</span></a>
<a href="http://instagram.com/bloggercell" class="fInstagram transition"><span>Instagram</span></a>
<a href="http://pinterest.com/bloggercell" class="fPintrest transition"><span>Pinterest</span></a>
<a href="http://www.linkedin.com/in/bloggercell" class="fLinkedIn transition"><span>LinkedIn</span></a>
<a href="http://dribbble.com/bloggercell" class="fDribbble transition"><span>Dribbble</span></a>
<a href="https://plus.google.com/+bloggercell" class="fGoogle transition"><span>G+</span></a>
    </div>
- Change https://facebook.com/bloggercell with your FB Page
- Change https://twitter.com/bloggercellfans with your Twitter ID
- Replace http://instagram.com/bloggercell with Instagram account ID
- Replace http://pinterest.com/bloggercell with Pinterest ID
- Change http://www.linkedin.com/in/bloggercell with LinkedIn Username
- Change http://dribbble.com/bloggercell with Dribble account
- Replace https://plus.google.com/+bloggercell with Google Plus Page

2. Now finally click on save button to save your settings

You have successfully added Stylish Social Media Icons Widget to Blogger with cool hovering effect. If you have any kind of problem while adding it on blogspot then simply drop your comment on comment section. I will try my best to reply as soon as possible. If you like this post then do not forget to share this article with your friends.
ViewCloseComments