Friday, November 18, 2016

Blogger site to add a Static Follow By Email Pop Out Widget just like site!!

Free WordPress blog, the people who work here, they see a Static Follow by Email Pop Out. Many will not know how to do this, despite the Blogger site. However, if you follow the following procedure can be done on your Blogger. So, today, the production process for sharing!

Mainly 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 such as word press mode

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=""></script> 

Installing Widget

1. Login into your blogger blog
2. Go to layout
3. Click on add a widget and select “html/javascript” widget
4. And paste the bellow code in to the widget. Or, you can Add the Below Section Of code before closing </head> tag. 

<style type="text/css">
#TOBTfollowSubscribe {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);}
.TOBTFb {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;}
.TOBTFb span {background: url("") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.TOBTFb:hover,.followActive {color: #fff !important;}
.TOBTFb:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.TOBTForm {padding: 15px;}
.TOBTForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.TOBTForm p {margin: 0 0 10px;}
.TOBTForm .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;}
.TOBTForm form {text-align: center;}
.TOBTForm .emailInput:focus {color: #000;border-color: #000;}
.TOBTForm .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;}
.TOBTFF {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.TOBTFF a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.TOBTFF a:hover {color: #fff;background: none;}
<script type="text/javascript">
;(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("#TOBTfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){{bottom:followHeight})},500);w2b(".TOBTFb").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
<div id="TOBTfollowSubscribe" style="display:none;">
<div class="TOBTForm">
<a class="TOBTFb" href="#" title="Follow"><span>Follow</span></a>
<h3>Follow "Tutorial Gift.Com"</h3>
<form action="" method="post" target="popupwindow" onsubmit="' blogspot/TutorialGift','popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
<input type="hidden" value="blogspot/TutorialGift" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe Now" class="emailSubmit"/>
<p class="TOBTFF">
<a href="" target="_blank">Delivered by FeedBurner</a>


5. Now search “Tutorialgift.Com“ (press ctrl+f in the widget)and replace it with your blog title.
6. Change "TutorialGift" with your feed title and just click on save and you have done ! Pls cheeck this work. Any Feature Request or Suggestions are welcome. Feel free to share this widget and leave your comments.
Previous Post
Next Post

Show Comments: OR

0 comments: Post Yours! Read Comment Policy ▼
Attention Please
No comments that are not related to the post can be made. Do not share your blog link without any reason. Always try to give positive comments. We evaluate all opinions equally and try to answer them in due course.

Post a Comment

Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE