Helper Blogger: Facebook

Showing posts with label Facebook. 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 »

Add Facebook Recommendations Bar To Blogger

Follow these easy steps:

Step1: Create a Facebook Application

For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like.

Log into Facebook Apps
 Click on Create New App button towards Top-rightcreate new app
 In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue. 
 
Step1: Create a Facebook Application 
For
 this plugin to work you will need to create a Facebook App in seconds. 
The below method is the standard and correct method for creating any FB 
App you like. 
<ol>
<li>Log into <a href="https://developers.facebook.com/apps/" target="_blank">Facebook Apps</a> </li>
<li>Click on Create New App button towards Top-right<img alt="create new app" border="0" height="23" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0KUIo2QM1uWlIqIStxHggcIfFS1veMuHhntnCqefnWFwEYQIc18RgI4ls1sYCmFtdVW3-lPTk9BbCNRHrQUmdbHmZ33Kf9ZwjxWC_vj4gvTSZY0cQam4J_TsZMrkvH6rFMw7Zl_5E_Y/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="create new app" width="124" /> </li>
<li>In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.</li>
</ol>
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikvO_VDI7hdBui7VI7-mzjUFxmZxVmK1tdv0oJiRd0IK5mGwUi4sZT1v1X5n6Xw8EccY2XqP57ZYXjfwdrsCZiZeDtZ05rP5tniY3VU-3Oh_9QncteT4FuxzVTlUzRCKHP3vaMbWOYJ7g/s1600/SRFile2012_8_15_8_52_58_921.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikvO_VDI7hdBui7VI7-mzjUFxmZxVmK1tdv0oJiRd0IK5mGwUi4sZT1v1X5n6Xw8EccY2XqP57ZYXjfwdrsCZiZeDtZ05rP5tniY3VU-3Oh_9QncteT4FuxzVTlUzRCKHP3vaMbWOYJ7g/s400/SRFile2012_8_15_8_52_58_921.jpg" width="400" /></a></div>
  4.   Enter the captcha security code. Click Submit 
     5.  You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes. 
<div class="separator" style="clear: both; text-align: center;">
</div>
 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmrHzKNxHJAe_ZtW4AYCBaJgCPkatbpUonC7ED9228dCy0UTxjBxOsiXxW5h1wT15nSdGIGCcFIH6TIDabNBPn5ghcUPydyoplbgPNWTyNpZOjxsWLTw6cMs3U3hWZiGDxuQWpAdffus/s400/SRFile2012_8_15_8_54_17_890.png" width="400" /></div>
6.   You will see two strings of alpha-numerical characters. One is App
 ID and the other is App secret. Just copy the App ID code and keep it 
save in a notepad. We will need it later. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVx7QhpIu6HagAsyBfFao2wKzipdq4G2VBhlmJSOLA0YlS19nKHNYTg16P1i4ZbGR9KnkcsPohv7UoWN6RBYrpmYja2NTChXPxko-FnPn9M4dMwJ9FxKgtbs6RxuvubPPbOXsZrq5BPp0/s1600/SRFile2012_8_15_8_54_49_921.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVx7QhpIu6HagAsyBfFao2wKzipdq4G2VBhlmJSOLA0YlS19nKHNYTg16P1i4ZbGR9KnkcsPohv7UoWN6RBYrpmYja2NTChXPxko-FnPn9M4dMwJ9FxKgtbs6RxuvubPPbOXsZrq5BPp0/s400/SRFile2012_8_15_8_54_49_921.png" width="400" /></a></div>
 
Congrats App finally created! Lets proceed to step2. 
Step2: Add "Recommendations Bar" To Your Blog 
Follow these steps to add the bar to Blogger: 
<ol>
<li>Go to Blogger > Template </li>
<li>Backup your template </li>
<li>Click Edit HTML > Proceed </li>
<li>Search For this :  </li>
</ol>
</div>
 </div>
</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>
<html
 
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
 
Replace it with 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>
<html xmlns:fb='http://ogp.me/ns/fb#'
 
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
 
This will make the plugin compatible in older versions of  internet 
explorer also. Since blogger templates are coded in XML therefore 
inserting this XML namespace will enhance the plugin performance and 
compatibility. 
     5.   Next search for <body>   and just below this tag paste the following code: 
Note: If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then please search for <body instead. Make sure to paste the code below the entire body tag. 
 
 </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> 
    //Facebook Recommendation bar by http://helperbloggers.blogspot.com 
    //<![CDATA[ 
 
    (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&appId=Your App Id Here"; 
      fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
 
    //]]> 
    </script> 
    <b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'> 
    <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='Your Blog Url Here' trigger='40%'/></div> 
</b:if></b:if> 
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
 
You are almost done. Make these changes: 
<ul>
<li>Replace Your App Id Here with your 15 digit App Id that you saved in step1. </li>
<li>Replace Your Blog Url Here with your blog link </li>
</ul>
     6.   Save your template and you are all done! 
Visit
 your blog and scroll down about 50% of your page and wait for 10 
seconds for the plugin to expand. Enjoy the new way of free pageviews 
juice! :) 
 
<div style="border: 3px solid red; color: red; font-size: 18px; line-height: 0px; margin: 0px; padding: 11px; text-align: justify;">
Optional Steps</div>
 
 
Below are optional customization and control options. You can skip them if you want 
<ul>
<li>max_age: will decide the age limit of articles. Sometimes you don't want to display too old articles so you can set it to display up to 1-180 days old posts. But if you don't want to take age into account then let it be 0 as default. </li>
<li>num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3 </li>
<li>read_time:
 As soon as the user reaches a specified location, the plugin would 
expand and before expanding it will take some time. I have kept it equal
 to 10  seconds, you can increase it to 30 or more as you wish. </li>
<li> side:  You can decide the location of plugin. By default it shows up towards the bottom right corner of your page. You set it to float to left </li>
<li>trigger: 
 On page load the plugin collapses and as soon as it reaches a specified
 location it expands. You can choose that location in three ways i.e. onvisible, X% or manual.
 I prefer locating the trigger point by percentage for better pageviews.
 The widget will expand as soon as the user scroll downs 40%
 of your page. You can increase or decrease this value. If you wish that
 the plugin must expand as soon as the reader reaches the end of your 
article then instead of pasting the code between the purple lines  paste
 it just below data:post.body tag and use the value onvisible instead of 40%. </li>
<li>The
 widget will display only on post pages and not on homepage or static 
pages. To display it on all pages, then simply delete the purple bolded lines. </li>
</ul>
Troubleshooting : Since
 Most templates are not well structured and require installation of meta
 tags to tell Facebook to fetch correct page titles, thumbnails and blog
 title. To do this simply paste the following code just below <head> tag inside your template 
 
<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 content='article' property='og:type'/> 
 
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> 
 
<meta expr:content='data:blog.title' property='og:site_name'/> 
 
<meta expr:content='data:blog.pageName' property='og:title'/> 
 
<b:if cond='data:blog.metaDescription != ""'> 
<meta expr:content='data:blog.metaDescription' name='description'/> 
</b:if> 
<div style="background-color: white;">
</div>
</blockquote>
</div>
 
 
Save your template and now see the plugin if it correctly shows page titles both on your blog and Facebook. 
 </div>

Add Facebook Recommendations Bar To Blogger

Finally the plugin I had been waiting for since 22nd September 2011. In order to engage readers more and let your visitors ...

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