Hand Drawn, Colorful Social Media Icons

6:12 AM Posted by Hammad Ansari

Social media has always been a great source for getting an extra stream of visitors for bloggers. Almost every blogger use the top social networking websites like Facebook, Twitter, Feedburner and the new Google + pages.

Keeping in that mind, I made a widget including four very attractive, colorful, hand drawn icons. It also uses a fade out effect once you hover over your mouse over an icon, which makes it even more cool. I've made it really simple (just one step process) to install it on your blogs.

How to add Hand Drawn Social media icons' widget?

Go to Blogger > Design > Add a Gadget and select "HTML/Java Script"
Insert the following code

<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/BloggerTat" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMXCGSIC09JDTqKswCyGu_GTnWGMuRtA6yBaUCQmGxyyVWnOYfyjTMu57c3JMSE8SQF0PqCXM6NNimLQIdhr1-uHI6HM16f2yV7c5-urRBhcOz9baKkKZq-_FGIir5erWQG6xuFd9CK9o/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/BloggerTAT" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiztwNHSzxELwhfpgf48egjgQ9RkHsU9yoYh7BnuvIyBMuGk3rCBd9HgRi4q153Edj81eaRezwNIs6h7p28nDdbONqfxRwrc8ZmT43b0QF7ZqopscmyqN3aV6tPTVi2L8H1lUxOUXfcc2Dq/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/BloggerTat" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKA6s7A727HVmS9-tmoME6rpi3d-Z6BEFBsKruf3tsJ4lXp4JqvpEqahd6le1ldTSYVNV8HaOJGyHwLTelK7UILJKW_tWyVb3oSSrDVZ8Ga0sLK_J8HJCXpJgClsRa4rCkP_JlXTkn8NFJ/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/110875602250977569192/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicdyoeHkpUqGN9GFaDzfDD6tvqEGctpWo4QrLSID6XaBBk448ezuWiHDIqPkpbBEU-nztDTWbEyclEsK7HciXJd60FIWYUOPXcWBAx20mNYpnSgA-1b6N0mcOSPTmNXywbeG5x_LZNO1FK/s1600/google-48.png" /></a></td>
</tr></table>

Save it, now it's time to adjust your widget.

Adjust your widget!

Replace all these links (pointing to my Facebook page, RSS, Twitter and Google + page) to yours.

http://www.facebook.com/BloggerTat (replace it with your Facebook page URL)
http://twitter.com/BloggerTAT (replace with your Twitter URL)
http://feeds.feedburner.com/BloggerTat (replace with your RSS URL)
https://plus.google.com/110875602250977569192/posts (and for this one as well, replace it with your Google + page URL)

Customize your Widget

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

That's all, hope you like this widget. Make sure you subscribe below to get updates. If you have any query, you can shoot it below in the comment box.

Tags: Classic Subscribe Widget, Subscribe, Widgets

Share your views...

0 Respones to "Hand Drawn, Colorful Social Media Icons"

Blogger TAT

Popular Posts