Helper Blogger: Twitter

Showing posts with label Twitter. Show all posts

Create Floating Bar For Pinterest & Other Sharing Buttons

<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>
<b:if cond='data:blog.pageType == "item"'> 
<b:if cond='data:blog.pageType != "static_page"'> 
<style> 
.hb_social_floating{ 
    position:fixed; bottom:10%; margin-left:-60px; float:left; 
    width:60px; 
    background-color:#f7f7f7; 
    padding: 5px 0 0px 0px; 
     border-top:1px solid #ddd; 
border-left:1px solid #ddd; 
border-bottom:1px solid #ddd; 
z-index:9999px !important; 
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; 
} 
.hb_social_floating .mbt_side_social_button{ 
    margin-bottom:5px; 
    float:none; 
    height:auto; 
    width:60px; 
} 
.hb_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{ 
    margin-left:5px; 
} 
.hb_social_floating .st_fblike_vcount{ 
    margin-left:5px; 
} 
.hb_social_floating .stButton_gradient{ 
    background:none !important; 
    height:21px !important; 
    padding-left:0 !important; 
} 
.hb_social_floating .chicklets, .mbt_social_floating .stMainServices { 
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjHM3R5Vw7WXRgqD2LMM4B4-VUWy6PbZl4IaSzDNyoffrSTTMTuZKSU3FZM6PcRRvaVqtU45xzHReat7xvQpInKT4ISvbttosNCErwIjSl4nGb4HeBHyzJBnTScjRKb4SKi6J5EZfeu2GB/s400/gc_social_sprite.gif') no-repeat !important; 
    height:19px !important; 
    width:45px !important; 
    padding:0 !important; 
} 
.st_email .chicklets{ 
    background-position:0 -77px !important; 
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjHM3R5Vw7WXRgqD2LMM4B4-VUWy6PbZl4IaSzDNyoffrSTTMTuZKSU3FZM6PcRRvaVqtU45xzHReat7xvQpInKT4ISvbttosNCErwIjSl4nGb4HeBHyzJBnTScjRKb4SKi6J5EZfeu2GB/s400/gc_social_sprite.gif') !important; 
} 
.hb_social_floating .st_twitter_vcount .st-twitter-counter{ 
    background-position:0 -58px !important; 
} 
.hb_social_floating  .stButton_gradient{ 
    border:none !important; 
} 
.hb_social_floating .stBubble_count{ 
    width:44px !important; 
    font-size: 15px !important; 
    font-weight: normal !important; 
    padding-top:7px !important; 
    height:23px !important; 
    background:none !important; 
} 
.hb_social_floating .st_twitter_vcount .stBubble_count{ 
    color:#00a6df; 
    background-color:#f8fbfc !important; 
} 
 
.st_fblike_vcount{ 
    margin-bottom: 0px; 
    display: block; 
} 
.st_twitter_vcount{ 
    margin-bottom: 3px; 
    display: block; 
} 
 
.st_email{ 
    margin-bottom: 5px; margin-top: 3px; 
    display: block; 
} 
.hb_social_floating .stBubble{ 
    background-position: 21px 31px !important; 
    height:35px !important; 
} 
</style> 
 
<div class='hb_social_floating'> 
    <script type='text/javascript'>var switchTo5x=true;</script> 
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> 
    <script type='text/javascript'>stLight.options({onhover:false});</script> 
    
    
<div style='margin:5px 0 0px 0;'> 
<center> 
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a> 
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/> 
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> 
<script type='text/javascript'> 
function run_pinmarklet() { 
var e=document.createElement('script'); 
e.setAttribute('type','text/javascript'); 
e.setAttribute('charset','UTF-8'); 
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999); 
document.body.appendChild(e); 
} 
</script> </center> 
</div> 
<div style='margin:0px 0 0 5px;'> 
    
</div> 
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'> 
<a class='addthis_counter'/> 
</div> 
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> 
<script type='text/javascript'> 
var addthis_config = { 
     ui_cobrand: "Helper Bloggers", 
ui_header_color: "#ffffff", 
     ui_header_background: "#0080FF" 
} 
</script> 
 
<a href='http://helperbloggers.blogspot.com/2012/08/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Get This</a> 
</div> 
</b:if></b:if></blockquote>
 
Just replace helperbloggers  with your twitter username. 
   8.  Save your template and you are all done! 
<div class="composeBoxWrapper GKY2L2ICAJB">
<iframe aria-label="Edit post. Compose mode." class="composeBox editable" frameborder="0" id="postingComposeBox" name="Rich text editor" style="background-color: white; height: 100%; padding: 0px;"> </iframe> </div>
</div>

Create Floating Bar For Pinterest & Other Sharing Buttons

This is one of the few social sharing widgets that took a lot of my time in designing it. You have seen the trend of floating sha...

+ Read more »

Stay Connected Gadget With All Subscription Options For Blogger

<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/AVvXsEhtOI88G_If-h_fRTYvIdHXRW8QouTPcK5lF8bzNIBOqqQGtAoU_1L0ZEr0Mp713A61TYdM3xtM7DE5Z0A4HJfMJo6wJpCwsrIh_K7ynAQg9HNREyphp5ZJYx8GACvJJVt0gWg3SvK3GvA/s1600/stay-connecte-gadget-for-blogger.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtOI88G_If-h_fRTYvIdHXRW8QouTPcK5lF8bzNIBOqqQGtAoU_1L0ZEr0Mp713A61TYdM3xtM7DE5Z0A4HJfMJo6wJpCwsrIh_K7ynAQg9HNREyphp5ZJYx8GACvJJVt0gWg3SvK3GvA/s1600/stay-connecte-gadget-for-blogger.png" /></a></div>
 
 
Social Sharing and Subscribing plays very important role in increasing 
traffic on the blog which gaves more earnings to the author of that 
blog.Keeping that thing in mind I am creating social subscription 
widgets and today I have created another one cool social subscription 
gadget for my readers.This widget is similar to mashable style widget but I made some changes to give it more impressive look.This widget contains following things - 
 
 
<ol style="text-align: left;">
<li>Facebook Like Button</li>
<li>Google +1 Button</li>
<li>Twitter Follow Button</li>
<li>Pinterest Follow Button</li>
<li>Email Subscription Form and</li>
<li>Social Icons</li>
</ol>
See the demo of gadget : 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://helperbloggersdemo.blogspot.com/2012/08/joker-mp3-songs-2012.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkGVe7PjjTu2d_noCJChDzkjPBSXTHHCntEW_FEJfaQbG3a1jmLi0SG8Xq9TbekRTshGr4fwbhKrTbV4hLCY5CiWHB27UbDzmtxRHc8SoE3OZDlj8zfDn8fvBVC7reB49-64sH43gCPZo/s1600/Live+Demo.jpg" /></a></div>
                                                            </div>
<div style="background-color: white; border: 2px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 15px; text-align: justify;">
How To Add This Gadget On Your Blog? </div>
 
I have kept the installation so easy you have to just copy and paste the code.Follow below steps carefully. 
 
<ol style="text-align: left;">
<li>First go to Blogger Dashboard > Layout</li>
<li>Click on "Add a Gadget" link.</li>
<li>Select HTML/Javascript widget.</li>
<li>Now paste below code after replacing my usernames with yours and save it.</li>
</ol>
</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>
<style>  
#socialnetworking { 
    border: 1px solid #ebebeb; 
    width: 280px; 
} 
 
.fb-likebox { 
    padding: 10px 10px 0 10px; 
    border-bottom: 1px solid #ebebeb; 
} 
 
.googleplus { 
    background: #eef9fd; 
    border-top: 1px solid white; 
    border-bottom: 1px solid #ebebeb; 
    font-size: 12px; 
    color: #000; 
    padding: 9px 11px; 
    line-height: 1px; 
    font-family: Verdana, Geneva, sans-serif; 
} 
 
.googleplus span { 
    color: #000; 
    font-size: 11px; 
    position: absolute; 
    margin: 9px 70px; 
    width: 280px; 
} 
 
#widgetbox { 
    background: #EBEBEB; 
    padding: 2px 8px 2px 3px; 
    text-align: right; 
    border-image: initial; 
} 
 
#widgetbox .author-credit a { 
    font-size: 10px; 
    font-weight: bold; 
    text-shadow: 1px 1px white; 
    color: #1E598E; 
    text-decoration: none; 
} 
 
.g-plusone { 
    float: left; 
} 
 
.twitter { 
    background: #eef9fd; 
    border-top: 1px solid #fff; 
    padding: 10px; 
} 
 
.fb { 
    background: #eef9fd; 
    border-top: 1px solid white; 
    border-bottom: 1px solid #ebebeb; 
    font-size: 12px; 
    color: #000; 
    padding: 9px 11px; 
    line-height: 1px; 
    font-family: Verdana, Geneva, sans-serif; 
} 
 
.fb span { 
    color: #000; 
    font-size: 11px; 
    position: absolute; 
    margin: -12px 100px; 
    width: 280px; 
} 
 
.pterest { 
    background: #EFF5FB; 
    border-bottom: 1px solid #ebebeb; 
    font-size: 12px; 
    color: #000; 
    padding: 9px 11px; 
    line-height: 1px; 
    font-family: Verdana, Geneva, sans-serif; 
    border-top: 1px solid #ddd; 
} 
 
#email-news-subscribe .email-box { 
    padding: 5px 10px; 
    font-family: "Arial","Helvetica",sans-serif; 
    border-top: 0; 
    border-image: initial; 
    height: 35px; 
    background: #EFF8FB; 
    width: 260px; 
} 
 
#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 
}    
</style>   
 
