How To Add Cool Hover Subscription Box Every Post For Blogger

Subscription box are important to those people who have website nor blog to increase there subscribers and it allows to get latest updates from your blog or websites directly to their inbox. So in order to increase your subscribers and visitors you should place a email subscription widget somewhere in your blog. I highly recommend to put this widget under your blog posts. Before adding this Subscription box to your blog/ website, make sure you have a Feedburner account and other social media accounts.

Stylish Subscription Box

[button link=”http://bloggerherodemo.blogspot.com/p/subscribebackground0d0-urlhttp4.html#_” type=”big” newwindow=”yes”] LIVE DEMO[/button] 

How To Add This Box To Blogger

Now First we will add the CSS Code in Blogger Template so follow my Simple below Instruction.

  • Login to Blogger  >> Click on drop down menu >>then select “Template“.
  • Now you will see  “EDIT HTMLButton ,Click on it >>  and then click Proceed button .
  • Now find this tag </head> by using CTRL + F
  • Paste below code Just Before/above </head> tag
<link charset='utf-8' href="http://dl.dropbox.com/u/81212926/Bloggerheroe-subscribe-box.css" media='screen' rel="stylesheet" title='no title' type='text/css'/>

Email Subscribe CODE

Now we can  use below code to add Email Subscribe Box any where we want. you can add it as HTML WIDGET in blogger layout,But i will  Recommend You to add below Email Subscribe Box code to Template.

  • Just Find below Code in our Template .
<data:post.body/>
  • Just below/after the <data:post.body/>, Paste the code below:
<!-- / Cool Hover Subscription Box by: www.bloggerheroe.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='TWSubscribe'>
<p class='headline'>Subscribe Updates, Its FREE!</p>
<span class='Arrow'/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloggerheroe&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <table><tr><td><input class='Text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email&quot;;}' onfocus='if (this.value == &quot;Enter Your Email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter Your Email'/> <input name='uri' type='hidden' value='bloggerheroe'/><input name='loc' type='hidden' value='en_US'/></td><td><input class='Button' type='submit' value='Subscribe Now'/></td></tr></table></form>
</div></b:if>
<!-- /End  Cool Hover Subscription Box by: www.bloggerheroe.com -->

Make This Changes

  • Bloggerheroe – Replace this with your feed title. You should also see this at the end of your subscription link url. Mine is Bloggerheroe as seen in this link: http://feedburner.google.com/fb/a/mailverify?uri=Bloggerheroe

That’s it you have a very cool email subscribe section below you blog posts.

I hope you enjoyed this tutorial! Looking forward for your feedback, feel free to add your comment. Thanks! Happy Blogging:)

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Comments

  1. Gagan Masoun says:

    Great work buddy, I have subscribe your blog. Don’t wanna miss future articles.. 🙂

    Regards
    Blogs Daddy

  2. adrian lucernas says:

    @Gagan Masoun Thank you mate, just stay with us for the latest updates..:)

  3. Hemant Verma says:

    nice to have it

    What is an Entrepreneur?

    Thanks and Regards,
    Hemant Verma

  4. Kim Hoa says:

    This comment has been removed by a blog administrator.

  5. This comment has been removed by a blog administrator.

  6. may mass says:

    Thanks for the addition to my blog argoziarh and beautiful thanks
    http://bilokr.blogspot.com/

  7. Tharun Raj says:

    nice post HOW TO KNOW IF SOMEONE ACCESSED YOU COMPUTER

Speak Your Mind

*


*