Helper Blogger: Social Media

Showing posts with label Social Media. Show all posts

Social Bookmarking Widget With Tooltips For Blogger

<script type="text/javascript">
 (function() {
 var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
 sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-cb.min.js";
 var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
 })();
 </script>

Social Bookmarking Widget With Tooltips For Blogger

Social bookmarking widget is need of every blogger thats why you see such gadgets almost on every blog.Social bookmarking widg...

+ Read more »

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 »

Add Facebook Comments form to Blogger Blogs

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content">
<style>.fullpost{display:inline;}</style> 
<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
 </div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafzsLsL878t_q8mVKY8SbhlGaJ36h9WX7GKN7wdYEgiJi7EXgLT0FHZZ2JlbLwPFQjLyUP38tBygMR-Jio_tnxXmSVpMZPo2fv9ol8_jq2rQcOliGVNmNgTpZ70qs0c_CM5dJPPc6VPI/s1600/facebook+comment+box.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="facebook comment box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafzsLsL878t_q8mVKY8SbhlGaJ36h9WX7GKN7wdYEgiJi7EXgLT0FHZZ2JlbLwPFQjLyUP38tBygMR-Jio_tnxXmSVpMZPo2fv9ol8_jq2rQcOliGVNmNgTpZ70qs0c_CM5dJPPc6VPI/s1600/facebook+comment+box.jpg" title="" /></a><large>F</large>acebook have successfully released many of the resources and plugins for bloggers. In the whole plugins of Facebook, LIKE and Share were the most inspired one. Now they have released Facebook comment form for bloggers on which I am going to give the tutorial today. Facebook comment form helps the bloggers in getting most comments and more social media exposure. This Facebook comment plugin looks simple, cool and it allows users to comment on your blog by logging into Facebook, Yahoo, AOL and Hotmail. This plugin by them is really an awesome resource for bloggers, so what are you waiting for???!!. lets move on with the tutorial. 
<div>
 
<a href="http://www.blogger.com/blogger.g?blogID=5633879042047294684" name="more"></a> 
<h2 style="text-align: left;">
How To Add Facebook Comments form to Blogger</h2>
<h3 style="text-align: left;">
Creating An App in Facebook</h3>
<div>
1. Go to <a href="https://developers.facebook.com/apps/?action=create" rel="nofollow" target="_blank">Facebook developers page</a> to create a new app.</div>
<div>
 </div>
<div>
2. Create an new app with your blog details as shown below.</div>
<div>
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBZyU4lCeRPYJi9mMBv1BjJp2JJf0eM1FQPHIlO9XpAFo1siIYNw2RGRJc2rZ1ybvNklHGCBGmpBY1vNUFP1R8KIFXUPRUjV1jQ7ckPlhPRYGDNDcGEIa5658GjZu6L0vEyynmFziMZ0/s1600/create+new+app+in+facebook.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="create a new app in facebook" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBZyU4lCeRPYJi9mMBv1BjJp2JJf0eM1FQPHIlO9XpAFo1siIYNw2RGRJc2rZ1ybvNklHGCBGmpBY1vNUFP1R8KIFXUPRUjV1jQ7ckPlhPRYGDNDcGEIa5658GjZu6L0vEyynmFziMZ0/s400/create+new+app+in+facebook.JPG" title="" width="400" /></a></div>
 
<div>
 </div>
<div>
3. Note down your Facebook app id which will be shown like this.</div>
<div>
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ283qFAfrs-ChJIF723aF2QTDOaKLDYrMJIaP-CZ25nGJo-wgUEHA9KODS4qawRtL8poBmAm-YX5_w9ST-4gX2NjNd6kwo6Dsgu7lBlvUYcHDj9dlDFEeLk1n9V8mHOADny_7481aBd0/s1600/note+facebook+app+id.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="find your facebook app id" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ283qFAfrs-ChJIF723aF2QTDOaKLDYrMJIaP-CZ25nGJo-wgUEHA9KODS4qawRtL8poBmAm-YX5_w9ST-4gX2NjNd6kwo6Dsgu7lBlvUYcHDj9dlDFEeLk1n9V8mHOADny_7481aBd0/s1600/note+facebook+app+id.JPG" title="" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div style="border: 2px dashed red; color: black; height: 20px; width: 300px;">
<div style="text-align: left;">
  JavaScript SDK for Facebook comment box</div>
