Saturday, February 11, 2012

Create An Awesome Social Media Widget With Hover Effect

5 komentar
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.
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

5 komentar:

  1. Nice! Another wonderful article to ponder. This will surely add up to my Phoenix SEO knowledge. I hope you can share more. Thumbs up!

    ReplyDelete
  2. Great website. I picked up quite a lot. I hope to come back on your future updates. Keep up the great work.

    SEO Services Singapore

    ReplyDelete
  3. Social Media Widgets are the quite right and interesting way to maintain your blogs visitors’ interest.
    Web Design Company department.

    ReplyDelete
  4. Nice article, hope you write more of these little social media tricks so we from Tools benefit from You.
    Keep up

    ReplyDelete
  5. LOVE this - but can you create one for self-hosted wordpress as a widget?

    ReplyDelete