Helper Blogger: Social Sharing Widgets

Showing posts with label Social Sharing Widgets. Show all posts

Social Bookmarking Widget With Tooltips 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 dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdO8DzAT3JukulsVvq8sNZpUsaijNOeWajJBHnQs5KufknUM6rbIEXdPktnrRhBbIhopntZCYl3-tZ-iholF0W4UZSl8huhadr5P3h1DJxb2lP3XRQ7Vo_KwxIc-JvZrnEuegsODf4YnU/s1600/social-bookmarking-widget-for-blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdO8DzAT3JukulsVvq8sNZpUsaijNOeWajJBHnQs5KufknUM6rbIEXdPktnrRhBbIhopntZCYl3-tZ-iholF0W4UZSl8huhadr5P3h1DJxb2lP3XRQ7Vo_KwxIc-JvZrnEuegsODf4YnU/s1600/social-bookmarking-widget-for-blogger.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Social bookmarking widget is need of every blogger thats why you see 
such gadgets almost on every blog.Social bookmarking widgets helps you 
to boost traffic on your blog.Today I am sharing an amazing social 
bookmarking widget which comes with beautiful animated tooltips,when any
 user hovers on the social icons the tooltip comes out also it applies a
 opacity effect to these social icons,this effect increase beauty of 
this widget.Credit for this widget goes to Shareaholic.Now lets see hoe 
to add it to your blog,also <b>see the demo at the bottom of this post</b>.<br />
<br /></div>
</div>
<div style="border: 2px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify;">
How To Add This Widget To Blogger?</div>
<br />
<br />
I have created a blogger widget generator form for this widget.Follow below simple steps to add this widget to your blog.<br />
<br />
<br />
<ol style="text-align: left;">
<li><span style="background-color: white;"><b>You must login to your blogger account first.</b></span></li>
<li><span style="background-color: white;">Click on below <b>Add to Blogger</b> button</span></li>
<li><span style="background-color: white;">Now you will redirect to blogger add widget page</span></li>
<li><span style="background-color: white;">Choose your blog and add click on <b>Add Widget</b> button</span></li>
<li><span style="background-color: white;">Drag the widget at the bottom of your page layout</span></li>
<li><span style="background-color: white;">Finally click on <b>Save Arrangements</b> button and you are done.   </span></li>
</ol>
</div>
<center>
 </center>
<br /><center>
<span style="-moz-border-radius: 10px; border-bottom: #48a1fa 10px solid; border-left: #48a1fa 10px solid; border-radius: 10px; border-right: #48a1fa 10px solid; border-top: #48a1fa 10px solid; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; padding-top: 6px;"><a href="http://baloch2days.blogspot.com/" rel="nofollow" target="_blank">Live Demo</a> </span></center>
<form action="http://www.blogger.com/add-widget" method="POST" target="_blank">
<input name="widget.title" type="hidden" value="Social Bookmarking Widget With Animated Tooltips" /><input name="widget.content" type="hidden" value="<b:if cond='data:blog.pageType == "item"'> 

