CSS3 Email Subscribe Widget for Blogger

CSS3 Email Subscribe Widget
A subscription form lets your subscribed readers to conveniently read your latest blog posts and they are very popular in electronic communications. Newsletters are published by Bloggers, clubs, societies, associations, and businesses—especially companies to provide information of interest to members, customers, or employees. 
Email Subscribe Widget for Blogger is a blogger widget that brings a vast number of visitors on your blog. Visitors are subscribe in your blog by put their email and they always get your new updates delivered right through into their email inbox. Email subscription form is simply called an Informer because when you publish a new post on your blog, it instantly delivers the new published post in a subscriber's mail box. This subscription form has been created with css3. You can freely customize this widget that suits with your blog.
By adding this widget, you can easily increase your blog readers. It's a better way for increase blog readers. Now lets start the tutorial.

Read Also: Awesome Pop up Email Subscription box for Blogger

How to Add Email Subscribe Widget for 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'/>
Step 2: Go to Blogger Dashboard  > Layout > Add a Gadget > HTML/JavaScript and past below codes.
<style type='text/css'>
#subscribebox{background:#7fb1d1;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.welcome-text ul{list-style:none;margin:0;padding:0;text-align:center}
.welcome-text ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.welcome-text ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.welcome-text ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
</style>
<div id="subscribebox">
<div class="welcome-text">
<ul>
<li><font color="#FFFFFF"><span style="font-style:italic;">Get our fresh tutorials delivered right through into your inbox</span></font></li>
</ul>
</div>
<p>Subscribe to Our Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=blogspot/knigulper
' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/knigulper
, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogspot/knigulper'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' 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;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
If you have already installed the bootstrapcdn font-awesome and Google Sans font-family, then simply skip the Step 1.
Note: Before you insert this piece of code, replace the blogspot/knigulper with your feedburner username.

Step 3: Click Save

Customization:
#subscribebox{background: Add the background color that suits your blog.
#subscribebox p:                    Add the text color code
border-bottom:                      Add the bottom border color and border style
.welcome-text ul li a:             Change the color on mouse hover

Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind