Helper Blogger: Jquery Plugins

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div align="justify">
<img align="left" alt="Floating buttons" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2uL-mpOHC8FjUmciDGKFkXuOakaFSuIJ50lP1BL9VLkNWyG9CzgZCkb9W9dPCyATihJ98wID5ixMsfTQJOFw85WWodxcauTF4cPbkaHB5DNQD47dOhHEzCx-i3RxMjW2VP4VRQDbypMU/?imgmax=800" style="display: inline; float: left; margin: 0px;" title="Floating buttons" width="70" />UPDATE:- To add a floating widget to the left of all your posts like in this blog then please read: Floating Counters Next To Posts 
 
 
Finally the Sliding Counters! Till now we learned and created many floating social share buttons
 but those button widgets in fact do not slide when the user scrolls the
 page up or down. The only thing I needed was a well constructed 
JavaScript code that could make the widget to float up and down 
synchronously with the webpage movement. Thanks to Jtricks'
 Floating Menu code, we finally managed to bloggerize the floating 
effect and this widget is all ready to be added to your beautiful 
blogger blogs.  Kindly view the demo first, 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://freelibrarybook.blogspot.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkGVe7PjjTu2d_noCJChDzkjPBSXTHHCntEW_FEJfaQbG3a1jmLi0SG8Xq9TbekRTshGr4fwbhKrTbV4hLCY5CiWHB27UbDzmtxRHc8SoE3OZDlj8zfDn8fvBVC7reB49-64sH43gCPZo/s1600/Live+Demo.jpg" /></a></div>
                                                                        
 
 
<form action="http://www.blogger.com/add-widget" method="POST">
<input name="widget.title" type="hidden" value="Floating Social share Counters " /><input name="widget.content" type="hidden" value="<style>
/*-------Helper Blogger Floating Counters------------*/
#floatdiv {
 position:absolute;
 width:94px;
 height:229px;
 top:0;
 left:0;
 z-index:100
}

#hbsidebar {
 border:1px solid #ddd;
 padding-left:5px;
 position:relative;
 height:220px;
 width:55px;
 margin:0 0 0 5px;
}
</style>

<div id="floatdiv">
<div id="hbsidebar">
 <table cellpadding="1px" cellspacing="0">
 <tr>
 <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
 </td>
 </tr>
 <tr>
 <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
 </g:plusone></td>
 </tr>
 <tr>
 <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="helperbloggers">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 </td>
 </tr>
 <tr>
 <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<a style="color:#ddd;" href="http://helperbloggers.blogspot.com/2012/08/floating-google-1-facebook-twitter.html" target="_blank">Get This</a>
 </td>
 </tr>
 </table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

</script>" /><input name="widget.template" type="hidden" value="<data:content/>" /><input name="infoUrl" type="hidden" value="http://helperbloggers.blogspot.com" /><input name="logoUrl" type="hidden" value="https://sites.google.com/site/0323books0321/add.png" />                                                                  <input alt="Add to Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghKCfUAsHJ-WkcdftwfoXAQW5k3-61F5VBD4sBNqw1mqXqYn6mnnx8NlaT8Ulb8iE0SRWY8jGh9h5rpgt6x3j7AARmxWICj1DL3HYdEVxT0FjR5fWm9K0f61hIHc3p2HCY8phxTZhtaC9F/s320/btsnts_add_to_blogger.gif" type="image" /></form>
 
<div style="border: dotted 2px #005588; color: red; font-size: 18px; line-height: 10px; margin: 2; padding: 10px; text-align: justify;">
<h3>
Adding Floating Social share Counters to Blogger</h3>
</div>
 
 
<ol>
<li> <div align="justify">
Go To Blogger > Design</div>
</li>
<li> <div align="justify">
Choose a HTML/JavaScript widget</div>
</li>
<li> <div align="justify">
Paste the following code inside it, 
 </div>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<textarea class="mbt-textarea" readonly="readonly" style="height: 4077px; width: 642px;"><style>
/*-------Helper Blogger Floating Counters------------*/
#floatdiv {
 position:absolute;
 width:94px;
 height:229px;
 top:0;
 left:0;
 z-index:100
}

#hbsidebar {
 border:1px solid #ddd;
 padding-left:5px;
 position:relative;
 height:220px;
 width:55px;
 margin:0 0 0 5px;
}
</style>

<div id="floatdiv">
<div id="hbsidebar">
 <table cellpadding="1px" cellspacing="0">
<tr>
 <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
 </td>
 </tr>
<tr>
 <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
 </g:plusone></td>
 </tr>
<tr>
 <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="helperbloggers">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 </td>
 </tr>
<tr>
 <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">

<a style="color:#ddd;" href="http://helperbloggers.blogspot.com/2012/08/floating-google-1-facebook-twitter.html" target="_blank">Get This</a>
</td>
 </tr>
</table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

Make these changes:

Replace helperbloggers with your Twitter username

4. Save your widget and you are almost done!

PS: If you have already added the Google +1 Button somewhere in your blog then you may skip step5.

5. Now Go To Blogger > Design > Edit HTML and search for this,

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content">
 
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzkcDFLlMKronshR7rV1_m6CPDXtGeqoglIPxSMy8-3POco67_syJU_AP6wl38HluNkRylE7KU401eWGfQTIHSjCfD2TUff5Uyy-78UNJaV40Fau-z1_X48xIGhNVuxWeP9B_JAhuLLGA/s1600/jQuery-popup-for-mashable-style-widget-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="395" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzkcDFLlMKronshR7rV1_m6CPDXtGeqoglIPxSMy8-3POco67_syJU_AP6wl38HluNkRylE7KU401eWGfQTIHSjCfD2TUff5Uyy-78UNJaV40Fau-z1_X48xIGhNVuxWeP9B_JAhuLLGA/s400/jQuery-popup-for-mashable-style-widget-for-blogger.png" width="400" /></a></div>
 
 
Mashable style widgets are great widgets which comes with all subscription options such as facebook like button,Twitter follow button,Google +1 button and email subscription form and saves space of your blog,that's why I am also using this gadget on my blog.We already shared two versions of Mashable style widets (Version 1 | Version 2).Now we have added a jQuery Popup of Mashable style widget V-2.In this gadget we have used jQuery colorbox.See Live Demo of gadget then you will understand how the popup looks actual.Now without waiting any more lets go to the tutorial.</div>
 
 
 
<center>
 
<div class="but1">
<h2>
<a href="http://helperbloggersdemo.blogspot.com/" target="_blank">Live Demo</a></h2>
</div>
</center>
</div>
 
<h3 style="color: red;">
 
</h3>
 
<div style="border: 3px solid rgb(red); color: red; font-size: 18px; line-height: 0px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
How To Add This JQuery Popup To Blogger?</div>
 
 
<ul style="text-align: left;">
<li>Installation of this jQuery popup is so easy.You just have to copy and paste the codes.Follow below instructions :</li>
<li>Go to Blogger Dashboard > Design > Page/Edit Layout.(If you are using new User Interface then go to Dashboard > Layout)</li>
<li>Now click on "Add a Gadget" Then select "HTML/JavaScript"</li>
<li>Paste below code after replacing my Username's/ID's with yours and save it.</li>
</ul>
</div>
 
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<link rel="stylesheet" href="http://code.helperblogger.com/colorbox-css-code-helperblogger.css"/> 
<style> 
 /*-----------------------------------------------------------------------------------*/  
/* Mashable Style Widget Popup By Helper Blogger @helperbloggers.blogspot.com 
/*-----------------------------------------------------------------------------------*/  
#subscribe {  
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;  
height:380px; 
}  
#subscribe a,  
#subscribe a:hover,  
#subscribe a:visited {  
text-decoration:none;  
}  
.box-title {  
color: #F66303;  
font-size: 20px !important;  
font-weight: bold;  
margin: 10px 0;  
border:1px solid #ddd;  
-moz-border-radius:6px;  
-webkit-border-radius:6px;  
border-radius:6px;  
box-shadow: 5px 5px 5px #CCCCCC;  
padding:10px;  
line-height:25px; font-family:arial !important;  
}  
.box-tagline {  
color: #999;  
margin: 0;  
text-align: center;  
}  
#subs-container {  
padding: 35px 0 30px 0;  
position: relative;  
}  
a:link, a:visited {  
border:none;  
}  
.demo {  
display:none;  
}  
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> 
<script src="http://code.helperblogger.com/jquery.colorbox.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
if (document.cookie.indexOf('visited=true') == -1) { 
var fifteenDays = 1000*60*60*24*30; 
var expires = new Date((new Date()).valueOf() + fifteenDays); 
document.cookie = "visited=true;expires=" + expires.toUTCString(); 
$.colorbox({width:"400px", inline:true, href:"#subscribe"}); 
} 
}); 
</script> 
 
 
 
<div style='display:none'> 
<div id='subscribe' style='padding:10px; background:#fff;'> 
<style>  
    /* Social Widget */  
    #HB-mashable-bar {  
        border: 0;  
        margin-bottom: 10px;  
        margin: 0 auto;  
        width:300px;  
        height:380px; 
    }  
    .fb-likebox {  
        background: #fff;  
        padding: 10px 13px 0 10px;  
        border-right: 1px solid #D8E6EB;  
       border-left: 1px solid #D8E6EB;  
       border-bottom: 1px solid #D8E6EB;  
       margin:0px;  
       height:70px;  
    }  
    .googleplus {  
        background: #F5FCFE;  
        border-top: 1px solid #FFF;  
        border-bottom: 1px solid #ebebeb;  
        border-right: 1px solid #D8E6EB;  
        border-left: 1px solid #D8E6EB;  
        border-image: initial;  
        font-size: .90em;  
        font-family: "Arial","Helvetica",sans-serif;  
        color: #000;  
        padding: 9px 11px;  
        line-height: 1px;}  
    .googleplus span {  
        color: #000;  
        font-size: 11px;  
        position: absolute;  
        display:inline-block;  
        margin: 9px 70px;}  
    .g-plusone {    float: left;} 
.gplus {  
        background: #fff;  
        padding: 0px;  
        border: 0px solid #C7DBE2;  
        margin-bottom:-13px;} 
 
    .twitter {  
        background: #EEF9FD;  
        padding: 10px;  
        border: 1px solid #C7DBE2;  
        border-top: 0;}  
    #mashable {  
        background: #EBEBEB;  
        border: 1px solid #CCC;  
        border-top: 1px solid white;  
        padding: 2px 8px 2px 3px;  
        text-align: right;  
        border-image: initial;}  
    #mashable .author-credit {}  
    #mashable .author-credit a {  
        font-size: 10px;  
        font-weight: bold;  
        text-shadow: 1px 1px white;  
        color: #1E598E;  
        text-decoration:none;}  
    #email-news-subscribe .email-box{  
        padding: 5px 10px;  
        font-family: "Arial","Helvetica",sans-serif;  
        border-top: 0;  
        border-right: 1px solid #C7DBE2;  
        border-left: 1px solid #C7DBE2;  
        border-image: initial;  
       height:35px;}  
    #email-news-subscribe .email-box input.email{  
        background:#FFFFFF;  
        border: 1px solid #dedede;  
        color: #999;  
        padding: 7px 10px 8px 10px;  
        -moz-border-radius: 3px;  
        -webkit-border-radius: 3px;  
        -o-border-radius: 3px;  
        -ms-border-radius: 3px;  
        -khtml-border-radius: 3px;  
        border-radius: 3px;  
        border-image: initial;  
        font-family: "Arial","Helvetica",sans-serif;}    
    #email-news-subscribe .email-box input.email:focus{color:#333}    
    #email-news-subscribe .email-box input.subscribe{  
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);  
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));  
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);  
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);  
        font-family: "Arial","Helvetica",sans-serif;  
        border-radius:3px;  
        -moz-border-radius:3px;  
        -webkit-border-radius:3px;  
        border:1px solid #cc7c00;  
        color:white;  
        text-shadow:#d08d00 1px 1px 0;  
        padding:7px 14px;  
        margin-left:3px;  
        font-weight:bold;  
        font-size:12px;  
        cursor:pointer;  
        border-image: initial;}  
    #email-news-subscribe .email-box input.subscribe:hover{  
        background: #ff9b00;  
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);  
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));  
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); 
        outline:0;-moz-box-shadow:0 0 3px #999;  
        -webkit-box-shadow:0 0 3px #999;  
        box-shadow:0 0 3px #999  
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));  
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);  
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);  
        border-radius:3px;  
        -moz-border-radius:3px;  
        -webkit-border-radius:3px;  
        border:1px solid #cc7c00;  
        color:#FFFFFF;  
        text-shadow:#d08d00 1px 1px 0}    
    #other-social-bar {  
        background-color: #D8E6EB;  
        box-shadow: 0 1px 1px #FFFFFF inset;  
        padding: 0px;  
        font-family: "Arial","Helvetica",sans-serif;  
        font-weight:bold;  
        overflow: hidden;  
        border: 1px solid #B6D0DA;  
           height:37px;  
    }  
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}  
    #other-social-bar .other-follow {  
        float: left;  
        color:#1E598E;  
        overflow: hidden;  
        height:20px;  
        padding:5px;  
        width: 270px;}  
    #other-social-bar .other-follow ul {  
        list-style: none outside none;  
        padding-left: 4px;}  
    #other-social-bar .other-follow ul li {  
        font-size: 12px;  
        font-weight: bold;  
        display:inline;  
        border:0;  
        text-shadow: 1px 1px white;}    
    #other-social-bar .other-follow ul li a {  
        font-size: 12px;  
        color:#1E598E;  
        font-weight: bold;  
        display:inline;  
        text-shadow: 1px 1px white;}  
    #other-social-bar .other-follow li {  
        font-size: 12px;  
        font-weight: bold;  
        display:inline;  
        border:0;  
        text-shadow: 1px 1px white;}  
    #other-social-bar .other-follow li a {  
        font-size: 12px;  
        color:#1E598E;  
        font-weight: bold;  
        display:inline;  
        text-shadow: 1px 1px white;}  
    #other-social-bar .other-follow li.my-rss {  
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5TyCtO-5lPP9BGXNz0F8-pt91Y2491Ngjob4Ne9qqbQf6XDWwo6K0tNehZXWqmKCODb_nS35scAo4V-56k05U3OTpe8R60oAeaep5MvnNJsq0BPXHUgSwq2yhPmjtN-dyiQrTTclp1So/s400/rss-16x16.png') no-repeat transparent;  
        line-height: 1;  
        padding: 0px 3px 1px 20px;  
        width: 60px;  
        margin-bottom:0px;  
            margin-left:5px;} 
    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{  
    text-decoration:none;  
    } 
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{  
    text-decoration:underline;  
    } 
    #other-social-bar .other-follow li.my-twitter {  
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWCzOlgB1dRUcgz93lRKmSc5Mq5BXkpR1YhC3BwyQtqkikgnluhLTliLpQVTdVhNT19mNCDypKf8LMkb_lme2RNI-KvkdLKzM6pVcyidPS_8nqmfNOg-9BWRzsF8DX98v4sTieAn0gdak/s400/twitter%2527.png') no-repeat transparent;  
        line-height: 1;  
        padding: 0px 3px 1px 20px;  
        width: 60px;  
        margin-bottom:0px;}  
    #other-social-bar .other-follow li.my-gplus {  
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyjBn_fywTkNGBosqp8Wnhj45SdOcbaQWU6w67IuIaSTzlxM6BvwclKkxs_y1f-1lnL8Yj4jEvAVIWHf8mRIZBE_5d4ph8ZhApVvpjnUeBpJES5OtvP1qe62Wfd9lNvyst4VNvLa4tYxc/s400/gplus-16x16.png) no-repeat transparent;  
        line-height: 1;  
        width: 60px;  
        padding: 0px 3px 1px 20px;  
        margin-bottom:0px;} 
 
    </style> 
 
 
 <div style="margin-bottom:10px;"> 
