How To Add Cool Hover Subscription Box Every Post For Blogger

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

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:

<b:if cond='data:blog.pageType == "item"'>
<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('http://feedburner.google.com/fb/a/mailverify?uri=bloggerheroe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <table><tr><td><input class='Text' name='email' onblur='if (this.value == "") {this.value = "Enter Your Email";}' onfocus='if (this.value == "Enter Your Email") {this.value = "";}' 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>

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:)

BLOGGER HEROE RECOMMENDED AMAZINGLY BEAUTIFUL WORDPRESS THEMES

Like the Post? Do share with your Friends.

Posted By:Adrian LucernasAdministrator

Adrian Lucernas is the founder of Blogger Heroe. Who's planning to take up Computer Science to enhance his knowledge and passion when it comes in blogging, And his appreciation about our technology. He is open minded who's willing to explore beyond his knowledge, And God is the center of his being. Enjoy exploring Blogger Heroe.