Add WordPress like Social icons to blogger

WordPress style social icons widget is very popular social widget. It helps in increasing your social network fans or followers. This wordpress style widget also displays your fans, followers and subscribers count.. Overall design of this widget is very beautiful and attractive. It is created in CSS and also supports image spin effect on mouse hover. Adding this widget to blogger is very easy. In this guide we will discuss about adding this stylish social icons widget to your blogger blog.

Adding WordPress like social icons to blogger

Step 1: Login to your blogger dashboard and select your blog.

Step 2: Select Layout option.

Step 3: Select Add a Gadget option.

Step 4: Select HTML/JavaScript widget from the list.

Step 5: Paste following code in the HTML/JavaScript widget.

Step 6: Save the widget and enjoy.

Note: Replace the red colored code with your social network address.

<style>
#wc-wplike
{
background:#ffffff;
border:1px solid #dcdcdc;
padding:5px;
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-web-kit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
width:285px;
}

#wc-wplike td
{
font:16px georgia;
text-align:center;
color:#444444;
}
#wc-wplike img{ 
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#wc-wplike img:hover{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#first-img,#sec-img
{
border-right:1px solid #dcdcdc;
}
</style>
<div id="wc-wplike">
<table border="0" cellspacing="0" cellpadding="1" width="298">
<tbody>
<tr>
<td id='first-img' valign="top" width="74"><a href='http://www.facebook.com/pages/Windroidclub/416958881706592' target='_blank' rel="nofollow">
<img border="0" src="http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png"  /></a></td>
<td id='sec-img' valign="top" width="74"><a href='https://twitter.com/windroidclub' target='_blank'  rel="nofollow">
<img border="0" src="http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png" /></a></td>
<td valign="top" width="74"><a href='http://feeds.feedburner.com/WindroidClubblog' target='_blank' rel="nofollow">
<img border="0" src="http://2.bp.blogspot.com/-IXJ5WpaZllc/UiIRkBdgE0I/AAAAAAAACUQ/H41RlpEwkSU/s1600/rss.png" /></a></td>

<tr>
<td valign="top" width="74">11K</td>
<td valign="top" width="74">500+</td>
<td valign="top" width="74">900+</td>
</tr>
<tr>
<td valign="top" width="74">Fans</td>
<td valign="top" width="74">Followers</td>
<td valign="top" width="74">Subscribers</td>
</tr></tr></tbody></table>
</div>