<div id="HB-mashable-bar" > 
 
<div class="gplus"> 
<link href="https://plus.google.com/u/0/106465314277386711723/" rel="publisher" /> 
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script> 
 <g:plus href="https://plus.google.com/u/0/106465314277386711723/" width="300" height="131" margin="0px" theme="light"></g:plus> </div> 
<div class="fb-likebox"> 
 <div id="fb-root"> 
</div> 
<script>(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return; 
  js = d.createElement(s); js.id = id; 
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like-box" data-href="http://www.facebook.com/helperbloggers" data-width="292" data-show-faces="false" data-stream="false" data-header="false"> 
</div> 
</div> 
<div class="googleplus"> 
 Recommend us on Google!<div class="g-plusone" data-size="medium"> 
</div> 
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> 
<div class="twitter"> 
 <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=en&link_color=&screen_name=helperblogger&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div> 
<div id="email-news-subscribe"> 
 <div class="email-box"> 
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=helperbloggers', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />         
<input type="hidden" value="helperbloggers" name="uri" /> 
<input type="hidden" name="loc" value="en_US" /> 
<input class="subscribe" name="commit" type="submit" value="Subscribe" />    </form> 
</div> 
</div> 
<div id="other-social-bar"> 
 <ul class="other-follow"> 
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/helperbloggers" target="_blank">RSS Feed</a> </li> 
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/helperbloggers target="_blank">Twitter</a> </li> 
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/106527290580119996124 target="_blank">Google Plus</a> </li> 
</ul> 
</div> 
<div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> 
<a href="http://helperbloggers.blogspot.com/2012/08/jquery-pop-up-for-mashable-style-widget.html" target="_blank" >Get This »</a></div> 
</div> 
 
</div> 
</div> 
</div> 
<div>
 </div>
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
 
 
 
<div style="border: 3px solid rgb(red); color: red; font-size: 18px; line-height: 0px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
 
 
Customizations</div>
 
 
Color Codes Information - 
 
     - Cookie Refresh Time: 
 
I have set the cookie refresh time to the 7 days that means this popup will appear only once in 7 days to that specific visitor.If you want to appear the popup daily then just replace the value 7 with 1.But note if you set the value to low then it can irritate your daily readers.</div>
 
     - Your Google+ Page Id: 
 
Replace the highlighted ID with your Google+ ID.If you don't know how to find your Google+ ID then <a href="https://developers.google.com/+/plugins/badge/#faq-find-page-id" target="_blank">click here</a>.</div>
 
     - Your Facebook Page URL: 
 
Replace the highlighted URL with your Facebook fan page URL.</div>
 
     - Your Twitter Username: 
 
Replace helperblogger with your Twitter username.</div>
 
     - Your Feedburner Username: 
 
Replace Highlighted hblogger username with your Feedburner username. 
 
Now save your changes and you are done... 
 
<hr />
 
Note - If you want to share this gadget with your friends then kindly link back to this article.Gadget users are requested to don't remove credit links. </div>
</div>

jQuery Pop Up For Mashable Style Widget (V2)

Mashable style widgets are great widgets which comes with all subscription options such as facebook like button,Twitter foll...

+ Read more »

Floating Google +1, Facebook, Twitter Buttons For Blogger

jQuery Pop Up For Mashable Style Widget (V2)