Adding Email Subscription Box to blogger
Now For Adding this box to blogger you don't need to spend money just follow below steps-
- Go To Blogger Dashboard
- Click On Layout Tab
- Now Click On Add Gadget>>HTML/JavaScript
- Paste below code there
<div class="subscribe_outer"> <div class="subscribe_wrapper"> <h5>Subscribe Via Email</h5> <p>Enter your email to get free Updates of Lord HTML</p> <div id="btntEmailsub"> <form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/ mailverify?uri=lordhtml', 'popupwindow', 'scrollbars=yes,width=300, height=520');return true" method="post" action="http://feedburner. google.com/fb/a/mailverify"> <input type="hidden" value="lordhtml" name="uri" /> <input type="hidden" value="en_US" name="loc" /> <input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter your email...") {this.value="" }" onblur="if (this.value == " ") {this.value="enter your email..." ;}" name="email" /> <input class="emailButton" type="submit" value="Signup Now! (FREE)" title="" /> </form> </div> </div> </div> <style> .subscribe_outer { background: url("http://i1203.photobucket. com/albums/bb382/chandeep10/ btnt-custom-theme/color- chronicl.gif") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; } body { color: #272727; font-family: Georgia,"Times New Roman",Times,serif; } body { color: #272727; font-family: Georgia,"Times New Roman",Times,serif; } .sidebar .subscribe_wrapper h5 { color: #FFFFFF; } .sidebar h5 { color: #272727; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-size: 15px; font-weight: normal; padding: 4px 0 10px; } h5, h6 { letter-spacing: 2px; text-transform: uppercase; } .sidebar .subscribe_wrapper h5 { color: #FFFFFF; } .sidebar h5 { color: #272727; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-size: 15px; font-weight: normal; padding: 4px 0 10px; } h5, h6 { letter-spacing: 2px; text-transform: uppercase; } .subscribe_wrapper { background: url("http://i1203.photobucket. com/albums/bb382/chandeep10/ btnt-custom-theme/pattern- chronicl.png") repeat scroll 0 0 #333333; color: #CCCCCC; font-size: 14px; line-height: 20px; padding: 38px 50px 18px 38px; } .emailButton { background:#249334; border: 0 none; border-radius: 4px 4px 4px 4px; color: #FFFFFF; cursor: pointer; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); width: 100%; } .emailText { background: url("http://i1203.photobucket. com/albums/bb382/chandeep10/ btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF; border: 0 none; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset; color: #444444; padding: 10px 40px; margin: 0 0 15px; text-decoration: none; width: 70%; } input, textarea { font-family: Georgia,"Times New Roman",Times,serif; } .subscribe_wrapper { color: #CCCCCC; font-size: 14px; line-height: 20px; } .post-body .emailButton { width: 300px; } .emailButton { background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent; border: 0 none; border-radius: 4px 4px 4px 4px; color: #FFFFFF; cursor: pointer; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); width: 100%; } </style>
Customization
Now you need to replace lordhtml with your own username which you will find in line 7 and 8