Latest Movie :
Recent Tricks
Showing posts with label Facebook Widgets for blogger. Show all posts
Showing posts with label Facebook Widgets for blogger. Show all posts

How to add floating , animated facebook like widget

How to add floating , animated facebook widget in blogger.so this new work is all about social share scrolling buttons widget to your blogger blog. Its very easy to use while adding it to blogger it also more easy just follow the setups the i tell it to you, you will easily get the scrolling social buttons to your blog.

You know that social points to any of the blog is much importance to get better look at natural level its also good for search engine and counted as a positive vote. Search engine bring positive visibility of the page URL which has more social votes to it. So now i am sharing this nice gadget to you that how to add it to blogger. You can also read the post how to add social share icons to blogger in a blogger side column its also useful.

This gadgets look like these.


So here it is how to install it.

  • Go to your blogger dashboard
  • Select your blogger blog
  • Click on Layout from Drop Down menu (shown in picture)

  • A new Window appear
  • Click on Add gadget
  • And select HTML/JavaScript
  • Next Box of HTML/JavaScript will appear (shown in picture)
    

  • Now the box of HTML/JavaScript will appear when you click on the box.
  • Now you have to paste the following code to install the gadget to your blog.
  • Its not so difficult to add just copy it and paste it in the box like shown above.



Adding the code social buttons looks like this 


                Add This Code
       



Adding the code social buttons looks like this

                                                                                 Add This Code
                                   

I personally added 8 total social network in this gadget you can easily edit them here it is
  • Just remove the line in the code 
  • Like if you want to remove MySpace.com button remove this line from the code
                                <a class="addthis_button_myspace"></a>