</div>
<div>
 
 
4. Now go to your blogger dashboard --> template --> Edit Html (Tick expand widget template option).</div>
<div>
 </div>
<div>
5. search(Ctrl+F) for <html  and replace it with the following code.</div>
<div>
<blockquote class="tr_bq">
<html xmlns:fb='http://www.facebook.com/2008/fbml'</blockquote>
</div>
<div>
 
</div>
<div>
6. Find For <body> tag and add the following code just after it. 
 
 </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>
<div id='fb-root'/> 
 
<script> 
 
        window.fbAsyncInit = function() { 
 
        FB.init({ 
 
          appId  : 'YOUR_APP_ID', 
 
          status : true, // check login status 
 
            cookie : true, // enable cookies to allow the server to 
 
     access the session 
 
          xfbml  : true  // parse XFBML 
 
        }); 
 
      }; 
 
        (function() { 
 
        var e = document.createElement('script'); 
 
          e.src = document.location.protocol +   '//connect 
 
    .facebook.net/en_US/all.js'; 
 
        e.async = true; 
 
          document.getElementById('fb-root'). 
 
    appendChild(e); 
 
        }()); 
 
    </script> 
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
 
 
Note:: Replace YOUR_APP_ID with your app id you just noted down. 
 
<div style="border: 2px dashed red; color: black; height: 20px; width: 300px;">
<div style="text-align: left;">
  Facebook Open graph tags</div>
</div>
 
7. Now search for </head> and add these open graph meta tags just above it. 
 
<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>
<meta expr:content='data:blog.pageTitle' property='og:title'/> 
 
<meta expr:content='data:blog.url' property='og:url'/> 
 
<meta content='Helper Bloggers ' property='og:site_name'/> 
 
<meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/> 
 
<meta content='YOUR_APP_ID ' property='fb:app_id'/> 
 
<meta content='http://www.facebook.com/bloggertricksdotbiz' property='fb:admins'/> 
 
<meta content='article' property='og:type'/> 
<div style="background-color: white;">
</div>
</blockquote>
</div>
 
 
Note:: 
<div style="font-family: inherit;">
Replace Blogger Tricks with your blog name.</div>
<div style="font-family: inherit;">
Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.</div>
<div style="font-family: inherit;">
Replace YOUR_APP_ID with your app id.</div>
<div>
Replace http://www.facebook.com/bloggertricksdotbiz with your Facebook page url.</div>
<div>
 </div>
<div>
<h3 style="text-align: left;">
Facebook Comment box widget code</h3>
8. Now search for this code. 
 </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>
<b:includable id='comment-form' var='post'> 
<div style="background-color: white;">
</div>
</blockquote>
<div>
<blockquote class="tr_bq">
 </blockquote>
</div>
<div>
Add the following code just below it. 
 </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>
<b:includable id='comment-form' var='post'> 
 
Add the following code just below it. 
 
<b:if cond='data:blog.pageType == "item"'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'> 
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div> 
 <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='500'/></div> 
</div> 
</b:if> 
<div style="background-color: white;">
</div>
</blockquote>
<div>
<blockquote class="tr_bq">
Note:: </blockquote>
</div>
<div>
<ul style="text-align: left;">
<li>You can change the width of widget by replacing 500 with your desired width.</li>
<li>As you all know you can change the color scheme to light or dark.</li>
</ul>
</div>
<div>
</div>
<div>
9. Save your Template.</div>
<div>
</div>
<div>
</div>
<div>
That's It pals. . .</div>
<div style="font-family: inherit;">
</div>
</div>

Add Facebook Comments form to Blogger Blogs

F acebook have successfully released many of the resources and plugins for bloggers. In the whole plugins of Facebook, LIKE and Shar...

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