[adslot]
Email subscriptions forms and newsletters, let you gain readers for your blog. It is necessary that you make your email subscriptions form stand out and get maximum users subscribe to your newsletter. Google Feedburner is the free service which I use in DigitCodes which automatically sends newsletters whenever a new post is made on the blog. The HTML code which Feedburner provides as the email subscription form code is pretty basic without any kind of styling. So I had put some styling for it to make it more attractive and catchy for the readers to subscribe to the newsletter.
This is what I got after adding up the styling:
And the HTML code for it is :
<div class="subscribe_outer"> <div class="subscribe_wrapper"> <h5>Subscribe Via Email</h5> <p class="stext">Subscribe to our newsletter to get all the latest updates to your inbox..!</p> <div id="btntEmailsub"> <form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=[YOUR_FEED_NAME]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify"> <input type="hidden" value="[YOUR_FEED_NAME]" name="uri"> <input type="hidden" value="en_US" name="loc"> <input 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 type="submit" value="Signup Now!" title="" class="emailButton"><br/> </form> </div> </div> </div>
In the above HTML code you have to replace [YOUR_FEED_NAME] with your respective feeds name. Also include the CSS styling codes.
<style type="text/css"> .subscribe_outer { background: url("https://lh4.googleusercontent.com/-U20WZFj8zL0/ULc89cNr-wI/AAAAAAAAAAg/qiIrUOX0Bdk/s800/color-chronicl.gif") repeat scroll 0px 0px transparent; margin: 0px -10px;padding: 5px 0px; } .subscribe_wrapper { background: url("https://lh4.googleusercontent.com/-U20WZFj8zL0/ULc89cNr-wI/AAAAAAAAAAg/qiIrUOX0Bdk/s800/color-chronicl.gif") repeat scroll 0px 0px #333333;color: #CCCCCC;font-size: 14px;line-height: 20px;padding: 38px 50px 18px 38px; } .subscribe_wrapper:hover { box-shadow:0 0 8px #C5C5C5; transition-duration:0.5s; } .stext { color: #FFFFFF; } .sidebar .subscribe_wrapper h5,.subscribe_wrapper h5 { color:#FF4629; } #btntEmailsub { clear: both;display: block;margin: 10px 0px; } form.btntEmailform { clear: both;display: block;margin: 20px 0px 0px;width: auto; } .emailText { background: url("https://lh6.googleusercontent.com/-mrp8bAEiUas/ULc875mjBCI/AAAAAAAAAAY/ORduMx38cYI/s800/email.png") no-repeat scroll 10px center #FFFFFF;border-radius: 4px 4px 4px 4px;border: 0px none; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.05) inset; color: #444444;margin: 0px 0px 15px;padding: 10px 40px;text-decoration: none;width: 70%; } .emailButton { -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5); box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5); background: -moz-linear-gradient(19% 65% 90deg,#0087B4, #0099CC, #0099CC 51%); background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0087B4)); color:#f0f0f0;float:left; font-family:arial,helvetica,sans-serif;font-size:14px;font-weight:bold; text-shadow:0 1px 1px rgba(0, 0, 0, 0.5); border: 1px solid #267ed4;padding: 10px 40px; cursor: pointer; width:100%; } .emailButton:hover { background: -moz-linear-gradient(19% 65% 90deg,#0082AD, #0099CC, #0099CC 51%); background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0082AD)); color: #f1f1f1; }</style>
Hey, don’t forget to subscribe to the free newsletter of DigitCodes and get all the latest updates in your inbox. Subscribe Now..!
Hi Afsal,
Your blog looks good! Nice article & thanks for the share. Helpful!!
Hi, jesna. Thanks for dropping by.
it didnt give me the look as in your blog. pls help
Hmm.. I guess you have some of the styles already been defined in your blog or is getting overwritten. Try adding the css codes at the end of the stylesheet and check.
It did not work for me either (along with few others who have commented below). There is surely something missing in the code.
I tink am gona change the css class and see how it goes
It’s really cool.. But unfortunately I have a light background on my blog so I can’t use this one.
Hey that form is not working I think there is some problem in the CSS Code as its not showing the same look as the above subscription form.
it’s working thanks
it is difficulty to add the feed brnner in my website .
plz help me
Wow, Looking good, Best feed email box ever. Thanks. I am adding it !
simple but beautiful, gonna try it now. thnx 🙂
u should no-repeat the background
It looks great. Subscription help to retain blog readers.
Thanks for sharing.
Hi, I just try to use your tutorial in my blog : HijabTutorial.info, but the styling didn’t work well.. Would you like to tell me what should have I to do?
thanks
thanks for the html code, its far better then the default provided by google feedburner
Really write well. I was looking for this type of subscribe form. I will must apply it in my site. Thanks again.
Thank you very much, it helped a lot. Just a little CSS modification and anyone should have an awesome signup box.
Yes i use this for my blog. thanks
Hi, The code is not working and in my blog it is not showing any symptoms. What to do?
Thanks for this code and I’d appreciate you for this work!
i have not working in this blog http://www.apkmovies.com
Ya good article
I am a Chemical Engineering student. I know nothing about html or css. I want to add the newsletter form in my site gatechnpsu.blogspot.com . What did you mean by “In the above HTML code you have to replace [YOUR_FEED_NAME] with your respective feeds name.”
Can you please share some stylish subscribe box code ?