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.

VIEW LIVE DEMO

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 HTML" Button ,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:)

Share it Please

Tweet