<div id="socialnetworking"> 
  
 <div class="fb-likebox"> 
   
  <center> 
  <a style="margin-right: 10px;" rel="me" href="http://profiles.google.com/106851621955005208707" target="_blank"> 
  <img src="http://2.bp.blogspot.com/-TtecU81mxEA/TrHxZowPn9I/AAAAAAAABI8/UGSwDMYkt-c/s1600/Button G.png" /></a> 
  <a style="margin-right: 10px;" href="https://www.facebook.com/pages/Helper-Bloggers/166050840164778" target="_blank" rel="nofollow"> 
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsX6gubHBhoH4JCG0TALaBO1SgSERdMqeRCAq5VMVfj4FnYDmkm-uw5As8a5uyinFjY6lm75t-_1gsSCOBE4lF_CPWMBdVWP3mWaKEKefXKodokQDZg7LSR8MKmU6KUSWJZ5Thhh8xjL1n/s320/1oaxc4.jpg.png" /></a> 
  <a style="margin-right: 10px;" href="http://feeds2.feedburner.com/helperbloggers" target="_blank" rel="nofollow"> 
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF3J3Z3BicwtswYL8qQn7hyjv2xtZS9t5llhaP20NfJbYR1kqCnENcO6EUmOpGJ0ZSJ2rjtYkaheCcYfUaTRnnaJ156IzYZW78EaBwMVdGBuEmexNl0A7paxOzd_RGoOK-juFFvXgoHa0N/s1600/2d7itk9.jpg.png" /></a> 
  <a style="margin-right: 10px;" href="http://feedburner.google.com/fb/a/mailverify?uri=helperbloggers&loc=en_US" target="_blank" rel="nofollow"> 
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQH6mQELa9BW7Rzn2QLVzT-6Tlt9YuAvg31fbTMfxRKZL29kE_89hhI0jnpERqntkbaCq22h1T8-x1Q5ZhC2lZOLfvFsf5f31NqeC4ut2C7o-8o0MBy0qkA8yX1DNFq8KkRhPAcNvcdKj/s320/j5krgl.jpg.png" /></a> 
  <a style="margin-right: 10px;" href="http://twitter.com/#!/helperbloggers" target="_blank" rel="nofollow"> 
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-oQp3261hwGyvYBiCIB1dc_EspZw50xR2f8VcPMmHnBHK1XsIGflG9wUjJ66cwQV32wRUAjWB20wgQQ8P72dzOlnMcJxYH7TdN74DPffvG7-d8r999KC2GvoVe2N7-BRF97StAmk9kHt3/s1600/3312cmr.jpg.png" /></a> 
  </center> 
</div> 
<div class="googleplus"> 
  Recommend Us On Google 
   
   
  <g:plusone size="medium"></g:plusone> 
   
  <script type="text/javascript"> 
  (function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
  })(); 
</script> 
  <script type="text/javascript"> 
  gapi.plusone.render 
  ( 
   'plusone-div', 
   { 
    "size": "medium", 
    "count": "true" 
   } 
  ); 
  </script> 
</div> 
<div class="fb"> 
 
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2F166050840164778&&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"> 
</iframe> 
Like Us On Facebook 
</div> 
<div class="twitter"> 
 
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&id=twitter-widget-0&lang=en&screen_name=helperbloggers&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button"> 
</iframe> 
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> 
</div> 
<div class="pterest"> 
<a href="http://pinterest.com/helperbloggers/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest"/></a> 
</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: 140px; 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="hblogger" name="uri"/> 
  <input type="hidden" name="loc" value="en_US"/> 
  <input class="subscribe" name="commit" type="submit" value="Subscribe"/> 
 </form> 
</div> 
</div> 
<div id="widgetbox" style="background: #FBEFEF;border-top: 1px solid #ddd;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/stay-connected-gadget-with-all_15.html" target="_blank">Get This »</a> 
</div> 
 
</div> 
<div>
 </div>
</blockquote>
</div>
</div>
<h2 style="text-align: left;">
Replace</h2>
<h4 style="text-align: left;">
Prees Ctrl F And Find Below ID </h4>
     - Your Google+ Profile/Page ID:106851621955005208707 
 
 
     - Your Facebook Page Url:https://www.facebook.com/pages/Helper-Bloggers/166050840164778 
 
 
     - This 2 Time Your Feedburner Username:helperbloggers 
 
 
     - This 2 Time Your Twitter Username:helperbloggers 
 
 
     - Your Pinterest Username:helperbloggers 
 
Now save your all changes and you are done. 
 
Note - You are most welcome to share this gadget with your readers 
but you have to attach a link to this tutorial.Gadget users are 
requested to not remove the credits links.Its really destroy my efforts 
which I have put on this gadget. 
 
 
Happy Blogging....

</div>

Stay Connected Gadget With All Subscription Options For Blogger

Social Sharing and Subscribing plays very important role in increasing traffic on the blog which gaves more earnings to the author...

+ Read more »

jQuery Pop Up For Mashable Style Widget (V2)

<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 »