Auto Pop Email Subscription Widget for Blogger

Email subscribe Auto Pop Email subscription widget for Blogger blogs. A easy way to get more email subscribers. This widget subtly presents a popup for subscribing for Email updates just after a specific trigger element is scrolled through. This trigger element can be changed as per your requirements. By default it is set to the comment section. So when you scroll past the comment section of your blog it will popout from the top. You can add this widget into your blog via the widget generator or manually

Demo



Widget Generator





Or you can use the manual method


For that just copy the code from below
<style type='text/css'> /*<![CDATA[*/ #slider{     position:fixed;    top:-125px;    right:0px;    height:120px; width:100%;    background-color:#fff;    opacity:0.98;    -moz-box-shadow:    0px 0px 8px #ccc;    -webkit-box-shadow: 0px 0px 8px #ccc;    box-shadow:         0px 0px 8px #ccc;   }   .syb_footer{margin-top:-10px;font-size:0.8em;} #slider #slider-shell{    width:800px; height:110px;margin:10px auto;    position:relative;   }   #slider #slider-tab{position:absolute; bottom:0px; right:0px;    width:400px; text-align:right; padding-right:10px;    cursor:pointer; font-size:0.6em;   } #syb_embed_signup{ background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }#syb_embed_signup form {display:block; text-align:left; padding:10px 0 10px 3%}#syb_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}#syb_embed_signup input {border:1px solid #999; -webkit-appearance:none;}#syb_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}#syb_embed_signup input[type=radio]{-webkit-appearance:radio;}#syb_embed_signup input:focus {border-color:#333;}#syb_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block;font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}#syb_embed_signup .button:hover {background-color:#777;}#syb_embed_signup .small-meta {font-size: 11px;}#syb_embed_signup .nowrap {white-space:nowrap;}     #syb_embed_signup .clear {clear:none; display:inline;}#syb_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}#syb_embed_signup input.email {padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:58%; min-width:130px;}#syb_embed_signup input.button {width:35%; margin:0 0 10px 0; min-width:90px; }  /*]]>*/ </style><script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script><div id='slider' style='top: -108px;'><div id='slider-shell'><div id='syb_embed_signup'><form action='http://feedburner.google.com/fb/a/mailverify?uri=' id='syb-embedded-subscribe-form' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'><label for='syb-EMAIL'>Get my next article in your inbox!</label><input class='email' id='syb-EMAIL' name='email' placeholder='Email Address' required='required' type='email' /><div class='clear'><input class='button' id='syb-embedded-subscribe' style='background-color: #0066cc;' type='submit' /></div></form><div class='syb_footer'><small><a id='syb_email_link' target='_blank' href='http://www.stylifyyourblog.com/2012/12/auto-pop-email-subscription-widget-for.html?utm_src=SYB_email' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://img1.blogblog.com/img/blank.gif' alt='Email Subscription Widget for Blogger' style='border:none' /></a>Powered By <a href='http://www.stylifyyourblog.com/?utm_src=SYB_email' target='_blank' title='Blogger Widgets and Gadgets'>Stylify Widgets</a></small></div></div><div id='slider-tab'>Wait! I want to get email updates, bring that back...</div></div></div><script type='text/javascript'>$(document).ready(function(){function isScrolledDown(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(e<=c)}function isScrolledUp(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(d-200>=c)}function bringSliderOut(){$(f).animate({top:0},'fast');$('#slider-tab').text('hide this...')}function bringSliderIn(){$(f).animate({top:-108},'fast');$('#slider-tab').text('Wait! I want to get email updates, bring that back...')}var f=$('#slider');var g=$('#comments');var h=false;var i=false;$('#slider-tab').click(function(){if(!i){bringSliderOut();i=true}else{bringSliderIn();i=false}});$(window).scroll(function(){if(isScrolledUp(g)){if(h){bringSliderIn();h=false;i=false}}else if(isScrolledDown(g)){if(!h){bringSliderOut();i=true;h=true}}})});  </script>

Now just search for uri= and add your FeedBurner ID after that.

If you face any problems in implementing it , please feel free to ask via the comments

Thanks to Hartley Brody for the idea



Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Unknown said...

yes.. this is nice widget...This gonna be great to implement so that I can get more subscribers.

I hope you can share another More Blogger Tools and Widgets

Thank you...

Anonymous said...

For Wordpress?

Hello my friend PRAYAG,really I like it thanks my firend and happy nice day 4U and family keep in touch.

nice dear

Really Awesome thanks for sharing this :)

Regards
Rahul Kashyap
Blog: SDMMovies.com

Anonymous said...

Nice to see a nice widget after so long time... keep it up buddy...

Regards
Premium Downloads, Resume-able Links

Jagadeesh said...

Just Now Added in My Blog. Really Nice Labnol Look Like Blogger Template free Download

Unknown said...

Nice sharing, you can also check 5+ stylish subscription box

Unknown said...

Cool trick , love u
THE GOD HANGS HIS COLOUR BOOTS

Love it... @Gagan Masoun@ :)

Unknown said...

nice widget bro, thanks for sharing


www.pokharatech.com

aryan said...

great wodget.

Unknown said...

Heck I was so surprised to see my name here... and I had not even registered or joined this site ? is this normal ? btw is there an icon or button for pinterest that I can add so when I post can share there...

MM Nauman said...

Thanks For This Widget.And Your Widget generator is very good.but i want to display my blog readers in my blog how to display please help and thanks again.regards from latest games and software

Unknown said...

Its not working unfortunately for me

plz tell me where i have to add this script i added it but is was not working. and mymail id is ibpscomplaints@gmail.com
and feed id is sscibpsgk
plz reply me on my mailid

nice post thx very much

Allin1-web said...

it is good but spam because it t
popout each time..and I want popup widget for one time

Hi
To do that , you can use jQuery Cookie plugin ( like https://github.com/carhartl/jquery-cookie ) . Just a simple if-else condition has to be added to the JavaScript and it will make sure that it only appears once for the age of the cookie (you can set of the age of the cookie as per your requirements )

Awesome....!