Pop Up Email Subscription Widget For Blogger:

Widget Name: Pop Up Email Subscription Form Using Jquery

About this widget:  This is a blogger widget using Jquery. In this widget  subscription form is created by CSS3 with a auto check feature and the pop up is created using jQuery.
I hope that your blog readers will increase with the help of this widget .
    Now we are going to train you how to Add Pop Up Email Subscription Form For Your blogger.
But first you need to add JQuery Plugin To your Template.

How to add JQuery Plugin To The Template: 
Whole widget is based on jQuery plugin, So we need jQuery plug in to be existed in your blogger template.

This Step is very important, you can ignore this step, If your Blog is already have this plugin.Suppose If your blog don’t have this Plugin, then install the jQuery plugin.

Add the following code before closing head tag in your template.

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

  • First you need to login to your blogger
  • Then Go to blogger Dashboard > Layout
  • Then clck on  Add A Gadget, then choose HTML/JavaScript
  • Paste the below code inside it

<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(http://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; }



<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('http://feedburner.google.com/fb/a/mailverify?uri=UsefulInfo', '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="UsefulInfo" /><input name="loc" type="hidden" value="en_US" />

<div class="button">

<input type="submit" value="Subscribe" /></div>



<div class="btntFollowFooter">

Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://usefullinf.blogspot.com/" rel="dofollow" target="_blank">blogtipsntricks</a></div>


<script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript">


<script type="text/javascript">

jQuery(function ($) {

    // Load dialog on page load


    // Load dialog on click

    $('#subscribe-button .subscribe').click(function (e) {


        return false;




  • Now Click on Save Button To Add This Widget in Your Blogger.
  • Change The User Name Of Feedburner with your own username which is highlighted in red colour in above code UsefulInfo

Post a Comment