» » » » » Static Follow By Email Pop Out Widget for Blogger / Blogspot

Static Follow By Email Pop Out Widget for Blogger / Blogspot

Oleh
Here is a very beautiful trick "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. 

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXmqCVHrw2AiT5uKIuCO-kz0vPAhcISm4YvUi5amwX6ZWNaVYIJ_6e_GN9zHrgYyYBJJjgSrpFlziPfGzcUdThOJ1sIl1RGWcsM-UO3CcJwMEq2CpqzavpNPKItFu_C0_QKW-_WaKUmbw5/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!

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

0 Komentar untuk "Static Follow By Email Pop Out Widget for Blogger / Blogspot"

Back To Top