expr:class='"loading" + data:blog.mobileClass'>

SUBSCRIBE HERE

Subscribe To Get FREE Blogging Tutorials, Seo Tips, Genuine Earning Methods and Much More...!

Get Noticed!

February 06, 2015

SEO Tips: Add Email Subscription Box Above Every Post

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
Email Subscription Box


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 == &quot;item&quot;'>
<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/jiPcI&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' 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   

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

20 comments:

  1. Thanks for the HTML and JavaScript coding to add the E-mail subscription box. Very informative post to learn this specified details.

    best e-commerce service provider | best web site developer

    ReplyDelete


  2. What an awesome post, I just read it from start to end. Learned something new after a long time.


    SAP FICO Training in Chennai

    ReplyDelete
  3. Thanks for provide great informatic and looking beautiful blog, really nice required information & the things i never imagined and i would request, wright more blog and blog post like that for us. Thanks you once agian
    we offer services birth certificate in delhi which inculde name add in birth certificate and birth certificate correction complete process is online and we offer birth certificate onlineand we offer this birth certificate apply online same service offers at yourdoorstep at birth certificate in ghaziabad our dream to provide birth certificate in india and other staes like birth certificate in bengaluru and birth certificate in gurgaon book service with us birth certificate in noida also, service at yoursdoorstep only.

    ReplyDelete
  4. "Thanks for provide great informatic and looking beautiful blog, really nice required information & the things i never imagined and i would request, wright more blog and blog post like that for us. Thanks you once agian

    Free Classified in India"

    ReplyDelete

If you like this post, then share it on:

CSS Drop Down Menu
Blogger Widgets

Recent Comments

Recent Comments Widget

About The Auther

Muhammad Junaid Khalid is a proud Muslim and a Pakistani, Chemical Engineer and a totally self made blogger, learn blogging of his own, that's why know all the hurdles which the beginner bloggers mostly face and ...Read More