Add Stunning Email Subscription Widget to Blogger

Add Stunning Email Subscription Widget to Blogger
Email subscription form let's your blog readers to 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.


Adding Email Subscription Widget to Your Blogger

Step 1:  Go to Blogger Dashboard  > Template > Edit HTML and past below codes right after <head> tag. 

<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 this is already installed in your blogger template then skip the step one and follow the step no. 2.

Step 2: Go to Blogger Dashboard  > Layout > 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 == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" 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="http://knigulper.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>


Customization
Note: Replace the blue text with your own feedburner username.
Change the bold color codes that suits to your blog or let it be.

Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind