Hand Drawn social media widget with feedburner chicklet and subscribe button

8:17 PM Posted by Hammad Ansari

It really can gather a whole lot of visitors' attention and ultimately would result in boost in subscriptions. It's the perfect subscribe widget for your blogger blog. The installation process is quite easy, no need to edit the HTML of your template.

Step 1: Installation Process!

Follow the steps below exactly as mentioned.

Go to Blogger >> Design.
Add a Gadget.
Select HTML/Javascript and paste the code below within that.

<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 280px;
margin:10px 0 0 20px;
}
.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>
</div>

<style>
.rssbuttontable
{
border: 1px solid #E6E6E6;
background: #FFDCB1;
float: center;
width: 270px;
margin-left:10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
height: 35px;
float: left;
display: inline;
margin-top:5px;
margin-bottom:5px;
}
input.Subscriberssbutton
{
background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600)); 
border: 1px solid #FF6600; 
text-transform: none; 
font:bold 13px arial;
 color: #fff; 
height: 30px;
 padding: 4px 2px 5px 2px;
 margin: 0px 0 0x 0px;
 border-radius: 5px; 
-moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 cursor:pointer;
display: inline;
}
</style>
<table class="rssbuttontable">
<tr>
<td>
<a rel="nofollow" href="http://feeds.feedburner.com/BloggerTat"><img src="http://feeds.feedburner.com/~fc/BloggerTat?bg=FF6600&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" />
</a>
</td>
<td>
<input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=BloggerTat&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=650,height=570&#39;);return true" /></td></tr></table>
<style class="text/css">
.grablink
{
link-color:#0084CE;
font-size:12px;
text-align:right;
text-weight:italic;
}
</style>
<div class="grablink">
<a href="http://bloggertat.blogspot.com">Blogger Widgets</a>
</div>

4. Before saving you need to replace some values with your own. Process to next step.

Step 2: Add your Own values!

Replace:

http://www.facebook.com/BloggerTat with your facebook fanpage. (If you don't have one, create it here)
http://twitter.com/BloggerTAT with your twitter page.
http://feeds.feedburner.com/BloggerTat with your feedburner link.
https://plus.google.com/110875602250977569192/posts with your Google + page.
BloggerTAT (from the lower part of the code above) with your feedburner id. It appears 3 times, change 'em all.

Click save. That's it you are done :).

Tags: Subscribe, Widgets

Share your views...

1 Respones to "Hand Drawn social media widget with feedburner chicklet and subscribe button"

Unknown said...: One of the impressive and interesting information about Code, thanks for sharing and great effort.
SHAREit for PC

September 10, 2015 at 11:46 PM

Blogger TAT

Popular Posts