HackingUniversity - Hacks . Tricks . How-To's

08 August 2013

Auto Sliding Email Subscribe Widget for Blogger Blogs

I have just started covering maximum blogger widget’s as many newbie blogger’s are coming forward into this line and they are continuously searching for tutorials and tricks on improvising their blog but side by side increasing new blogger visitors and creating a loyal base. Well the one thing they can do is add a good email subscription widget that will boost up their subscriber base hence getting more visitors as soon as you post out something.

Well you can check out my other widgets mentioned on the right too if you like some you can add that one too, so ok now for the demo part I do not have any working demo over here but I clicked the image of it you can see below, now its going to be like this only it will slide out from top as soon as you slide to bottom, so this will attract more and more visitors to subscribe to your blog. Well they even have the hiding possibility, so they can hide it too.

email-subscribe-widget

  1. Open Blogger > Layout > Add Gadget > HTML/JavaScript.
  2. Add below CSS – Script – HTML combined code into it.

    <style type='text/css'>#slider{-moz-box-shadow:0 0 8px #ccc;-webkit-box-shadow:0 0 8px #ccc;background-color:#fff;box-shadow:0 0 8px #ccc;height:120px;opacity:0.98;position:fixed;right:0;top:-125px;width:100%}.syb_footer{font-size:.8em;margin-top:-10px}#slider #slider-shell{height:110px;margin:10px auto;position:relative;width:800px}#slider #slider-tab{bottom:0;cursor:pointer;font-size:.6em;padding-right:10px;position:absolute;right:0;text-align:right;width:400px}#syb_embed_signup{background:#fff;clear:left;font:14px Helvetica,Arial,sans-serif}#syb_embed_signup form{display:block;padding:10px 0 10px 3%;text-align:left}#syb_embed_signup h2{font-size:1.4em;font-weight:700;margin:15px 0;padding:0}#syb_embed_signup input{border-radius:4px;-webkit-appearance:none;border:1px solid #999}#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{background-color:#aaa;border:0 none;border-radius:4px;clear:both;color:#FFF;cursor:pointer;display:inline-block;font-size:15px;font-weight:700;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;font-weight:700;padding-bottom:10px}#syb_embed_signup input.email{margin:0 4% 10px 0;min-width:130px;padding:8px 0;text-indent:5px;width:58%}#syb_embed_signup input.button{margin:0 0 10px;min-width:90px;width:35%}</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=HackingUniversity' id='syb-embedded-subscribe-form' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=HackingUniversity&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.hackinguniversity.in/' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://img1.blogblog.com/img/blank.gif' alt='Email-Subscription-Widget-Blogger' style='border:none' /></a>Powered By <a href='http://www.hackinguniversity.in/' target='_blank'>HackingUniversity</a></small></div></div><div id='slider-tab'>Wait! I want to get email updates, slide 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>

  3. Now just change the username in Blue color with your's and you can even remove the Red jQuery line if you already have it installed.
  4. That’s it now save your widget and align it anywhere, now just refresh your blog and see its awesome effect by sliding to bottom, see how this subscribe box slides down.