Static Follow By Email Pop Out Widget for Blogger / Blogspot

February 18, 2012   /   Posted by in Blogger Widgets, Feedburner 32 Comments
Static Follow By Email Pop Out Widget for Blogger / Blogspot

Static follow by Email Widget is a New Widget for Blogger/Blogspot. This is Actually a WordPress Plugin. Now it is available for Blogger Blogs. This Widget is Jquery Based widget with Nice and smooth Popout effect. You will get more email subscribers with this widget and Very easy to Install in your Blog.

Look at Preview of this Widget.
Static Follow By Email Pop Out Widget for Blogger Preview

How to Install Pop out Follow by Email Widget?

As this widget based on jQuery plugin, First you need to have a jQuery Plugin in your Blog template.
This Step is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
Add the below line of code before </head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Installing Widget:-

In this Second Step, I am giving two ways to install this widget. Both will give the Same Effect.

  1. By Adding Widget Code to Template.
  2. Using Widget Generator.

By Adding Widget Code to Template

This will converts Follow By Email Official Blogger Widget to a Pop out follow by Email Widget.

  1. First Add Follow By Email Official Blogger Widget to Your Page Elements Layout.
  2. Add the Below Section Of code before closing </head> tag.
    <style type="text/css">
    /*<![CDATA[*/
    	.FollowByEmail {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);}
    	.w2bfollowButton {background: #464646;color: #CCC;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;}
    	.w2bfollowButton span {background: url("http://4.bp.blogspot.com/-cojt7gQfz4Q/TztYuq2TltI/AAAAAAAABcE/OTwMxjnwak8/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
    	.w2bfollowButton:hover,.followActive {color: #fff !important;}
    	.w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
    	.followactive {background-color: #333;}
    	.follow-by-email-inner {padding: 15px;}
    	.FollowByEmail h2 {padding: 15px 15px 0;font-size: 18px;margin: 0 0 10px;font-weight: normal;}
    	.follow-by-email-inner p {margin: 0 0 10px;}
    	.follow-by-email-inner .follow-by-email-address {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;}
    	.follow-by-email-inner form {text-align: center;}
    	.follow-by-email-inner td{display: inline-block;width:100%;text-align:center;}
    	.follow-by-email-inner .follow-by-email-address:focus {color: #000;border-color: #000;}
    	.follow-by-email-inner .follow-by-email-submit {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;}
    	.follow-by-email-submit: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;}
    	.follow-by-email-submit: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;}
    	.w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
    	.w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
    	.w2bFollowFooter a:hover {color: #fff;background: none;}
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    ;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b(".FollowByEmail");followBox.prepend("<a class="w2bfollowButton" href="#"><span>Follow</span></a>");w2b("<p></p>",{class:"w2bFollowFooter",html:"<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>"}).appendTo(followBox.find(".follow-by-email-inner"));followBox.find("td:last").removeAttr("width");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").animate({bottom:followHeight},{duration:200,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").animate({bottom:"0"},{duration:400,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
    /*]]>*/
    </script>
  3. Save the Template!

Using Widget Generator

  1. Click this below Button .
    Widget Generator
  2. Must Fill the Feedburner ID.
    Ex:-
    My Feedbuner URL is http://feeds.feedburner.com/way2blogging
    My Feedbuner ID is way2blogging
  3. Customize the Settings as you need.
  4. Add the Widget to Your Blog and Enjoy!

Any Feature Request or Suggestions are welcome. Feel free to share this widget and leave your comments. :)

Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

32 Comments on “Static Follow By Email Pop Out Widget for Blogger / BlogspotAdd Comment

  1. avatar

    XeBii Mj February 18, 2012 1:17 pm #

    Its Awesome Man!!
    Good Work

    • avatar

      Tushar March 2, 2012 2:14 pm #

      check my website it looks owsome

  2. avatar

    Design blog February 18, 2012 2:54 pm #

    thanks

  3. avatar

    Prayag Verma February 18, 2012 5:54 pm #

    Really useful widget indeed

  4. avatar

    Tien Nguyen February 18, 2012 7:47 pm #

    That’s similar with WordPress. Thank you very much.

  5. avatar

    Sagar Jain February 21, 2012 11:23 pm #

    great post bro keep going

  6. avatar

    Sidharth February 22, 2012 6:44 pm #

    5Stars :)
    Really Great Work Bro…
    Lot of Chances To Get New Subscribers :D

  7. avatar

    Utsav February 23, 2012 6:52 pm #

    thanks for sharing this widget…

    please make css3 and html5 templates for us…. for blogger users….

  8. avatar

    Mohammed Alamin February 24, 2012 3:14 pm #

    Would be helpful if you had a live demo.

  9. avatar

    Chiranjeev February 24, 2012 6:54 pm #

    Nice Widget Thanks for share this

  10. avatar

    Jai February 24, 2012 9:54 pm #

    awesome buddy, really useful.. Thanks for the share…

  11. avatar

    Dhiraj February 25, 2012 9:47 am #

    Thanks for the article :-)

  12. avatar

    Fiq February 29, 2012 12:34 pm #

    how to change to position, lets say on the upper right or upper left…

    • avatar

      Harish March 20, 2012 10:44 am #

      Install this new version http://www.way2blogging.org/2012/03/new-facebook-popout-likebox-version-2-for-blogger.html

  13. avatar

    Rishabh March 1, 2012 1:48 am #

    How do I change the color of the “Follow” text? It can barely be seen against my background…

  14. avatar

    Jasmine March 20, 2012 12:50 pm #

    its really amazing, thanks for sharing.

  15. avatar

    exairetico March 25, 2012 7:00 am #

    Hi Harish and thank you for sharing this! Can you tell me plz how to place this widget to the right or left side? Like the spot that you have your facebook widget! I’m using the wibiya bar (at the bottom) and i can barely see the widget. Please help!

    • avatar

      Harish April 4, 2012 12:13 am #

      sorry! this Widget has one option only.

  16. avatar

    Desta March 27, 2012 11:01 am #

    Mantab… lgsng jadi..

  17. avatar

    qitaqita April 22, 2012 6:28 pm #

    thanks, its very cute

  18. avatar

    Jessmar April 29, 2012 12:07 pm #

    Tanks for the guide on how to add Facebook share button into my site.

  19. avatar

    YOUSEF May 15, 2012 1:03 am #

    Hi Harish

    thank you for this widget

  20. avatar

    wahyudi May 29, 2012 4:27 am #

    thanks for info,.. i got more tips here

  21. avatar

    Edyn Laskar July 5, 2012 7:45 am #

    all the info in this blog is very useful, I would often come here to see the new tricks.
    thanks for sharing …

  22. avatar

    Anuj sharma July 6, 2012 9:25 pm #

    Thanks Harish. Added to my blog

  23. avatar

    prasanth September 14, 2012 10:06 pm #

    widget generator is not working in all posts .in your web site please fix itnnwww.alphagen.blogspot.com

    • avatar

      Harish September 14, 2012 11:11 pm #

      working fine for me, can you please spot which is not working ?

  24. avatar

    dev October 21, 2012 4:31 pm #

    Its not working for me. I have added the code via widget generator. But my blog still does not display the pop up.

    • avatar

      Harish October 23, 2012 12:36 pm #

      jQuery Conflicts. don’t include jquery plugin with this widget

  25. avatar

    rohith November 9, 2012 7:15 pm #

    Not working help check mine.

  26. avatar

    Jerry King December 23, 2012 4:18 pm #

    It is Awesome Man..
    Good Work

  1. Pingback: Static Follow By Email Pop Out Blogger Widget

© 2014 Way2blogging. Designed by +Harish, Powered by WordPress