- 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 == '') {this.value = 'Enter your email to subscribe...';}" onfocus="if (this.value == 'Enter your email to subscribe...') {this.value = '';}" 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 == '') {this.value = 'Enter your email to subscribe...';}" onfocus="if (this.value == 'Enter your email to subscribe...') {this.value = '';}" 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 == '') {this.value = 'Enter your email to subscribe...';}" onfocus="if (this.value == 'Enter your email to subscribe...') {this.value = '';}" 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 :)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
