Create An Awesome Social Media Widget With Hover Effect

Create an awesome social media widget with hover effect
Social media is a great way to increase your visitor, if you have many follower on twitter, friend on facebook, subscriber on RSS feed or many friend on your google+ account. I guess that if you share a link on your social media account, you'll get many visitor from that. Because you've connected to other people on social media. But how to get more friend on social media?
I think create an social media widget on your site is the great way, just place a link to your social media account. And now i will give a tutorial to you, how to create an awesome social media widget with hover effect! Not just a simple link to your social media account, but with an image with hover effect. I guess that your visitor will be interest to click that.

Create an awesome social media widget with hover effect

1. Login to blogger
2. Design - Edit HTML
3. Find </b:skin> code, you can use Ctrl + F
3. Before that code, paste this code below

ul.social {
    list-style: none;
    margin: 10px;
    overflow: hidden;
margin-bottom:20px;
}

.social li {
    float: left;
    background: none !important;
    padding: 0 !important;
    margin: 0 8px;
}

.social li a {
    display: block;
    width: 40px;
    height: 40px;
}

.social li.rssicon a {
    background:url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/Blog%20Yahyagan/RSS.png);  margin-right:20px; margin-left:40px;
}

.social li.twicon a {
    background:url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/Blog%20Yahyagan/Twitter.png);margin-right:20px;
}

.social li.fbicon a {
    background:url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/Blog%20Yahyagan/Facebook.png);margin-right:20px;
}

.social li.gicon a {
    background:url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/Blog%20Yahyagan/Google.png);
}

.social li.rssicon a:hover {
    background:url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/Blog%20Yahyagan/RSShover.png);
}

.social li.twicon a:hover {
    background:url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/Blog%20Yahyagan/Twitterhover.png);
}

.social li.fbicon a:hover {
    background:url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/Blog%20Yahyagan/Facebookhover.png);
}

.social li.gicon a:hover {
    background:url(http://i1212.photobucket.com/albums/cc451/ramseyinjury/Blog%20Yahyagan/Googlehover.png);
}

4. Save it

Notice :

I hosted my image on my photobucket account, please hosted your image at your own Hosting.

5. Go to design tab again
6. Add a gadet - Choose HTML/Javascript
7. And then paste this code below

<ul class='social'>
<li class='rssicon'><a href='http://feeds.feedburner.com/blogyahyagan'/></a></li><li class='twicon'><a href='http://twitter.com/blogyahyagan'/></a></li><li class='fbicon'><a href='http://facebook.com/23arshavin'/></a></li><li class='gicon'><a href='https://plus.google.com/105370464976454684137'/></a></li></ul>

IMPORTANT : Change the text marked red with your own username!
And then save it.
Ok thats the tutorial how to Create An Awesome Social Media Widget With Hover Effect. Take 5 Second to share it!

Next post 41 High Pagerank Dofollow Social Bookmarking Site 2012

Inspired from : Way2Blogging