How to Add Floating Subscription Form in Blogger Blogs

Knoji reviews products and up-and-coming brands we think you'll love. In certain cases, we may receive a commission from brands mentioned in our guides. Learn more.
Adding a floating subscribe widget to blogger, will appear on head section as a floating notification bar

Adding a floating subscription box or bar to blogger header is really so easy, you should add this to make it easy to find subscription box to your visitor, beside this it will give you an advantage of grabbing the attention of your visitors to subscribe widget.

When your visitors found a sum of useful content they look at the subscribe button but the problem is merely same with all of us, placing subscription box and widget in various column and spaces will take space and increases the site loading time. Floating bar gives you advantage from such problems, it will float with the scrolling so the visitors will be able to see it always.

From a couple of week my readers asking me about this problem, as always I try to come up with the most possible solutions to your problem, this subscription box is also one of the great solution of increasing subscribers to your blog. The subscription bar have the closing button if you don’t want to add this please don’t use any image at closing tab.

Let me tell you how to put a floating subscription form to your BlogSpot blogs-

First of all you would like to see the demo-

How to add this widget to your blogger blog-

1- First of all you need to login to your admin panel of blogger.

2- At the dashboard you can see the design tab click on it and go to EDIT HTML panel

3- Now find the HEAD tag using Ctrl & F - </head>

4- Download the code and install (Add) it just before/above the HEAD

5- Intentionally I have used .doc file, it have red color HTML you can modify it as per your blog’s suitability

6- Now save the template

7- In next step go to Design Tab and click on ADD A NEW GADGET

8- Add a HTML JAVA SCRIPT AND PUT THE FOLLOWING CODE AS GIVEN BELOW

<div id="topbar">

<a href="" onclick="closebar(); return false"><img src="http://www.jquery4u.com/demos/jsliderelatedpages/close_button.gif" border="0" /></a>

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR BLOG FEED TITLE HERE’, 'popupwindow', 'scrollbars=yes,eight=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:110px" name="email"/></p><input type="hidden" value="BLOG FEED TITLE HERE" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://number-1reviews.blogspot.com" target="_blank">Number 1 Reviews</a></p></form>

</div>

• To find this Blog feed title go to your feed burner account and click on the edit feed detail put only the title here

9- Don’t try to modify or change anything else except the RED COLOR TEXT

10- Now Save and see the changes

While you are please do not forget to leave your feedback i always love to listen you....

Happy Blogging!!

7 comments

sanaya kapoor
0
Posted on Jun 25, 2015
Guest
Posted on Oct 14, 2011
Roberta Baxter
0
Posted on Sep 14, 2011
Aditya Soni
0
Posted on Sep 7, 2011
JennyHeart
0
Posted on Sep 7, 2011
Roberta Baxter
0
Posted on Sep 7, 2011
lucia anna
0
Posted on Sep 6, 2011