15 Dec 2012
Auto Pop Email Subscription Widget for Blogger
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 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("http://feedburner.google.com/fb/a/mailverify?uri=", "popupwindow", "scrollbars=yes,width=550,height=520"); 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
Til next time,
Prayag Verma
at 11:53
