Friday, 13 March 2015

Stylish Social Sharing Buttons with Cool Hover for Blogger

Stylish Social Sharing Buttons with Cool Hover for Blogger

Stylish Social Sharing Buttons with Cool Hover for Blogger
Friday, 13 March 2015
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
.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(;background-position:0 -655px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook{background-image:url(;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(;background-position:0 -527px;background-repeat:no-repeat;height:62px;width:62px}.fPintrest{background-image:url(;background-position:0 -226px;background-repeat:no-repeat;height:62px;width:62px}.fLinkedIn{background-image:url(;background-position:0 -790px;background-repeat:no-repeat;height:62px;width:62px}.fDribbble{background-image:url(;background-position:0 11px;background-repeat:no-repeat;height:62px;width:62px}.fGoogle{background-image:url(;background-position:0 -343px;background-repeat:no-repeat;height:62px;width:62px}

<div class="socialLinks">
<a href="" class="fFacebook transition"><span>Facebook</span></a>
<a href="" class="fTwitter transition"><span>Twitter</span></a>
<a href="" class="fInstagram transition"><span>Instagram</span></a>
<a href="" class="fPintrest transition"><span>Pinterest</span></a>
<a href="" class="fLinkedIn transition"><span>LinkedIn</span></a>
<a href="" class="fDribbble transition"><span>Dribbble</span></a>
<a href="" class="fGoogle transition"><span>G+</span></a>
- Change with your FB Page
- Change with your Twitter ID
- Replace with Instagram account ID
- Replace with Pinterest ID
- Change with LinkedIn Username
- Change with Dribble account
- Replace 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.
Stylish Social Sharing Buttons with Cool Hover for Blogger
4/ 5

1 comment:

Naman said...

Great Widget. I'll add this widget on my blog Blogging Easier.