How to add follow by Email Popout to your Blogg

Follow by email is a cool widget it is already given in gadget list of your blogger but here you can use it as a pop out for your blog it is given here as a widget so you don't have to edit your blogg CSS code.you have to follow some simple steps to add this widget to your blogg

D E M O

STEPS

1.Go to your blogg dashboard-->Now go to layout

2.Now click on add a gadget and chosse HTML/Javascript

3.Now paste the below code in content Box

4.You have to edit some texts in the below code which given after the code

<style type="text/css">
/*<![CDATA[*/
 #w2bzfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
 .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
 .w2bzfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
 .w2bzfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUhy-eLRcRsCmr8WcBK76Lcg3UulS8rSrfxWTKwY8-zV3Zaw4sl0LJOsPr2Lr2GKaIxtfZzmGl4b1wSKuEEOaYRxlRxbe0yddpj4jfkS0DO27s_Tv6ycxVA1Z3A7j5Zqu7rlUzg4-9zIw/h120/way2bloggerz.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
 .w2bzfollowButton:hover,.followActive {color: #fff !important;}
 .w2bzfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
 .followactive {background-color: #333;}
 .w2bzfollowForm {padding: 15px;}
 .w2bzfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
 .w2bzfollowForm p {margin: 0 0 10px;}
 .w2bzfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
 .w2bzfollowForm form {text-align: center;}
 .w2bzfollowForm .emailInput:focus {color: #000;border-color: #000;}
 .w2bzfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
 .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
 .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
 .w2bzFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
 .w2bzFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
 .w2bzFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2bz){w2bz(document).ready(function(){w2bz.extend(w2bz.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2bz("#w2bzfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2bz(".w2bzfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2bz(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2bz(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="w2bzfollowSubscribe" style="display:none;">
 <div class="w2bzfollowForm">
  <a class="w2bzfollowButton" href="#" title="Follow"><span>Follow</span></a>
  <h3>Follow "Way2Bloggerz"</h3>
  <p>Be the first to know updates SUBSCRIBE today!</p>
  <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ItsAllAboutBlogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
   <input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
   <input type="hidden" value="ItsAllAboutBlogging" name="uri"/>
   <input type="hidden" name="loc" value="en_US"/>
   <input type="submit" value="Subscribe" class="emailSubmit"/>
  </form>
  <p class="w2bzFollowFooter">
   <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
  </p>
 </div>
</div>

DON'T FORGET TO CHANGE
1.Header of widget
change WaytoBloggerz in line 32 with your header title for widget
2.Description of widget
change Be the first to know updates SUBSCRIBE today! in line 33 according to you
3.Feedburner url
change ItsAllAboutBlogging in line 34 and line 36 with your feedburner url address
if you dont know your feedburner url then go to add a gadget and click follow by email widget their you find feedburner url

ENJOY!

Pin It Now!

How to add follow by Email Popout to your Blogg

No comments:

Recent Comments

Follow "Way2Bloggerz"