Hand Drawn social media widget with Feedburner chicklet and subscribe button! ~ Bloggers Festival Guru

Trending: Blogger Template

Friday, February 17, 2012

Hand Drawn social media widget with Feedburner chicklet and subscribe button!

I usually love to play around with blogger widgets that I've designed, combine one with another (like I've combined Pro Subscription widget and Hand Drawn Social Media icons' widget here). My most recent widget is the Feedburner Chicklet with subscribe button, by combining it with the hand drawn social media widget it looks very appealing. I mean 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

(You can see the Demo here on this blog)

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/pages/My-Blogger-Tips/220561111314693" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgsZ9n_a8OSuc_KmYGDFdK6z0_KY3RPYI_9caHn__46iplKJBAdKRizbxbzZ8yX6Nc9blVAsMW9ziZWLF4wedaNpXJ-0THCNuPD51D9QAmbk8MHfzcD6FGK2Qz2k9vflXYkjg-mUx_8va/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/mybloggertips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoxHp6Fwst03Q-FnKxFACb5smdOxYPc8MgNgbFcz6bZ8TvPwQEj74RFBnFSp68_0Rj5rymHECtp3VNc7qpRkXWaYYbTWYivgotp9VBzD7xQMi5H-DvCxuEUhvi13gpa4ZR1761pbjiWMu7/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/mybloggertips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-QcPM1cBqJWscl6G7XdF_MrSmaGLgtymF-FBNEUquzPUciJP4dx3fb7YmoFMcILi1quiOEEVEA4m9qiQFilLC1weldsjFjpilbBPn60lKrhf3dIMOaKxdJpsynZdjFt5CfA03GJN4UQjr/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/AVvXsEjXPSump8ptgcs2JYih80NtxAss4gnUVlH6ErG2TCkfQYvg94GqgvKGbxkspclGK7c68o6r7OtVXVtp1o6PkQX1UeYGE3n5fwqdaN3fWW-JwRjRW5v2569rCmDRb5TZFcm-lBUxAjzpyv94/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/mybloggertips"><img src="http://feeds.feedburner.com/~fc/mybloggertips?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=mybloggertips&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=650,height=570&#39;);return true" /></td></tr></table>

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/pages/My-Blogger-Tips/220561111314693 with your facebook fanpage. (If you don't have one, create it here)
http://twitter.com/mybloggertips with your twitter page.
http://feeds.feedburner.com/mybloggertips with your feedburner link.
https://plus.google.com/110875602250977569192/posts with your Google + page.
mybloggertips (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 :).