<script type="text/javascript">
  var SHRCB_Settings = {"shr_classic":{"size":"32","link":"","service":"5,7,313,309,78,304,88","apikey":"2fc518bd8c0bb3cf45bdade11877971c1","shortener":"bitly","shortener_key":"","designer_toolTips":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
  var SHRCB_Globals = {"perfoption":"1"};
  </script>

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

Add Facebook Recommendations Bar To 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 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/AVvXsEjTzzElPptogR6OaqqfMR0BcZZtPy-4LboNb5popCLD4tg2U9HyFVyPZS5lxjEFTRq4WzeHXe2nOYJAmjWoGOhQk6OXGmCZ9I5Lxu05E7yvT497bcen2VRh2L4xdPnK6A5TNQm-kMf_0-8/s1600/SRFile2012_8_15_8_57_13_796.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTzzElPptogR6OaqqfMR0BcZZtPy-4LboNb5popCLD4tg2U9HyFVyPZS5lxjEFTRq4WzeHXe2nOYJAmjWoGOhQk6OXGmCZ9I5Lxu05E7yvT497bcen2VRh2L4xdPnK6A5TNQm-kMf_0-8/s320/SRFile2012_8_15_8_57_13_796.png" width="320" /></a></div>
Finally the plugin I had been waiting for since 22nd 
September 2011. In order to engage readers more and let your visitors 
spend more time on your website Facebook has finally launched the "<b>Recommendations Bar</b>"
 in beta version. It's designed to display additional recommended 
articles right after readers have finished reading an article or spent 
some time on your blog. It will collapse on page load and expand once a 
reader has reached a specific location on your blog or finished reading 
the post. Only those articles are displayed that are previously liked or
 shared on Facebook. The number of likes are displayed under each 
article along with page title and a thumbnail. It also contains a like button and previously contained an Add to Timeline button that has been removed now. Unlike Facebook <b>Recommendations box</b>
 which offered related stories but with lack of user friendly interface 
and engagement, Facebook bar will force readers to stay longer on your 
site leading to increased pageviews, page impressions and thus traffic. It's a smart alternative to Recommended Post Slides widgets that we previously published.   <a href="http://www.blogger.com/blogger.g?blogID=5633879042047294684" name="more"></a>  <br />
If you are a <span style="background-color: #809ec2; color: white;"><b>Wordpress</b></span> user you may follow this tutorial:<br />
<br />
<br />
See the <span style="background-color: yellow;">demo live on our blog</span> towards the bottom-right corner. Don't forget to press the like button to let your friends know that you visited this page :)<br />
<br /></div>
<div style="border: solid 3px red; color: red; font-size: 18px; line-height: 0px; margin: 0; padding: 11px; text-align: justify;">
Install it on Blogger </div>
It can be installed easily on both BlogSpot blogs and Wordpress but with a little patience. We have kept the installation extremely easy and ignored unnecessary steps like installation of Open Graph Meta Tags. We would install necessary codes to keep the structure clean and make the widget work just fine. The code we are sharing is optimized and will display your blog titles and featured images correctly and with a lot of control attributes.

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.<br />
<br />
<span style="font-size: medium;"><b><u>Step1: <span style="color: #008040;">Create a Facebook Application</span></u></b></span><br />
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. <br />
<ol>
<li>Log into <a href="https://developers.facebook.com/apps/" target="_blank">Facebook Apps</a> </li>
<li>Click on <b><i>Create New App</i></b> 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 "<i>My Recommendation Bar</i>" inside the<b> App name</b> field and leave other options as default. Click <b>continue</b>.</li>
</ol>
<br />
<br />
<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 <b>Submit</b>  <br />
     5.  You are app is almost complete. Just click <b>Website with Facebook Login</b> tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click<b> Save Changes</b>. <br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<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.<br />
<br />
<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>
<br />
Congrats App finally created! Lets proceed to step2. <br />
<span style="font-size: medium;"><b><u>Step2: <span style="color: #008040;">Add "Recommendations Bar" To Your Blog</span></u></b></span><br />
Follow these steps to add the bar to Blogger:<br />
<ol>
<li>Go to Blogger > <b>Template</b> </li>
<li>Backup your template </li>
<li>Click <b>Edit HTML</b> > <b>Proceed</b> </li>
<li>Search For this :  </li>
</ol>
</div>
<br /></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
<br />
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
<br />
Replace it with this code: <br />
<br /></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#'
<br />
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
<br />
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.<br />
     5.   Next search for <b><body></b>   and just below this tag paste the following code:<br />
<span style="background-color: yellow;">Note:</span> If you are using the new blogger templates like<i> Simple, Awesome Inc., Travel, Watermark </i>or <i>Picture window</i> then please search for <b><body</b> instead. Make sure to paste the code below the entire body tag.<br />
<br />
<br /></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'/><br />
    <script><br />
    //Facebook Recommendation bar by http://helperbloggers.blogspot.com<br />
    //<![CDATA[<br />
<br />
    (function(d, s, id) {<br />
      var js, fjs = d.getElementsByTagName(s)[0];<br />
      if (d.getElementById(id)) return;<br />
      js = d.createElement(s); js.id = id;<br />
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your App Id Here";<br />
      fjs.parentNode.insertBefore(js, fjs);<br />
    }(document, 'script', 'facebook-jssdk'));<br />
<br />
    //]]><br />
    </script><br />
    <b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'><br />
    <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='Your Blog Url Here' trigger='40%'/></div><br />
</b:if></b:if><br />
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
<br />
You are almost done. Make these changes:<br />
<ul>
<li>Replace <span style="background-color: black; color: white;">Your App Id Here</span> with your 15 digit App Id that you saved in step1. </li>
<li>Replace <span style="background-color: black; color: white;">Your Blog Url Here</span> with your blog link </li>
</ul>
     6.   Save your template and you are all done!<br />
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! :)<br />
<br />
<div style="border: 3px solid red; color: red; font-size: 18px; line-height: 0px; margin: 0px; padding: 11px; text-align: justify;">
Optional Steps</div>
<br />
<br />
Below are optional customization and control options. You can skip them if you want<br />
<ul>
<li><span style="font-size: x-small;"><b>max_age:</b></span> 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 <span style="background-color: #9bbb59;">1</span>-<span style="background-color: #9bbb59;">180</span> days old posts. But if you don't want to take age into account then let it be <span style="background-color: #9bbb59;">0</span> as default. </li>
<li><span style="font-size: x-small;"><b>num_recommendations:</b></span> You can set how many articles to display. By increasing or decreasing the value <span style="background-color: #4bacc6;">3</span> </li>
<li><b><span style="font-size: x-small;">read_time:</span></b>
 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 <span style="background-color: #809ec2;">10</span>  seconds, you can increase it to 30 or more as you wish. </li>
<li> <span style="font-size: x-small;"><b>side:</b>  You can decide the location of plugin. By default it shows up towards the bottom <span style="background-color: #f79646;">right</span> corner of your page. You set it to float to <b>left</b></span> </li>
<li><span style="font-size: x-small;"><b>trigger:</b></span> 
 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. <b>onvisible</b>, <b>X%</b> or <b>manual</b>.
 I prefer locating the trigger point by percentage for better pageviews.
 The widget will expand as soon as the user scroll downs <span style="background-color: #a5a5a5;">40%</span>
 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 <b>data:post.body</b> 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 <span style="color: #8064a2;"><b>purple bolded lines</b></span>. </li>
</ul>
<u><span style="color: green; font-size: small;"><b>Troubleshooting :</b></span></u>   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 <b><head></b> tag inside your template<br />
<br />
<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'/><br />
<br />
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><br />
<br />
<meta expr:content='data:blog.title' property='og:site_name'/><br />
<br />
<meta expr:content='data:blog.pageName' property='og:title'/><br />
<br />
<b:if cond='data:blog.metaDescription != ""'><br />
<meta expr:content='data:blog.metaDescription' name='description'/><br />
</b:if><br />
<div style="background-color: white;">
</div>
</blockquote>
</div>
<br />
<br />
Save your template and now see the plugin if it correctly shows page titles both on your blog and Facebook.<br />
<br /></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 »

Slide Out Floating Share Buttons For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content">
<br />
<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/AVvXsEjiwvLfOJS3OpRBk8pJhvY6BfBH63HnU9C3tW_hsXAJ0zyNX8mtJNlxiRO-eOR_5ArzAsWSUqzOoQ75sdP6hpeTL9P8xmuBR5N1StdywEQUDVBWrP3jJAPS9WXz6mAilPYXBshHnDUIm6c/s1600/slide-out-floating-sharing-buttons-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwvLfOJS3OpRBk8pJhvY6BfBH63HnU9C3tW_hsXAJ0zyNX8mtJNlxiRO-eOR_5ArzAsWSUqzOoQ75sdP6hpeTL9P8xmuBR5N1StdywEQUDVBWrP3jJAPS9WXz6mAilPYXBshHnDUIm6c/s1600/slide-out-floating-sharing-buttons-for-blogger.png" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
Today I am sharing an amazing slide out social sharing widget,when any user hovers on this widget it slide out with some social networking button such as twitter,facebook,print,email and add this button which contains share option for almost all social sharing sites.This widget floats to below right corner of the page and scrolls along with page which allow a real time sharing option for your visitors,this widget is created by <a href="http://www.addthis.com/" target="_blank">addthis</a> and bloggerized by us.Now lets go to the tutorial and see how to add this widget to blogger blog.</div>
<br />
<br />
<center>
<a class="button blue medium" href="http://helperbloggersdemo.blogspot.com/" target="_blank">Live Widget Demo</a></center>
<br />
<br />
<h2 style="color: blue; text-align: left;">
How To Add This Widget To Blogger?</h2>
The installation of this widget is damn easy,you can add this widget in two steps.<br />
<br />
<ol style="text-align: left;">
<li><span style="background-color: white;">Go to <b>Blogger Dashboard > Template</b></span></li>
<li><span style="background-color: white;">Click On <b>Edit HTML</b></span></li>
<li><span style="background-color: white;">Hit <b>Proceed</b> button</span></li>
<li><span style="background-color: white;">Find For Below Code,</span></li>
</ol>
<br />
<br />
<pre class="brush:html;"></head></pre>
<br />
add below code just above it,<br />
<br />
<pre class="brush:html;"><script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script></pre>
<br />
Now find for below code<br />
<br />
<pre class="brush:html;"></body></pre>
<br />
add below code just before/above it,<br />
<br />
<pre class="brush:html;">
<div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style">
    <a class="addthis_button_more">Share</a>
    <ul>
        <li><a class="addthis_button_preferred_1"></a></li>

</ul>
</div>
</pre>
<br />
Finally save your widget and you are done :)</div>
</div>
</div>

