Add a Stunning Email Subscribe Widget to Blogger

Add Stunning Email Subscription 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

  1. Blogger Dashboard > Template Edit HTML > and past given codes right after the <head>
  2. <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

  3. Go to Blogger Dashboard > Add a Gadget > HTML/JavaScript > and past below codes.
  4. <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/" target="_blank"> Get This Widget</a></div>

    Customization

    Replace the blue text with your own feedburner username.

Meet Our Blogger Community! JOIN NOW

Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind