Amazing Social Media Widget for Bloggers

Due to increasing social media usage many large companies mainly focus on its social media network. If you have enough audience from social media you don't need SEO aur google web search results. So you have to build social media followers in order to gain maximum output. Now a days main traffic comes from social media. You need an aye catching widget that can build your audience on social media. So for this today i am sharing very beautiful and amazing social media widget with you. This widget is owned by us if any one want to share please mention link back to us. Icons we have taken are from Icon Archive . Now have a look.

See Step by step method to add it in your blog.

Adding Widget to BLogger

1. Go to Blogger and select your blog.

2. Go to Layout==> Add a Gadget==> HTML/Javascript.

3. Copy and paste below code in content area and give a suitable title for this widget.

<style>

/*social icon By howdoblog.com*/
#head-htb{width:230px ; }
#head-htb ul li {list-style :none; padding: 0 0 0 1px; float: left;}
#head-htb ul li a {text-indent: -9999px; font-size: 0; line-height: 0;

overflow: hidden ; height: 64px; width: 64px ;border: 0px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSZkw76jIqFmdYQ_rpuWJyQyuahld4WdeeJ_yOvMjOguaZaoUPdm94CdQY-SyqAB_UNdKN5ZbhJOig_8hMYlSBCQUnHKgrL3OXLVFID74K3YYETmYVchbrtvSskdEnAN_2Y-a3CHm3/s353/Social%2520Media%2520Widget.PNG)

no-repeat; display: block;}

#head-htb li#fb a {background-position: -210px 0px;margin:0px 0px;}
#head-htb li#fb a:hover {background-position: -210px 0px;margin:0px

0px;transform:rotate(30deg);
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-moz-transition-duration: 950ms; 
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms;  
}

#head-htb li#twit a {background-position: -290px 0px;margin:0px 0px 0px

7px;}
#head-htb li#twit a:hover {background-position: -290px 0px;margin:0px 0px

0px 7px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 950ms; 
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms;  
}

#head-htb li#g a {background-position: 0px 0px;margin:0px 0px 0px -8px;}
#head-htb li#g a:hover {background-position:0px 0px;margin:0px 0px 0px

-8px;
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-moz-transition-duration:950ms; 
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms; 
}

#head-htb li#rss a {background-position: -68px 0px;margin:0px -3px;}
#head-htb li#rss a:hover {background-position: -68px 0px;margin:0px 0px

0px -3px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 950ms; 
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms; 
}

/*Social Icons howdoblog.com */

</style>

<ul>
<li id="fb"><a href="YOUR FB URL">Facebook</a></li>
<li id="twit"><a href="YOUR TWT URL">Twitter</a></li>
<li id="g"><a href="YOUR GOOGLE+ URL">Google+</a></li>
<li id="rss"><a href="YOUR RSS URL">RSS

Feed</a> </li>
</ul>
</div>
<div align="left">
<font size="0.125">
<a href="http://www.howdoblog.com/2012/08/amazing-social-media-widget-for-bloggers.html">
[Grab This]</a></font>
</div>

4. Hit save and arrange position for this widget.

5. Replace these :

YOUR FB URL with link to your facebook fan page
YOUR G+ URL with link to your Google+ profile or blog fan page
YOUR TWT URL with your twitter account.
RSS FEED LINK with link to your feeds.

Live Demo

We will post new and beautiful widget in coming posts. Stay tuned to Grab first. You can also social icons that we use to create beautiful widget. Thanks for your kind support. Have a Nice Day.