In this post, I will show you how to add a beautiful Email Subscription box above every post.
An All In One Email Subscription Box With Social Sharing Buttons For Blogger - See more at: http://genuineonlineearnings.blogspot.com/2015/02/an-all-in-one-email-subscription-box-with-social-sharing-buttons-for-blogger.html#sthash.eFRJADil.dpuf
Popup Email Subscription Box With JQuery
1. First of all
go to Blogger dashboard, click on the arrow pointing downward on the right upper corner of the page and select Template.
2. Now click on Edit HTML. An HTML document of your blog will be opened. Now search for <head> and paste the following code above <head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Click on Save Template.
Note:
If you have already placed this code in your HTML document before, then there is no need to put it again.
3. Now go to Layout and click on Add a Gadget. Select HTML/JavaScript from the list and add the following code in it:
<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#620001), to(#620001));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #620001, #620001)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div id='mbt-sub-box'><h1>Subscribe To Get FREE Blogging Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/jiPcI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='blogspot/jiPcI'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#620001), to(#620001));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #620001, #620001)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div id='mbt-sub-box'><h1>Subscribe To Get FREE Blogging Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/jiPcI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='blogspot/jiPcI'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>
4. Replace blogspot/jiPcI with your feed username. (To learn all about blog feed, read my post How to Setup Feedburner Feed and Email Subscription for your blog
How to Setup Feedburner Feed and Email Subscription for your blog - See more at: http://genuineonlineearnings.blogspot.com/#sthash.4SlMKzIc.dpuf
How to Setup Feedburner Feed and Email Subscription for your blog - See more at: http://genuineonlineearnings.blogspot.com/#sthash.4SlMKzIc.dpuf
5. Replace Subscribe To Get FREE Blogging Tutorials with your own words.
6. Click on Save. Now by using drag and drop option on the layout page, place the widget above the Blog Posts.
Check your blog and you will see a beautiful Email Subscription box above every post.
An All In One Email Subscription Box With Social Sharing Buttons For Blogger
An All In One Email Subscription Box With Social Sharing Buttons For Blogger
You also want to read: How To Add Static Vertical Social Media Sharing Widget In Blogger
How To Add Static Verticle Social Sharing Widget In Blogger - See more at: http://genuineonlineearnings.blogspot.com/2015/02/how-to-add-static-verticle-social-Sharing-Widget-In-Blogger.html#sthash.5gqF5rfj.dpuf
How To Add Static Verticle Social Sharing Widget In Blogger - See more at: http://genuineonlineearnings.blogspot.com/2015/02/how-to-add-static-verticle-social-Sharing-Widget-In-Blogger.html#sthash.5gqF5rfj.dpuf
How To Add Static Verticle Social Sharing Widget In Blogger - See more at: http://genuineonlineearnings.blogspot.com/2015/02/how-to-add-static-verticle-social-Sharing-Widget-In-Blogger.html#sthash.5gqF5rfj.dpuf
How To Add Static Verticle Social Sharing Widget In Blogger - See more at: http://genuineonlineearnings.blogspot.com/2015/02/how-to-add-static-verticle-social-Sharing-Widget-In-Blogger.html#sthash.5gqF5rfj.dpuf
How To Add Static Verticle Social Sharing Widget In Blogger - See more at: http://genuineonlineearnings.blogspot.com/2015/02/how-to-add-static-verticle-social-Sharing-Widget-In-Blogger.html#sthash.5gqF5rfj.dpuf
How To Add Static Verticle Social Sharing Widget In Blogger - See more at: http://genuineonlineearnings.blogspot.com/2015/02/how-to-add-static-verticle-social-Sharing-Widget-In-Blogger.html#sthash.5gqF5rfj.dpuf
