AllTrickyTips: HOW TO ADD EMAIL SUBCRICPTION WIDGET ON BLOGGER BLOG

Email subcription plays an important role to make a blog big and famous. So i am back with a trick on HOW TO ADD EMAIL SUBCRIPTION WIDGET IN A BLOGGER BLOG...

There are many types of such widgets but I choosed the one which is showed in the pic as it looks professional and your visitors get attract towards it.. The one with the button GET INSTANT ACCESS looks perfect..

So let me start the tutorial

HOW TO ADD EMAIL SUBSCRIPTION WIDGET IN BLOGGER

Go to Blogger Dashboard

Click on LAYOUT

Click on ADD GADGET where you want to add this widget

Click on HTML/JAVASCRIPT

Copy the below given code and paste it there

   <style>
#AllTrickyTips-FeedBurner {
background: #E8E8E8;
border: 1px solid #CCCCCC;
padding: 15px 0;
text-align: center;
width: 298px;
}
#AllTrickyTips-FeedBurner input[type="text"] {
border: 1px solid #BBBBBB;
font-size: 13px;
margin: 0 0 15px 0;
padding: 10px;
width: 80%;
color:#888;
}
#AllTrickyTips-FeedBurner input {
box-shadow: 0 2px 2px #BBBBBB;
-moz-box-shadow: 0 2px 2px #BBBBBB;
-webkit-box-shadow: 0 2px 2px #BBBBBB;
}
#name {
background: url(http://i.imgur.com/XrHTe.png) no-repeat scroll right center #FFFFFF;
}
#email {
background: url(http://i.imgur.com/2BCD0.png) no-repeat scroll right center #FFFFFF;
}
#AllTrickyTips-FeedBurner input[type="submit"] {
background: #3B8DBD;
border: 1px solid #005588;
color: #FFFFFF;
cursor: pointer;
font-size: 16px;
font-weight: bold;
height: 40px;
margin-top: 5px;
padding: 8px 0;
text-transform: capitalize;
width: 87%;
}
#AllTrickyTips-FeedBurner input[type="submit"]:hover {
background: none repeat scroll 0 0 #005588;
}
</style>
<!-- AllTrickyTips FeedBurner Subscription Form -->
<div id="AllTrickyTips-FeedBurner">
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Alltrickytips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" name="uri" value="Alltrickytips" /><input type="hidden" value="en_US" name="loc" />
<input type="text" id="name" name="name" onfocus="this.value=''" value="Enter Your Name" placeholder="Enter Your Name" />
<input type="text" id="email" name="email" onfocus="this.value=''" value="Enter Your Email Address" placeholder="Enter Your Email Address" />
<input type="submit" value="Get Instant Access" id="submit" name="submit" />
</form>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">
[<a href="http://alltrickytips.blogspot.in/2014/05/How-to-Add-vertical-social-sharing-buttons-on-blogger-blog.html">Get Widget</a>]<font></font></div>

Thats all . You have successfully added the widget in your blog

CHECK MY OTHER ARTICLES ALSO

TOP 3 APPS TO EARN MONEY FROM YOUR ANDROID MOBILE

HOW TO ADD VERTICAL SOCIAL SHARING BUTTON ON BLOGGER

HOW TO FIX GOOGLE PLAY STORE ERROR 492