Helper Blogger

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 »

Breadcrumbs Navigation Widget For Blogger

<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='breadcrumb' var='posts'> 
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<b:if cond='data:blog.pageType == "static_page"'> 
<div class='breadcrumbs'> 
 <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> » <data:blog.pagename/> 
</div> 
<b:else/> 
<b:if cond='data:blog.pageType == "item"'> 
 
<b:loop values='data:posts' var='post'> 
<b:if cond='data:post.labels'> 
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"> 
 <a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a> 
 <b:loop values='data:post.labels' var='label'> 
 <b:if cond='data:label.isLast == "true"'> 
 » <a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a> 
 </b:if> 
 </b:loop> 
 » <data:post.title/> 
</div> 
<b:else/> 
<div class='breadcrumbs'> 
 <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> » Unlabelled » <data:post.title/> 
</div> 
</b:if> 
</b:loop> 
<b:else/> 
<b:if cond='data:blog.pageType == "archive"'> 
 
<div class='breadcrumbs'> 
 <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pagename/> 
</div> 
<b:else/> 
<b:if cond='data:blog.pageType == "index"'> 
<div class='breadcrumbs'> 
 <b:if cond='data:blog.pageName == ""'> 
 <a expr:href='data:blog.homepageUrl'>Home</a> » All posts 
 <b:else/> 
 <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pagename/> 
 </b:if> 
</div> 
</b:if> 
</b:if> 
</b:if> 
</b:if> 
</b:if> 
</b:includable> 
</blockquote>
</div>
 
 
 * This code will only display the last label of the post in the 
breadcrumb. If you want to display all the labels, then you will have to
 remove the code in line number 16 and 18. 
 
Now find below code,

Breadcrumbs Navigation Widget For Blogger

Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way ( ...

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

Floating Google +1, Facebook, Twitter Buttons For Blogger

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

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

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

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

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

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

Make these changes:

Replace helperbloggers with your Twitter username

4. Save your widget and you are almost done!

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

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

</head>

Just above it paste the following code,

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

6. Save your template and say Bingo!

Floating Google +1, Facebook, Twitter Buttons For Blogger

UPDATE:- To add a floating widget to the left of all your posts like in this blog then please read: Floating Counters Next To Posts ...

+ Read more »

Add Facebook Recommendations Bar To Blogger

Breadcrumbs Navigation Widget For Blogger

Stay Connected Gadget With All Subscription Options For Blogger

Floating Google +1, Facebook, Twitter Buttons For Blogger

The Professional "My Blog Blogger Template