BlogTariff


Actually this widget buildup with Jquery, simple and easy method to implement and add it to your blogger site blog.
What are the advantage for this widget
Creating this widget you can get more visitor by subscribing via email.
BlogTariff expalins here the easiest procedure to install the above widget for your blog.
Image as below

To Install Popup widget "Follow by Eamil", Check the JQuery Plugin in your blog, if you don't have then intall this Plugin in your blog.
Search for </head>
Add this below given script code before </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Installing Widget code to your blog template
Go to Layout/Design and Click on "Add a Gadget" select Follow by Email widget and Add it your blog .
Again search for </head> and paste the below code before </head>
<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/AVvXsEi2zGZU3BgSKVtp9w0AiW30CTjxT3MTxY1Xxs9hoekGEpMiPMWkdrtYA9FxDo9a4pJNkMdiccbOcCpSGt3wSbXHJbDZ-ZonW_bkpMbD7JT2X_kegDJolj0ucwRQGCvHJbSmRXLmSNVk8D_j/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>

Save your blog Template

Post a Comment Gmail ID

Do not Try to Add Spam Comments

 
Top