Slide Out Floating Share Buttons For Blogger

Today I am sharing an amazing slide out social sharing widget,when any user hovers on this widget it slide out with some social n...

+ Read more »

Fixed Position Scrolling Sticky Bar

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content">
<br />
<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/AVvXsEi5sOVNvFEQM6S3GSIdH1mNILZPehB7z9bPm0o4wSUCYUCKph0W_E3RkmueNIdV5zmD267OGrTWIGDNyz7OHmS1kTBdhRRNBKlF2Mjpzo-_9lshYD3r_6VAFlE8B4Z2_P2J3jCz4qgplk4/s1600/fixed-position-scrolling-sticky-bar-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5sOVNvFEQM6S3GSIdH1mNILZPehB7z9bPm0o4wSUCYUCKph0W_E3RkmueNIdV5zmD267OGrTWIGDNyz7OHmS1kTBdhRRNBKlF2Mjpzo-_9lshYD3r_6VAFlE8B4Z2_P2J3jCz4qgplk4/s1600/fixed-position-scrolling-sticky-bar-for-blogger.png" /></a></div>
<br />
<br />
Now days concept scrolling bar or sticky bar has becomes very popular because of their attention grabbing capacity,they quickly catches any ones attention on them that's why I am also using a sticky bar(hellobar) on my blog.Today I am gonna to share a cool scrolling sticky bar which contains many subscription/sharing options such as twitter tweet button,google +1 button,facebook like button,email subscription form also it contains a random post button which will redirect you to another(any random) post.This sticky will sticks to upper part of page and only visible when scroll down.Now lets get started and see how to add this sticky bar to blogger blog.To add to sticky bar I will recommend you to use old blogger user interface because as per widget author it throws an unexpected error,you can switch back to old blogger interface by clicking on the Settings Wheel icon at top right of your new blogger dashboard.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgza1UlypML16Fxw419oBSlKTU2K7QP32Kp4Fpcx6MMvhfNbb3Jv_cFGjnxRiTS-a68a30AJBOUNhbf16B8IFMmReyqVr6l4TUDpf4E96GTpBqEUtcwn08CILQplf4HTx77szxNFwBsuLA/s1600/sticky-bar-for-blogger.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="17" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgza1UlypML16Fxw419oBSlKTU2K7QP32Kp4Fpcx6MMvhfNbb3Jv_cFGjnxRiTS-a68a30AJBOUNhbf16B8IFMmReyqVr6l4TUDpf4E96GTpBqEUtcwn08CILQplf4HTx77szxNFwBsuLA/s400/sticky-bar-for-blogger.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Click On Image To Enlarge</td></tr>
</tbody></table>
<br /></div>
<h3>
How To Add Scrolling Sticky Bar To Blogger?</h3>
<br />
<h4 style="text-align: left;">
<b>Step 1 : Adding The HTML</b></h4>
<br />
<ol style="text-align: left;">
<li>Go to <b>Blogger Dashboard > Template</b></li>
<li><b>Download a copy of your template</b></li>
<li>Click on <b>Edit HTML</b></li>
<li>Hit <b>Proceed</b></li>
<li>Find for below code,</li>
</ol>
<br />
<pre class="brush:html;"><body></pre>
<br />
<i>Note - If you are using default blogger templates then search for <b><body</b> tag.Watch video below for exact information.</i><br />
<br />
add below code just <b>below of above code</b>,<br />
<br />
<pre class="brush:html; highlight:[4,15,16];"><div id='HB-Bar-Container'>
<div id='HB-Bar-Content'>
<ul id='HB-Bar-Left'>
<li class='Home'> <a href='http://helperbloggers.blogspot.com/'>Home</a> </li>
<li class='Share'> <div id='share-top'>

