Hand Drawn Social Media Buttons For Your Blogger Blog

Great to tell you all BD readers that you will get valuable tutorial daily. So, keep checking BD blog daily for useful tips & tricks for your blog. Today's tutorial about "Hand Drawn Social Media Buttons For Your Blogger Blog". Social Media is a powerful way to increase readers to your blog or website.

If you have installed attractive social media buttons on your blog then you will get more subscriber and followers for your blog. In previous posts I shared many designs of social media buttons but now I want to share hand drawn beautiful social media buttons with you.

Live Demo

Follow These Steps For Installing Social Media Buttons On Your Blog Easily

1. Go To Blogger Dashboard > Design Tab > Add a Gadget and Select "HTML/Java Script"

2. Copy The Code Given Below and Paste It In HTML/Javascript Gadget

<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/BlogsDaddy" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvJgrlonPdGHY5LapwVMIaBtA5ZGBKALEAtA4SnUoAURK2Np4XgGTw2wjNg6_dg9wSkOqNRfaLgDaZmwMMLBnFyjrO9aoe9qkS0MfxNEKgOHkZlrYTYp74D_JUzsE6rzKvoPO_gJGfEyST/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/BlogsDaddy" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4l4GFvNepXAEY1wrKKqRYmkItOpi5Ldy7wUwDXVXy9PqzEmjvo73Ll-rpOJwwzvyF6k9xIx4-4eFK7qVnGWdclSXfMG2DurbKLhw4wVzFbcT6dv8ijz13YFBq851KUiktncEG_eueRDK9/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/BlogsDaddy" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1AOAZ72X4x5Z59q3DmZr4w8sePdRBa8T_D156nF8CF95cAW2cq0dw5BauOHavEMdXbF0iRiXJoWzFCxYcrsoolb_OD9Q77-3hG24L2w9OWL6nUI6resN1FLPnZK6TMXcWJzlpjA041twM/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/106217413057730068740" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7y7LwP5cmXH0-JP_qUd3DbAMjB0RuGIQdyMM30Nr1UNM0-NSN7laIhaKpitxF6_YxMeGK4ZiklEou7xSL59A_F5owS1-HTds3p2kaXF-usSzhPHQ55LkaZpf0OfsJgv0KHjMzp6-awYh0/s1600/google-48.png" /></a></td>
</tr></table>
</div>

Customization Of This Widget 

Its all done but You need to replace all the social profile links which I highlighted in code with red color.If you want you can customize the width of the widget by replacing width: 260px with your own value.

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

If you need any type of help from us regarding this widget then we are happy to help you. Just leave your comments. Enjoy..:)