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. Today we have one another email subscription widget for your blogger blog that you can use to increase your email subscribers.
You can check out the demo of this widget above, as you can see how one can click on the bar and the email subscription widget displays to them, from there they can easily subscribe to your blog by entering their email address and verifying it through their email. As soon as they click it again the bar goes up and boom and its hidden and maintains the clean look.
You can also check out some other awesome widgets like the email subscription popup widget for your blogger blog that can really gather some good buzz for your blog, okz getting back to this widget below are some easy steps you can follow to install this widget in your blog.
Installing Sliding Email Subscription Widget
So now if you are interested in this widget then you can follow steps mentioned below to install this instantly on your blog.
- Open Blogger > Layout > Add Gadget.
- Choose HTML/JavaScript Widget.
- Simply add below code into it and Save the Gadget.
<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("http://feedburner.google.com/fb/a/mailverify?uri=HackingUniversity", "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='https://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='https://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> - Now simply change the Blue Text with your Feedburner ID and Red with your text to display.
- You can also make certain changes to the design if you are good at CSS, try it out or use the chrome inspect element to make desired changes to the CSS and Save them accordingly.
So guys now you have an amazing email subscription widget installed on your blog, I hope this helps you in increasing your email subscribers, do let me know if you need anything else from my side. You can contact me if you have any personal issues and do make sure to JOIN our Telegram Channel so that all those wacky updates can be delivered to your instantly.
(COMMENTS WILL LOAD AUTOMATICALLY)