<ul>
<li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>
<li> <g:plusone size='medium'></g:plusone> </li>

<a href="http://helperbloggers.blogspot.com/" title="Blogger Widgets" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div></li>
<li class='btt'> <a href='#top' title='Back to top'>Slide to Top &#8593;</a> </li>
</ul></div></div>

</pre>
<br />
<ul style="text-align: left;">
<li>Line No. 4 : Replace http://helperbloggers.blogspot.com/ with your blog URL.</li>
<li>Line No. 16,16 : Replace HBlogger with your feedburner username.</li>
</ul>
</div>
<br />
<h4>
Step 2 : Adding The Scripts</h4>
<br />
Now find for below code,<br />
<br />
<pre class="brush:html;"></body></pre>
<br />
add below code just <b>before/above it</b>,<br />
<br />
<pre class="brush:js;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> 
<script>
//<![CDATA[
var b = $("#HB-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});
//]]>

</script> 
<script>
$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click 
$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});
</script>   
<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>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script></pre>
<br />
<br />
<h4>
<b>Step 3 : Adding The Bar Styles</b></h4>
<br />
Now find for<br />
<br />
<pre class="brush:html;">]]></b:skin></pre>
<br />
add below code just <b>above it</b>,<br />
<br />
<pre class="brush:css;">#HB-Bar-Container {
background-color:#f6f6f6;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
}

