How to add Subscribe us Pop up form in Blogger?

How to add Subscribe us Pop up form in Blogger?

WordPress users have always enjoy an edge on Blogger users. They have a ton of plugins, themes and a SEO optimised structure for their blogs where Blogger users have nothing like this. They have to optimize their Blog on their own for SEO and neither they can enjoy the benefit of those Plugins which WordPress users can.

One of the major things Blogger users missed is Subscribe us Pop Up forms. When I was working on my blog which was hosted on Blogger I found that my chances to make my blog a Problog are very low because of the limitation blogger have. I wasn’t able to find a decent template for my blog and subscribe us form were also not there.

Plus, I wasn’t able to get some SEO support because Blogger didn’t had any plugin for that, no opt-in forms, no attracting subscription forms and the last thing which convinced me to switch to WordPress was the fact that I wasn’t able to install a Pop-Up Subscribe us form to my Blog.

Read this to know how to make your Blogger template SEO friendly

I searched a lot about it but unfortunately I wasn’t able to get those results which I was searching. But a few days ago I found a useful resource from Mr. Chandeep(Blogger @ Blogtipsntricks) to install an attracting Pop up subscribe us form to blogger blogs.

I loved that resource therefore I decided to share it with you guys.

So how will your new Pop up form will look like?

Here is an image of that:

Pop Up Email Subscription Form

But before sharing all the steps from which you can install this awesome pop up form I will like to give you the opportunity to have a Live Demo.

Just reach the page which is shared below and click on the mail image as shown in the image below:

blogger subscribe us pop up 2

Click here for the Live Demo

So did you watch it? It looks great right?

I am sure that if you are a blogger user then you are becoming greedy to grab this Pop up form. Well, have patience because installing this form won’t be a difficult job to do.

But for your ease I will divide all the work in few steps, So here we start 1,2,3…. Go!

Step 1: Letting Template know about the Form

The first thing you need to do is to let your template know about this new pop form which you are going to install. For this just head over to your template section. Blogger==>Your Blog==>Template==>Edit HTML

Now install this small code:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

Just before </head> tag section. Like this:

the blogger code for form

Step 2: Adding the Widget in your Layout

Now when your Template knows about your Pop up form it will automatically search for it in your widget or gadget area. All you need to do is to visit your Blog’s layout section.

Blogger==>Your Blog==>Layout

Now click on Add a new Gadget button and select HTML/JavaScript html

 

And add this code in the content area.

<style type=”text/css”>
#subscribe-button { float: left; position: fixed; bottom: 5%; left: 0; z-index: 999; }
#subscribe-widget { display:none; }
/* Overlay */
#btnt-overlay { background-color:#000; }
/* Container */
#btnt-container { min-height:350px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }
#btnt-container .btnt-data { padding:8px; }
#btnt-container a.btntCloseImg { background:url(https://3.bp.blogspot.com/-V2A37T0PQ24/U3IuYpfg4DI/AAAAAAAAC_8/YzHEp7rFzSc/s1600/close.PNG) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#btntfollowForm { padding: 15px; }
#btntfollowForm p { margin: 0 0 10px; }
#btntfollowForm input:not([type=”checkbox”]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#btntfollowForm input:not([type=”checkbox”]):active,
#btntfollowForm input:not([type=”checkbox”]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: ‘Arial Narrow’,Arial,sans-serif;   font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }
<!–[if lt IE 7]>
#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://3.bp.blogspot.com/-V2A37T0PQ24/U3IuYpfg4DI/AAAAAAAAC_8/YzHEp7rFzSc/s1600/close.PNG’,sizingMethod=’scale’); }
#btntfollowForm  input{ padding: 10px 5px 10px 32px; width: 93%; }
#btntfollowForm  input[type=checkbox]{ width: 10px; padding: 0; }
<![endif]–>
</style>
<div id=”subscribe-button”>
<a class=”subscribe” href=”#”><img src=”http://3.bp.blogspot.com/-qY19_y5JjHo/U3Iv9Q8Wd-I/AAAAAAAADAQ/-ul9xWAsxFg/s1600/trigger-mail-icon.png” alt=”subscribe” /></a></div>
<div id=”subscribe-widget”>
<div id=”btntfollowForm”>
<img alt=”Subscribe” border=”0″ float=”center” src=”http://2.bp.blogspot.com/-74BRtm82chU/U3IkWoqLESI/AAAAAAAAC_k/Fl5GWfxK84o/s1600/Subscribe+Via+Email.PNG” />
<div id=’description’>
<img alt=”email” border=”0″ src=”http://1.bp.blogspot.com/-MtuD6J3TCkU/U3IlM3m2t_I/AAAAAAAAC_s/mT_YKzqTw54/s1600/Mail.PNG” />Subscribe to our mailing list to get the updates to your email inbox…</div>
<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” onsubmit=”window.open(‘<span style="color: #ff0000;">http://feedburner.google.com/fb/a/mailverify?uri=yourfeedburnerid</span>‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true” target=”popupwindow”>
<input name=”email” placeholder=”Enter Your Email…” required=”required” type=”text” /><input name=”uri” type=”hidden” value=”<span style="color: #ff0000;">yourfeedburnerusername</span>” /><input name=”loc” type=”hidden” value=”en_US” />
<div class=”button”>
<input type=”submit” value=”Subscribe” /></div>
</form>
</div>
<div class=”btntFollowFooter”>
Delivered by <a href=”http://feedburner.google.com/” target=”_blank”>FeedBurner</a> | powered by <a href=”https://articlesteller.com/” rel=”dofollow” target=”_blank”>Articles Teller</a></div>
</div>
<script src=”https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js” type=”text/javascript”>
</script>
<script type=”text/javascript”>
jQuery(function ($) {
// Load dialog on page load
//$(‘#subscribe-widget’).modal();

// Load dialog on click
$(‘#subscribe-button .subscribe’).click(function (e) {
$(‘#subscribe-widget’).modal();

return false;
});
});
</script>

Step 3: Entering your feedburner code

Now all the tough work is done and your Subscribe us Pop up form will appear on your Blog. But whenever someone will enter his email there to subscribe your newsletter, he will actually subscribe an invalid blog instead of yours because in the coding of the form I have entered a wrong feedburner ID.

So just head over to the code which is highlighted in red and replace “yourfeedburnerid” with your original feedburner Id. For instance search for this code “http://feedburner.google.com/fb/a/mailverify?uri=yourfeedburnerid” and follow the instructions given above.

Also replace the “value=yourfeedburnerusername” with your original username.

Note: If you don’t have a feedburner account then get one today for free by just visiting their homepage

Sign up and enter your blog details. In the end just get your feedburner ID and replace it with the invalid ID which is present in the code.

Follow my blog with Bloglovin

3 Comments

  1. Muhammad Bux June 22, 2016
  2. PTC NEWS October 3, 2017
  3. calfre20520 September 1, 2018

Leave a Reply