HaCk-A-tHoN: CSS and HTMLTricks

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<div class="article-entry entry-content" style="background-color: #fafafa; border: 0px; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; line-height: 24.44444465637207px; margin: 0px; padding: 0px; vertical-align: baseline; word-wrap: break-word;">
<a class="article-thumb single-thumb" href="http://www.way2blogging.org/2012/02/static-follow-by-email-pop-out-widget-for-blogger-blogspot.html" rel="bookmark" style="border: 0px; color: #3395bf; display: block; float: right !important; font: inherit; margin: 0px 0px 15px 10px; padding: 0px; vertical-align: baseline;" title="Static Follow By Email Pop Out Widget for Blogger / Blogspot"></a><a href="http://www.way2blogging.org/wp-content/uploads/blog_images/static-follow-by-email-pop-out-widget-for-blogger-blogspot.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Static Follow By Email Pop Out Widget for Blogger / Blogspot" border="0" class=" wp-post-image" height="225" src="http://www.way2blogging.org/wp-content/uploads/blog_images/static-follow-by-email-pop-out-widget-for-blogger-blogspot.jpg" style="border: 0px; display: block; font: inherit; height: auto; margin-top: 0px; max-width: 98%; padding: 0px; vertical-align: baseline; width: auto;" title="Static Follow By Email Pop Out Widget for Blogger / Blogspot" width="225" /></a> 
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
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.</div>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
</div>
<div class="clear" style="border: 0px; clear: both; font-size: 14.44444465637207px; font: inherit; height: 1px; margin: 0px; padding: 0px; vertical-align: baseline; width: auto;">
</div>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
Look at Preview of this Widget.  
<img alt="Static Follow By Email Pop Out Widget for Blogger Preview" class="screenshot" src="http://www.way2blogging.org/wp-content/uploads/images/static-follow-by-email-pop-out-widget-for-blogger-blogspot-preview.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font-size: 14.44444465637207px; font: inherit; height: auto; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></div>
<h3 style="-webkit-box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; background-color: transparent; background-image: url(http://www.way2blogging.org/wp-content/themes/way2blogging/images/h3.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; line-height: 1; margin: 20px 3px; padding: 6px 10px 6px 30px; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase; vertical-align: baseline;">
HOW TO INSTALL POP OUT FOLLOW BY EMAIL WIDGET?</h3>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
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 <code style="background-color: #efefef; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; color: #111111; font-family: 'Courier New', monospace; font-size: 14.44444465637207px; font: inherit; margin: 0px; padding: 1px 4px; vertical-align: baseline;"></head></code> tag.</div>
<pre style="background-color: #fff8e8; border: 2px solid rgb(255, 231, 175); clear: both; color: #333333; font-family: 'Courier New', monospace; font: inherit; line-height: 18px; margin: 25px 5px; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="xml" data-result="[object Object]" style="background-attachment: scroll !important; background-color: rgb(255, 243, 214) !important; background-image: none !important; background-position: 0px 0px !important; background-repeat: repeat repeat !important; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; display: block; font-family: 'Courier New', monospace; font: inherit; line-height: 1.6; margin: 0px; overflow: auto; padding: 10px !important; vertical-align: baseline; word-wrap: break-word;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></code></pre>
<h4 style="border: 0px; font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; margin: 20px 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">
INSTALLING WIDGET:-</h4>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
In this Second Step, I am giving two ways to install this widget. Both will give the Same Effect.</div>
<ol style="border: 0px; font: inherit; list-style-image: initial; list-style-position: initial; margin: 10px 0px 20px 15px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">By Adding Widget Code to Template.</li>
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Using Widget Generator.</li>
</ol>
<h4 style="border: 0px; font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; margin: 20px 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">
BY ADDING WIDGET CODE TO TEMPLATE</h4>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
This will converts Follow By Email Official Blogger Widget to a Pop out follow by Email Widget.</div>
<ol style="border: 0px; font: inherit; list-style-image: initial; list-style-position: initial; margin: 10px 0px 20px 15px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">First Add Follow By Email Official Blogger Widget to Your Page Elements Layout.</li>
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Add the Below Section Of code before closing <code style="background-color: #efefef; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; color: #111111; font-family: 'Courier New', monospace; font-size: 14.44444465637207px; font: inherit; margin: 0px; padding: 1px 4px; vertical-align: baseline;"></head></code> tag.<pre style="background-color: #fff8e8; border: 2px solid rgb(255, 231, 175); clear: both; color: #333333; font-family: 'Courier New', monospace; font: inherit; line-height: 18px; margin: 25px 5px; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="xml" data-result="[object Object]" data-second_best="[object Object]" style="background-attachment: scroll !important; background-color: rgb(255, 243, 214) !important; background-image: none !important; background-position: 0px 0px !important; background-repeat: repeat repeat !important; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; display: block; font-family: 'Courier New', monospace; font: inherit; line-height: 1.6; margin: 0px; overflow: auto; padding: 10px !important; vertical-align: baseline; word-wrap: break-word;"><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/AVvXsEhCMetBYRbC3fjGTk-AAXbRlVLX9eQNNUcEKtAqRLjUlXJE1LlLSAiA3mfa5d2uczE8KB9JeH0Qm3NoagRoWPuv-1NY7MvLLApbbwovdCKfKWuweayQiAQuTwX3qQUljeKc8zqEDnxdiOxP/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="#">Follow</a>");w2b("",{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></code></pre>
</li>
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Save the Template!</li>
</ol>
</div>
</div>

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 subscriber…

HaCk-A-tHoN

Static follow by Email Widget is a New Widget for Blogger/Blogspot

Popular Posts

Labels

Blog Archive