#HB-Bar-Container , #HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit {
 box-shadow: 0 5px 5px -5px #999;
 -webkit-box-shadow: 0 5px 5px -5px #999;
 -moz-box-shadow: 0 5px 5px -5px #999;
 }

#HB-Bar-Container{
margin: 0px 116px;
 top:-100px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
 text-align:center;
 border-bottom: 1px solid #aaa;
 z-index:999;
padding:4px;
 height:33px;
  position:fixed;
  vertical-align: baseline;
  }

#HB-Bar-Container *{
padding:0;
}

#HB-Bar-Container a {
text-decoration:none;
}

#HB-Bar-Content{
width:1024px;
margin:0 auto;
}

#HB-Bar-Content li{
list-style:none;
float:left;
}

#HB-Bar-Left{
float:left;
width:45%;
}

#HB-Bar-Right{
float:right;
width55%;
}

#HB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}

#HB-Bar-Right li{
margin-top:-7px;
}

#HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit{
font-size:9pt;
font-family:cambria;
font-weight:Bold;
text-transform:uppercase;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
letter-spacing: 1px;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

#HB-Bar-Left .Home a:active, #HB-Bar-Right .btt a:active,.HB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}

#HB-Bar-Left .Home a{
background:#143eb4;
}

#HB-Bar-Left .Home a:hover{
background:#1556fa;
}

#HB-Bar-Right .Subscribe{
margin-top:-14px;
}

#HB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}

#HB-Bar-Right .btt a:hover{
background:#06b421;
}

.HB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.HB-emailsubmit:hover{
background: #f02a37;
}
.textarea{
border:1px solid #aaaaaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
resize:none;
font-size:8pt;
font-family:verdana;
width:170px;
height:25px;
color:#000000;
}

#share-top{
background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;
margin: -4px 0 0 60px;
padding: 10px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

#share-top li {
display: block;
margin-right: 0;
}

#facebook-widget,#google-widget,#twitter-widget {display:none; }
@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#HB-Bar-Container{
display:none;
}
}</pre>
<br />
Finally save your template and visit your blog.</div>
<br /></div>
</div>
</div>

Fixed Position Scrolling Sticky Bar

Now days concept scrolling bar or sticky bar has becomes very popular because of their attention grabbing capacity,they quickly c...

+ Read more »