Grab 3 Custom Blogger Email Subscription Widgets

What's new today? Well, I have redesigned custom email subscription widgets for blogger and am decided to release some of them here. Recently, SB got several looks and styles, am not just contented so I keep changing some parts of the header, or the overall theme - today, this look is Official. And I am going to offer to you some of my coding experiments that worked well. Recently, I included this to the list of Top 5 Blog Tools for Building a Great Blog. Before I give it, let me tell you some tips on how to code your own:

• Don't start from scratch.
• Look for several coding tutorials and study them with interest.
• Copy those codes, and experiment on it - keep on tweaking, and you will know something your own from there.
• See? You did not start from scratch, but your created a unique idea from the existing one.

Excited for the code of the custom blogger email subscription widget?

This custom email subscription widget is powered by feedburner, if you don't have a feedburner account, better get one now.

3 simple and custom email subscription widgets:

Green - the main theme of SB #347235

<style>
.sbsubscription{
width: 300px;
float: left;
}
.sbsubscription .emailupdatesform{
margin: 15px 0 5px 5px;
width: 300px;
float: left;
}
.sbsubscription .emailupdatesform input.emailupdatesinput{
background: #fff !important;
float: left;
border: 1px solid #347235;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
padding: 0px 8px 0px 8px;
color: #000000;
font-size: 12px;
height: 25px;
width: 185px;
}
.sbsubscription .emailupdatesform input.joinemailupdates{
background:#347235;
border: 1px solid #347235;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
text-transform: uppercase;
font:bold 12px arial;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
cursor:pointer;
}
</style>

<div class="sbsubscription-wrapper">
<div class="sbsubscription">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=thebloggingsolution', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email to subscribe..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email to subscribe...&#39;;}" onfocus="if (this.value == &#39;Enter your email to subscribe...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="TheBloggingSolution"; name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form>
</div></div></div>

This dark one, grey? #333 (Also a color theme for SB)

<style>
.sbsubscription{
width: 300px;
float: left;
}
.sbsubscription .emailupdatesform{
margin: 15px 0 5px 5px;
width: 300px;
float: left;
}
.sbsubscription .emailupdatesform input.emailupdatesinput{
background: #fff !important;
float: left;
border: 1px solid #333;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
padding: 0px 8px 0px 8px;
color: #000000;
font-size: 12px;
height: 25px;
width: 185px;
}
.sbsubscription .emailupdatesform input.joinemailupdates{
background:#333;
border: 1px solid #000;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
text-transform: uppercase;
font:bold 12px arial;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
cursor:pointer;
}
</style>

<div class="sbsubscription-wrapper">
<div class="sbsubscription">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=thebloggingsolution', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email to subscribe..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email to subscribe...&#39;;}" onfocus="if (this.value == &#39;Enter your email to subscribe...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="TheBloggingSolution" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form>
</div></div></div>

Well, Facebook Color!

<style>
.sbsubscription{
width: 300px;
float: left;
}
.sbsubscription .emailupdatesform{
margin: 15px 0 5px 5px;
width: 300px;
float: left;
}
.sbsubscription .emailupdatesform input.emailupdatesinput{
background: #fff !important;
float: left;
border: 1px solid #3b5999;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
padding: 0px 8px 0px 8px;
color: #000000;
font-size: 12px;
height: 25px;
width: 185px;
}
.sbsubscription .emailupdatesform input.joinemailupdates{
background:#3b5999;
border: 1px solid #333;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
text-transform: uppercase;
font:bold 12px arial;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
cursor:pointer;
}
</style>

<div class="sbsubscription-wrapper">
<div class="sbsubscription">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=thebloggingsolution', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email to subscribe..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email to subscribe...&#39;;}" onfocus="if (this.value == &#39;Enter your email to subscribe...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="TheBloggingSolution" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form>
</div></div></div>

Will they work as expected?

You can conveniently test them without putting it to your blog or any test blog. You can use w3schools HTML editor.

Final Step - make it your own!

Edit the code highlighted in green with yours. How? Log-in to your feedburner account, go to publicize, then Email Subscriptions and find yours, it's the title of your feedburner account.

Any question? Feel free to ask. See you :)

Posted by Editorial Team on 6/20/2012 08:00:00 PM in Custom Email Subscription Widget