These 8 social networks are here
    Facebook.com                        Twitter.com
    Delicious.com                         Pinterest.com
    Digg.com                                Orkut.com
    Googleplus.com                      Myspace.com



    Adding the code social buttons looks like this

                                                                                   Add This Code
                                       


    You can also remove or edit the code and here is also 8 networks added just see the above method how to remove the 1 network you just have to remove the line in the code that's it.

    So these are the 3 top gadgets for social share buttons they are the most useful gadget for every blogger blog should add it on their page.

    While adding this gadget is not so difficult its scrolled when the page is scrolled down or up, its bring more social share to the webpage.
    Thanks for watching this, Keep watching our website , www.bloggingtranings.blogspot.com, contact me 0323-7591466.

    Facebook Popup like box widgets for blogger and for website

    To day i am going to provide you some beautiful facebook popup like box widgets for blogger and for your website. you can easily embed this code in your html page.Well here i am making a Facebook like popup box for blogger which is also nice to install.When you install it it and when someone visit you any blog page it will display on the front which ask you to like the page and its very simple and clean.

    Here is screenshot of this widget

    1




    So you have to do these steps to install it on your blogger blog


              1.  Go to blogger dashboard  >  Layout
              2.  Now click on  >  Add a gadget
              3.  A box will appear select  >  HTML/Java Script box by scrolling until you find it
              4.  Now paste this code into the box and click on  >  Save




    Remember, At end of this code you will find mbgadget  words replace it with your own fb like page username.

    2


    So this new gadget looks like this




    So you have to remember in this code you have to find mbgadget and replace it with your Facebook username. 

    So here is the more info about this box:

    So now i am explaining the every part of this widget which is only for blogger blog. so here it is,
    If we look that this box is very easy to install on any kind of blogger blogs, you just have to copy the code and paste it into the HTML gadget to the inside section of blog.
    Its not very difficult to do so, You don't need to edit any type of template code to add this gadget it very easy to install.
    Well while looking at the structure of the box then this box is more better then ever. Its very simple and clean you can easily understand that what type of this box is, Its normal display the like button of your facebook page it bring more likes.

    This widget bring attention to your facebook fan page to like it and get updates from the fan page, if your blog is better and bring much better results and traffic then its good for you to add it up.

    As i think this is one of the most powerful way to increase your fan page likes, if you have a little blog on blogger then you have to add this on your blog, its really boost your likes of fan page. Its simple work that, a visitor come to your website because of your brilliant content and if he really impress then he like your page.
    Please keep watching our website and keep downloading and getting instructions from my website if you have any problem you may contact me. 0323-7591466, keep visiting my website www.bloggingtrainings.blogspot.com.

    Floating Facebook Like Box Widget For Blogger




    In This Post i will show you how to add a Floating Facebook Like Box Widget For Blogger. 
    This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This widget can help you to increase facebook likes. You just need to our small code to your blogger blog. Currently this widget is only for Bloggeer/Blogspotblogs.

     
    1. Go to Design > Page Elements.
    2. Click Add A Gadget.
    3. Select HTML/Javascript .
    4. Paste the following code inside it,
    <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggertools1&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://all-blogger-tools.blogspot.com">blogger widget</a></span> </div> </div>

    5. Replace allbloggertools1 With Your Facebook Page Username
    We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.


    Add Floating Share Buttons Widget For Blogger Blogspot



    This widget will allow your visitors to share your blog posts on social networks such as google+, facebook, twitter ...

    The design is very attractive widget with animation from top to bottom and encourages readers to share your article easily by clicking on one of these buttons.
    we spend now to install this widget


  • Go To Blogger > Design
  • Choose a HTML/JavaScript widget
  • Paste the following code inside it,
  • <style>
  • /*-------All Blogger Tools------------*/
  • #floatdiv {
  • position:absolute;
  • width:94px;
  • height:229px;
  • top:0;
  • left:0;
  • z-index:100
  • }

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


  • <div id="floatdiv">
  • <div id="mbtsidebar">
  • <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="allbloggertool1">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;">
  • <p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://all-blogger-tools.blogspot.com/" target="_blank">Widgets</a></p>
  • </td>
  • </tr>
  • </table>
  • </div>
  • </div>
  • <script type="text/javascript">
  • // JavaScript Document

  • <!--
  • /* Script by: www.jtricks.com
  • * Version: 20071017
  • * Latest version:
  • * www.jtricks.com/javascript/navigation/floating.html
  • */
  • var floatingMenuId = 'floatdiv';
  • var floatingMenu =
  • {
  • targetX: 0,
  • targetY: 300,
  • hasInner: typeof(window.innerWidth) == 'number',
  • hasElement: typeof(document.documentElement) == 'object'
  • && typeof(document.documentElement.clientWidth) == 'number',
  • menu:
  • document.getElementById
  • ? document.getElementById(floatingMenuId)
  • : document.all
  • ? document.all[floatingMenuId]
  • : document.layers[floatingMenuId]
  • };
  • floatingMenu.move = function ()
  • {
  • floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
  • floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
  • }
  • floatingMenu.computeShifts = function ()
  • {
  • var de = document.documentElement;
  • floatingMenu.shiftX =
  • floatingMenu.hasInner
  • ? pageXOffset
  • : floatingMenu.hasElement
  • ? de.scrollLeft
  • : document.body.scrollLeft;
  • if (floatingMenu.targetX < 0)
  • {
  • floatingMenu.shiftX +=
  • floatingMenu.hasElement
  • ? de.clientWidth
  • : document.body.clientWidth;
  • }
  • floatingMenu.shiftY =
  • floatingMenu.hasInner
  • ? pageYOffset
  • : floatingMenu.hasElement
  • ? de.scrollTop
  • : document.body.scrollTop;
  • if (floatingMenu.targetY < 0)
  • {
  • if (floatingMenu.hasElement && floatingMenu.hasInner)
  • {
  • // Handle Opera 8 problems
  • floatingMenu.shiftY +=
  • de.clientHeight > window.innerHeight
  • ? window.innerHeight
  • : de.clientHeight
  • }
  • else
  • {
  • floatingMenu.shiftY +=
  • floatingMenu.hasElement
  • ? de.clientHeight
  • : document.body.clientHeight;
  • }
  • }
  • }
  • floatingMenu.calculateCornerX = function()
  • {
  • if (floatingMenu.targetX != 'center')
  • return floatingMenu.shiftX + floatingMenu.targetX;
  • var width = parseInt(floatingMenu.menu.offsetWidth);
  • var cornerX =
  • floatingMenu.hasElement
  • ? (floatingMenu.hasInner
  • ? pageXOffset
  • : document.documentElement.scrollLeft) +
  • (document.documentElement.clientWidth - width)/2
  • : document.body.scrollLeft +
  • (document.body.clientWidth - width)/2;
  • return cornerX;
  • };
  • floatingMenu.calculateCornerY = function()
  • {
  • if (floatingMenu.targetY != 'center')
  • return floatingMenu.shiftY + floatingMenu.targetY;
  • var height = parseInt(floatingMenu.menu.offsetHeight);
  • // Handle Opera 8 problems
  • var clientHeight =
  • floatingMenu.hasElement && floatingMenu.hasInner
  • && document.documentElement.clientHeight
  • > window.innerHeight
  • ? window.innerHeight
  • : document.documentElement.clientHeight
  • var cornerY =
  • floatingMenu.hasElement
  • ? (floatingMenu.hasInner
  • ? pageYOffset
  • : document.documentElement.scrollTop) +
  • (clientHeight - height)/2
  • : document.body.scrollTop +
  • (document.body.clientHeight - height)/2;
  • return cornerY;
  • };
  • floatingMenu.doFloat = function()
  • {
  • // Check if reference to menu was lost due
  • // to ajax manipuations
  • if (!floatingMenu.menu)
  • {
  • menu = document.getElementById
  • ? document.getElementById(floatingMenuId)
  • : document.all
  • ? document.all[floatingMenuId]
  • : document.layers[floatingMenuId];
  • initSecondary();
  • }
  • var stepX, stepY;
  • floatingMenu.computeShifts();
  • var cornerX = floatingMenu.calculateCornerX();
  • var stepX = (cornerX - floatingMenu.nextX) * .07;
  • if (Math.abs(stepX) < .5)
  • {
  • stepX = cornerX - floatingMenu.nextX;
  • }
  • var cornerY = floatingMenu.calculateCornerY();
  • var stepY = (cornerY - floatingMenu.nextY) * .07;
  • if (Math.abs(stepY) < .5)
  • {
  • stepY = cornerY - floatingMenu.nextY;
  • }
  • if (Math.abs(stepX) > 0 ||
  • Math.abs(stepY) > 0)
  • {
  • floatingMenu.nextX += stepX;
  • floatingMenu.nextY += stepY;
  • floatingMenu.move();
  • }
  • setTimeout('floatingMenu.doFloat()', 20);
  • };
  • // addEvent designed by Aaron Moore
  • floatingMenu.addEvent = function(element, listener, handler)
  • {
  • if(typeof element[listener] != 'function' ||
  • typeof element[listener + '_num'] == 'undefined')
  • {
  • element[listener + '_num'] = 0;
  • if (typeof element[listener] == 'function')
  • {
  • element[listener + 0] = element[listener];
  • element[listener + '_num']++;
  • }
  • element[listener] = function(e)
  • {
  • var r = true;
  • e = (e) ? e : window.event;
  • for(var i = element[listener + '_num'] -1; i >= 0; i--)
  • {
  • if(element[listener + i](e) == false)
  • r = false;
  • }
  • return r;
  • }
  • }
  • //if handler is not already stored, assign it
  • for(var i = 0; i < element[listener + '_num']; i++)
  • if(element[listener + i] == handler)
  • return;
  • element[listener + element[listener + '_num']] = handler;
  • element[listener + '_num']++;
  • };
  • floatingMenu.init = function()
  • {
  • floatingMenu.initSecondary();
  • floatingMenu.doFloat();
  • };
  • // Some browsers init scrollbars only after
  • // full document load.
  • floatingMenu.initSecondary = function()
  • {
  • floatingMenu.computeShifts();
  • floatingMenu.nextX = floatingMenu.calculateCornerX();
  • floatingMenu.nextY = floatingMenu.calculateCornerY();
  • floatingMenu.move();
  • }
  • if (document.layers)
  • floatingMenu.addEvent(window, 'onload', floatingMenu.init);
  • else
  • {
  • floatingMenu.init();
  • floatingMenu.addEvent(window, 'onload',
  • floatingMenu.initSecondary);
  • }
  • //-->
  • </script>

  • Replace allbloggertool1 with your Twitter username.
    PS: If you have already added the Google +1 Button somewhere in your blog then you need to add this code Just above
    </head>

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

    Now you are done.

    We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.


    New Like and Send Buttons of facbook for blogger


     Like and Send Buttons




    In this tutorial we will see how to add like and send buttons on your blogger blog.
    This code combined the Like and send button into a single plugin, making it more easy to add both the buttons with a single code.
  • Go To Blogger > Design > Edit HTML
  • Click "Expand widgets templates box"
  • Search for <data:post.body/>
  • and now if you wish to add the plugin just below your post titles then add the giant code below just above <data:post.body/> or if you wish that the plugin may appear at the end of your posts then paste the following code just below <data:post.body/>

  • <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>

  • Save and you are done.
    We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

    How to Add Facebook Like Button To Your Blog


    facebook like button Add Facebook Like Button To Your Blog
    The Facebook Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. It is easily to add the Facebook Like button to your blog just by copy and paste simple HTML code to your blog template as the following direction.

    If you are using WordPress blog, open the single.php file of your theme and paste the following code into it:
    1. <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink());?>&layout=standard&show_faces=true&width=450&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;overflow:hidden;width:450px;height:60px"></iframe>
    You might want change the width and height of the iframe to fit your blog design.
    If you are using the classic template of Blogger, paste the following code below the post content in the template:
    1. <iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkUrl$>&layout=standard&show-faces=true&width=450&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;overflow:hidden;width:450px;height:60px"></iframe>
    If you are using the modern version of Blogger, add the following code below the post content in the template, too:
    1. <iframe src="http://www.facebook.com/plugins/like.php?href=data:post.url&layout=standard&show-faces=true&width=450&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;overflow:hidden;width:450px;height:60px"></iframe>
    Since the iframe content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page.
    You can see the code in action in the end of this post.
    We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.


    Facebook jQuery POP OUT likebox widget generator,blogging tricks

    I had developed a Facebook Static popout jquery effect Like box generator for you.This Widget Generator let's you easily generaate your favorite Facebook style Widget and also easily add to your Blogger Blog.In my previous Article (How to Add a Static Facebook jQuery Pop out Widget) I told you about Static Facebook POP OUT Widget installation manually.Use this Widget generator and Enjoy..!





    Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
    • Go to Design->Edit HTML[Template->Edit HTML in new blogger interface]
    • Copy below code inside <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    • Go to Design-> Page Elements
    • Click add gadget and select HTML/javascript
    • Copy and paste the generated code inside it and save it.


    a lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger.Please keep wathcing www.bloggingtrainings.blogspot.com flash for blogger templates, and a lot of other tricks for blogger users. 

    Fixed , Floating Social sharing Horizontal Bar Widget for Blogger


     To day I am going to share an  amaizing widget for blogger blogpsot.com " Fixed / Floating Social sharing Horizontal Bar Widget for Blogger
    . This widget is requested by one of bloggingtrainings reader, and thanks for requesting this new widget for you as well as for our Readers. :)
    Coming to this widget, it is horizontal social sharing bar widget with counter and is displayed in above the post body. while you scrolling this horizontal social bar is fixed to the top of Post. which will give to readers to share the page immediately by the floating bar. This widget comes with TwitterFacebookGoogle plus,Pinterest, StumbleUpon and Digg buttons.

    HOW TO ADD FLOATING SOCIAL SHARING BAR WIDGET?

    First,
    1. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
    2. Select the Template > Click on Edit HTML > Proceed
    3. Check/Tick the Expand Template Widgets checkbox
    Just follow 3 Simple steps,

    THE JQUERY PLUGIN!

    As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.
    If not add the below snippet code before </head> tag
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

    THE SOCIAL SCRIPTS

    This Code contains jQuery calls and Social button scripts and styles, and those are loads only in Post Pages which will decrease, load time when you on home or other pages. ;)
    Add the below snippet code before </head> tag
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /*<![CDATA[*/
    #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    #w2bSocialFloat td{padding:4px;margin:0;border:none;}
    #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
    #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Set the Top Offset
    $theOffset = 0;

    jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
    /*]]>*/
    </script>
    <script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Twitter
    (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
    // Google + (plus)
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
    // Stumbleupon
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
    // Digg
    (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
    /*]]>*/
    </script>
    </b:if>

    ADDING SOCIAL BUTTONS WIDGET

    Let’s add the final Social horizontal bar widget code.
    Add this code before <data:post.body/> tag.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id="w2bSocialFloat" class="w2bSocialFloat">
    <table width="100%" class="w2bSocialFloat">
    <tr>
    <td>
    <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
    </td>
    <td>
    <iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
    </td>
    <td>
    <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
    <data:post.body/>
    <script type="text/javascript">
    w2bPinItButton({
    url:"<data:post.url/>",
    thumb: "<data:post.thumbnailUrl/>",
    id: "<data:post.id/>",
    defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
    pincount: "horizontal"
    });
    </script>
    </div>
    </td>
    <td>
    <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
    </td>
    <td>
    <su:badge layout="1" expr:location="data:post.url"></su:badge>
    </td>
    <td>
    <a class="DiggThisButton DiggCompact"></a>
    </td>
    </tr>
    </table>
    </div>
    </b:if>

    SAVE TEMPLATE!!!

    Save the template and check your blog post pages, a working and awesome jQuery based floating social horizontal bar on your blog.
    Hope this widget is helpful to you, Please leave your comments, and share this Widget.
    Thanks to Raghav! for requesting this simple and awesome widget.

    UPDATE :-

    1. I FOUND THE TAG THREE TIMES?

    If you found the <data:post.body/> three times, then you might using the Auto readmore hack,
    Solution:
    Search for below two lines
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    Place the Widget code in between the two tags.

    2. HOW TO CHANGE THE BACKGROUND COLOR OF HORIZONTAL BAR?

    You can change the background color of Horizontal bar.
    Solution:
    In the Second step (The Social Scripts), search for
    background:#FFFFFF;
    and change the #FFFFFF with your own Hex Color.
    Thanks to All.


    We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

     
    Support : Creating Website | Johny Template | Mas Template
    Copyright © 2011. Blogging Trainings - All Rights Reserved
    Template Created by Creating Website Published by Mas Template
    Proudly powered by Blogger