Advanced Email Subscription Widget For Blogger

Views

E-mail Subscription allows your valued readers get fresh updates directly from their inbox. This E-mail subscription is powered by FEEDBURNER so, if you wish to offer an email subscription for your site/blog get your feed burned here & create a RSS account to take advantage of this Subscription Widget. We call it widget cause what you would do on the installation of this is just a simple copy & paste, yes… no more tweaking, just your FEEDBURNER ID needed. I would like to mention the designer of this form but I really forgot the link (Too Bad…) – so if you came across on my site, let me know I would loved to add the credit for your awesome design. Moving forward, This widget is originally created & optimized by me and right now one color is the only available but I will add  more different variant of colors on my next post. I hope you will appreciate the little hard work I put into on making this compatible  & possible on blogger. Something Unique?  is the safe & secured thing below the widget that added a little bit more advanced look. We have two ways of installing this First, adding it on your sidebar Second, adding it below your every post. I made two options since I thought maybe some of you wanted this below your every post. So, lets get started & add this widget in your site.

LIVE DEMO

ADDING THE SUBSCRIPTION WIDGET ON THE SIDEBAR

• Blogger dashboard
• Layout
• Add a gadget
• Choose HTML/JAVASCRIPT
• And add this subscription code

/*THE YELLOW BULB EMAIL SUBSCRIPTION START*/
<style type='text/css'>
.tybform
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE57tjq0vP3OCZRzuxPoFwSJ9ybMp1CjT8UZone_rzX82pVrRUNiyeZ_Wah544Jc2BhUVwWQ0c9GAhYkHXoa6KoEkBcgoJCTgB_6_UDNlRdQnnQhwWOWkOnpPYdR7SFz6ghLjJaeIvV6I/s1600/inputform.png) no-repeat;
width: 200px;
height: 30px;
margin: 130px 10px 0px 50px;
padding: 0px 0px 0px 10px;
font-size: 14px;
font-weight: bolder;
text-shadow:2px 2px 6px #999999;
border: 0;
}
.tybsubmit
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMkf1MHnxPKiQLZipILVN6ZKDcjcXFHTVugtVhKVSFuuXq_g0KB3gqWKO0I9I3M-oBVcNgrsJeh0yrKw_2JkAWXfgbSgG4VU1BxxSYhf2ANjmv9gQ0swQoyuouK_rTN7mXBbRpWLbM2kM/s1600/subscription+form+submit.png)no-repeat;
width: 107px;
height: 44px;
border: 0;
float: right;
margin: 20px 40px 0px 0px;
cursor: pointer;
}
#emailsubs
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs6ADJOt6nf0fLueHMEzzmIZ7MUvB9nlvULNY8DnjJ0EtWHVI9QWrL01Ma2NAPD_Hv2RWLBAog7KcFR17Gm5gAyrN1PRycBwrH27gf1qj4pQYkjHYKrDeidozbHEj7wgYdqSTwzUyu5RE/s1600/subscription+form.png)no-repeat;
width: 320px;
height: 273px;
}
</style>
<div id='emailsubs'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=TheYellowBulb&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='TheYellowBulb'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='tybform' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='tybsubmit' title='' type='submit' value=''/>
</form></div>
/*THE YELLOW BULB EMAIL SUBSCRIPTION END*/

ADDING THE E-MAIL SUBSCRIPTION BELOW YOUR EVERY POST

• Blogger dashboard
• Template
• Edit HTML
• Proceed
• Click “Expand Widget Template”
• Press CTRL+F for search shortcut
• And Locate this piece of a code

]]></b:skin>

• And exactly above/before that add our subscription style

/*THE YELLOW BULB EMAIL SUBSCRIPTION START*/
.tybform
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE57tjq0vP3OCZRzuxPoFwSJ9ybMp1CjT8UZone_rzX82pVrRUNiyeZ_Wah544Jc2BhUVwWQ0c9GAhYkHXoa6KoEkBcgoJCTgB_6_UDNlRdQnnQhwWOWkOnpPYdR7SFz6ghLjJaeIvV6I/s1600/inputform.png) no-repeat;
width: 200px;
height: 30px;
margin: 130px 10px 0px 50px;
padding: 0px 0px 0px 10px;
font-size: 14px;
font-weight: bolder;
text-shadow:2px 2px 6px #999999;
border: 0;
}
.tybsubmit
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMkf1MHnxPKiQLZipILVN6ZKDcjcXFHTVugtVhKVSFuuXq_g0KB3gqWKO0I9I3M-oBVcNgrsJeh0yrKw_2JkAWXfgbSgG4VU1BxxSYhf2ANjmv9gQ0swQoyuouK_rTN7mXBbRpWLbM2kM/s1600/subscription+form+submit.png)no-repeat;
width: 107px;
height: 44px;
border: 0;
float: right;
margin: 20px 40px 0px 0px;
cursor: pointer;
}
#emailsubs
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs6ADJOt6nf0fLueHMEzzmIZ7MUvB9nlvULNY8DnjJ0EtWHVI9QWrL01Ma2NAPD_Hv2RWLBAog7KcFR17Gm5gAyrN1PRycBwrH27gf1qj4pQYkjHYKrDeidozbHEj7wgYdqSTwzUyu5RE/s1600/subscription+form.png)no-repeat;
width: 320px;
height: 273px;
}
/*THE YELLOW BULB EMAIL SUBSCRIPTION END*/

• Next, Locate this code on your search box

<data:post.body/>

NOTE: IF YOU FOUND TWO OR THREE OCCURENCES OF THIS CODE, PLACE IT ON THE SECOND ONE

• If you successfully located the code, add this below/after it.

<div id='emailsubs'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=TheYellowBulb&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='TheYellowBulb'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='tybform' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='tybsubmit' title='' type='submit' value=''/>
</form></div>

CUSTOMIZING YOUR SUBSCRIPTION FORM

• Don’t forget to replace the Bolded Blue RSS ID above to your own ID.

YOU CAN NOW SAVE YOUR TEMPLATE

• I hope this works perfectly on your site too.

ARE YOU CONFUSED REGARDING THIS TUTORIAL?

• If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.