Smart Popup Email Subscription Gadget For Blogger/Blogspot Blog

One of the important steps for building a successful blog is to have active engagement with the users and sending them the relevant emails with their favorite and interesting products and your new updates too.
But how to acquire emails of the users? Don’t worry we got you covered, just add a smart email subscription popup where the audience can enter their email ID’s and subscribe for your blog updates and products.
But if you are using free blog services from blogger.com that is a Blogspot blog then you won’t find any email subscription widgets. You have to edit the HTML and write a shortcode for email subscription, but we saved you such hassle of writing such code.

Since the widget we are providing is made from both CSS and HTML5 it won’t affect your loading speed. Just follow the below steps and you should be adding your own email subscription widget by the end of the article.

Step 1: Add CSS Code To Your Blog

  1. Go to Blogger.com > Login > Dashboard > Theme > Edit HTML
  1. Now press CTRL + F and you will get a search bar
  1. In the search bar type the below-given tag

]]></b:skin>

  1. Now press enter, the tag you searched for will be seen now just above the code paste the below given CSS Code

/***** Smart PopUp Email Subscription Form Colblog *****/

#popup-wrap .popup-button { background: #A1362A url(“http://2.bp.blogspot.com/-5BeaRyWo6FQ/Vc9zn8NV2oI/AAAAAAAADU0/tGTO9XGumUs/s1600/envelop.png”) no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 80px; left: 25px; position: fixed; width: 80px; z-index: 99999; }

#popup-wrap .popup-button:hover { background-color: #70261D; }

#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; }

#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }

#popup-wrap .popup-trigger { display: none; }

#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }

#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }

#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #cc6055; text-align: center; }

#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: “Century Gothic”, sans-serif; font-weight: bold; line-height: normal; }

#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }

#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }

#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }

#popup-wrap #mailbox,

#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: “Century Gothic”,sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }

#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }

#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }

#popup-wrap #subbutton:hover { background: #70261D; }

#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }

#popup-wrap .popup-form-close:after,

#popup-wrap .popup-form-close:before { content: ”; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }

#popup-wrap .popup-form-close:hover:after,

#popup-wrap .popup-form-close:hover:before { background: #70261D; }

#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }

Now we have added CSS code, now save the changes and revert back.
Step 2: Adding Subscription Box

  1. Go to Blogger.com > Login > Dashboard > Theme > Edit HTML
  1. Click CTRL + F and in the search bar type </body> and hit enter
  1. Just above the code paste the below given code

<div id=”popup-wrap”>

<!– Subscribe Trigger –>

<label class=’popup-button’ for=’popup-trigger’></label>

<!– Subscribe Content –>

<input class=’popup-trigger’ id=’popup-trigger’ type=’checkbox’/>

<div class=’popup-bg’>

<label class=’popup-bg-close’ for=’popup-trigger’ id=’popup-close’></label>

<div class=’popup-form’>

<label class=’popup-form-close’ for=’popup-trigger’ id=’popup-close’></label>

<div class=’popup-inner’>

<!– Opt-In Subscribe –>

<span class=”popup-title”>Subscribe Via Email</span>

<span class=”popup-content”>Subscribe to our newsletter to get the latest updates to your inbox. ;-)</span>

<br/><br/>

<form action=’http://feedburner.google.com/fb/a/mailverify’ id=’subscribe’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>

<input name=’uri’ type=’hidden’ value=’YOUR-FEEDBURNER-ID’/>

<input name=’loc’ type=’hidden’ value=’en_US’/>

<input id=’mailbox’ 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;}’ required=” type=’text’ value=’Enter your email…’/>

<input id=’subbutton’ title=” type=’submit’ value=’Sign up’/>

</form>

<br />

<span class=”popup-footer”>Your email address is safe with us!</span>

</div>

</div><!– .popup-form –>

</div><!– .popup-bg –>

</div><!– #popup-wrap →

Now if you observe the copied script closely you should be seeing the term “YOUR-FEEDBURNER-ID”

Replace the “YOUR-FEEDBURNER-ID” with your particular Feedburner ID, which is twice as per the code.
Then simply save the changes.

That’s it now your blog has an email subscription pop-up.
Note: Some of the themes don’t support the email subscription popup widget code we have provided, so change the theme for smart email subscription popup widget.

2 Comments on "Smart Popup Email Subscription Gadget For Blogger/Blogspot Blog"

  1. I like reading an article that will make men and women think. Also, many thanks for allowing for me to comment!|

  2. There are a few fascinating points in time on this page but I don’t know if these center to heart. There’s some validity but I am going to take hold opinion until I check into it further. Excellent article , thanks and we want much more! Included with FeedBurner likewise

Leave a comment

Your email address will not be published.


*