Hand Draw Attractive Social Media Widget For Blogger

Hand Draw Attractive Social Media Widget For Blogger

Hi Bloggiyan! Social Media is only 1 way to increase your blog visitors. So Many blogger add different style of Social Media Widget to attract visitor, Today we are sharing Nice look Hand Draw Social Media Icon Widget for Blogger.Its look really different & Its easy to Install on blog with just single step .

Its Live Demo

Single Step To Add Hand Draw Social Media Widget Into Blog.

• Go to Blogger > Design > Add a Gadget and select "HTML/Java Script"
• Copy below code and paste it in html/javascript.

<style class="text/css">
table
{
border-bottom: 0px solid #E6E6E6;
float: center;
width: 260px;
margin:10px 0 0 3px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/s2free" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxC2M5TjGCF_nSNlWS2B0IGrrcRaJRucO9vQGRnVC1ysqzKigweLj6W_IvcGBwoddQSPToc2wUPuioYRUkWbRKlW1sDxRaSyDmmMjjxwrbKmf7JhVZnCvNXcLEAeAYPLJzJkxO_YjZOqg-/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/s2free" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoANFEtX2gmQbsEv0Pn9ZdBdRPh5-sr0pwCbiXO4GX9IqNocYJceWSrRquMsKPYFGJDvQwUvhJrVJR7I1mZPhOFU-pqotVEIMtE2eWCGsNKA2kllTSQLWNWHyT30aIVPJHJ9ev4WMBnNRA/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/s2free" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsOkt6XCg1fmYkz_53zUTPR4KsUreqDDS2fyZXEbolX0Vvp-9MMPsJQTfNrOpLyZml15oTWuvSZa5BY8maOc8l4mhFvdwmwUjD0qv_gbikbiY5o7mwxegrbUdErm5b0owEl3kL0iMBCntb/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/113992072715592507851" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju8NxzWdDe-tF83-0HG1XrgmLdwic-tH3Dxjl8Ai_vlq827kaWnjz6lP8DIFVV-_kjuF9KV6hDOjGkQhl_8oL-X6WZIba_e2wSKHZCOqFPKuR57Xkoxb2vY2a-L-073t3JDWGMnao5Bhlg/s1600/google-48.png" /></a></td>
</tr></table>
</div>

Customization

You need to replace all the links which I highleted in code.If you want you can customize the width of the widget by simply replacing width: 260px with your own value.

If you don't want the border between each icon to appear, simple replace border-right: 1px with border-right: 0px