Add A Pro Subscription Box For Blogger With Hand Drawn Icons

By: Ramakrishna Ch on 16:22

1. Go to Design, Layout
2. Add a Gadget
3. Select HTML/JavaScript and add the following code to the box.

<a href="http://feeds.feedburner.com/officialprblog" imageanchor="1" style="margin-left: .5em; margin-right: 1em; float: center;" rel="nofollow" target="blank"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmU2mey7BKrrRjGiKzsjZXoFnol3qQYFkJcIs8TxIpoKntIY78nqeyd6kK5btyNe0togHtYU3_RWcSdGKDQIfPZD9QKdDcbX6WNYf3dKlu94nPy4olRlFk8H2jW1xPHdyUbhT-VJZan1aG/s400/Untitled-5.png" width="290" /></a>
<style>
.pr-blogger-email{
background:Fff no-repeat 0px 12px ;
width:270px;
float:center;
font-size:1.4em;
font-weight:bold;
margin:2px 20px 0px 35px;
color:#686B6C;
}
.pr-blogger-emailsubmit{
background:#0084CE;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
margin:0 0 0px 0;
text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
font:12px sans-serif;
}
.pr-blogger-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:0px 2px 0px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<style class="text/css">
.center
{
text-align:center;
font-weight:bold;
margin:10px;
}
</style>
<div class="center">
Submit your Email Address to Get Free Blogger Tips Directly to your Inbox
</div>
<div class="pr-blogger-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=officialprblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here..." type="text" />
<input type="hidden" value="officialprblog" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="pr-blogger-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<style class="text/css">
table
{
border-bottom: 0px solid #E6E6E6;
float: center;
width: 300px;
margin:10px 0 0 15px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alphaundefinedopacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alphaundefinedopacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/officialprblog" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2x6_rhhT8RmsIRy5Z9cmuaskzN7qnm19OBxgTWrHH0ElB-LpwY0Pl_EWKFW7dYo881V-rmhrqSTyLLN5ZxXB6tV8RzuF7e0fV-kW08-BZnzckFyBkPeKSNjQopFrzzNWJxiwyK8HvXrHu/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/officialprblog" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4CwbY27U_6deoKJL_FB81Jysm634O_TrcxovprQ8Mc1EJe6iHJuyQwGkOMvwbNm0tQ620MSN_9gp8n1JJfar7yaaCANAFX75lxc3QADhLqYm1tgtLz8oZ7JCJWCS_nquXY9dSU6vM9IYb/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/officialprblog" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ6ZR4Hb6zUspmjuVDwDJ_fKxqV0MJR6DandF-v2Eng7pKJNCTP-9f8O09vIvJNbVI6Kd44ndrU8gzWq9elDJjMD2gRnQrca_OuKocvCRwMABnw4bwzSJf9Ay_szFw30-0beD79akc8PwF/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/100909307322622789154/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFz7dxbfZZSr_0ijU-ZVmeCKVCsy_ow7O1BJQGHfYbDLeqGq_tTvkIZXOLhwoZiW7Q78EkC1bzx7-yrmoIAuh6XnxQFl2rAtvDMoVp1NG0anx8kmoyczL_gY64XxyivPfK-YpKrg7T441i/s1600/google-48.png" /></a></td>
</tr></table>
</div>

1. Replace http://feeds.feedburner.com/officialprblog with your Feedburner url.
2. Replace uri=officialprblogs with uri="your feed value"
3. Replace value="officialprblog" with value="your feed value"
4. Replace http://www.facebook.com/officialprblog with your Facebook fan page url.
5. Replace http://twitter.com/officialprblog with your Twitter Page.
6. Replace http://feeds.feedburner.com/officialprblog with your Feed Url.
7. Replace https://plus.google.com/100909307322622789154/posts with the url of Google plus page for your blog.