Add a Stunning Email Subscribe Widget to Blogger

Email subscription form lets your blog readers read your latest blogs updates through their subscribed email inbox. As i have already discussed the benefits of adding an email subscription widgets in my recent post CSS3 Email Subscribe Widget for Blogger and i showed you how to add it in your blogger. Today I will show you an amazing email subscription widget with boxes name and email. This is really a nice and professional email subscription widget.

Check out: How to Add Google Feedburner Email Subscribe Widget to Blogger

Adding Email Subscription Widget to Your Blogger

Blogger Dashboard > Template Edit HTML > and past given codes right after the <head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

If font awesome is already installed to your blogger template then skip the first step and follow the next steps

Go to Blogger Dashboard > Add a Gadget > HTML/JavaScript > and past below codes.

<style type='text/css'> #subscribe-box {background-color:#FFA07A;font-family: 'PT Sans', sans-serif; color:#8B0000; border:#858585 dashed 2px } #subscribe-box p {font-size:22px;color:#8B0000;line-height:20px;padding:10px 20px 0 20px;margin:0;} #subscribe-box .emailfield {padding:0px 20px 10px;} #subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;} #subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} .creadit a{color: #A7A6A6; float: right; font-size: 8px </style> <div id="subscribe-box"> <center> Get our Latest Updates Right Straight to Your Inbox</center> <div class="emailfield"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=knigulper" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=knigulper, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" /> <input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email" /> <input name="uri" type="hidden" value="knigulper" /><input name="loc" type="hidden" value="en_US" /> <input class="submitbutton" type="submit" value="Subscribe Now" /> </form> </div> </div> <div class="creadit"> <a href="/" target="_blank"> Get This Widget</a></div>

Customization

Replace the blue text with your own feedburner username.