Add Floating Vertical Bar With Share Buttons To Blogger

You may come across many blogs where a vertical floating bar with share button is present at the left side or right of the blog posts.This Floating Vertical Bar is actually a blogger widget which helps the blogger to get more Facebook page likes,twitter tweets,and stumbles etc.This widget is very useful for visitors to easily share your blog/website contents.This widget is already posted by many bloggers but actually that is static or something else,but the widget we are going to share is Floating Vertical Bar with The Beautiful Share Buttons.
Add Floating Vertical Bar With Share Buttons To Blogger
image Source Making Different

How To Add Floating Vertical Bar With Share Buttons To Blogger

Adding Vertical Floating Bar with Social Buttons To Blogger is very easy.You have to Copy a snippet of Code,and then you should have to add it into the HTML/JavaScript Box.However let's take a look on these steps.
  • Visit Blogger.com and sign in there.
  • Now Visit Blogger Dashboard.
  • Click On Layout
  • Now Click On Add a Widget/Gadget
  • Now a Box will popup 
  • Select HTML/JavaScript
  • Now Copy the Below Script and paste it into HTML/JavaScript Box.
<a href='http://www.filehippolatest.com'><img alt='Floating Vertical Bar With Share Buttons widget by FileHippo' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="background:#98A2A7; border: 1px solid #000000; top:120px;left:50px;">             <div class="addthis_toolbox addthis_default_style">                 <span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span>                 <span><a class="addthis_button_tweet" tw:count="vertical"></a></span>                 <span><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></span>                 <span><a class="addthis_counter"></a></span>             </div> </div> <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

  • Now hit save and that's it !

Live Demo Of Vertical Bar with Social Share Buttons  


Tip For Bloggers:- Adding To many JavaScript Widgets will surely make your website/blog speed slow,so be careful,don,t add extra and useless JavaScript widgets To You Blog.Some Blogger just want to decorate his/her blog like bride.But actually its a great foolishness,because simplicity its self is beauty :)
What's Up:- You Add This To your Blog?You Already added this?You don,t want to add this to Your Blog?Any Question Related this Post?Ask Freely ,stay blessed,Happy Blogging.



Add Floating Vertical Bar With Share Buttons To Blogger
Last Reviewed by Iftikhar uddinon June 24 2013
Rating: 5
SHARE

Iftikhar Uddin

I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

33 comments:

  1. Thanks for sharing this! I added it to my blog and found out data I didn't even know was stored anywhere.

    I do have one question. My main URL has 39 Facebook likes on it, and that's what appears in the floating box when you go to the main page (thebigsocialpicture.blogspot.com). However, one of my posts has 29,000 Facebook likes, but the floating bar only shows that when you're viewing that specific post (http://thebigsocialpicture.blogspot.com/2013/02/the-oscar-protest-that-you-didnt-know.html). Is there any way for the main blog page to tally all the individual likes from individual posts? Lemme know if that doesn't make sense. Either way, thanks again for your help!!

    ReplyDelete
    Replies
    1. You Welcome,and thanks for adding this widget to your blog.Actually this Floating widget show the likes of the specific Post i.e how many Users like a Post , it will fetch the data from Facebook .And The Widget you have added to your Blog right sidebar is static Facebook widget which only show the total likes of your Facebook Page Not posts.However it is not possible to Transfer all the likes from individual posts :D ,Hope You got the answer,Your Blog is nice :) Keep visiting Our Blog :)

      Delete
  2. Ah thanks that's what I figured. I thanked you in my newest blog post, check it out here :)
    http://thebigsocialpicture.blogspot.com/2013/03/preparing-your-blog-for-increased.html?utm_source=thatsblogging&utm_medium=post&utm_campaign=thankyou

    ReplyDelete
    Replies
    1. you welcome @The Big Social Picture,your new post is really awesome,i liked your hardwork,Keep posting such awesome articles.
      Regards,
      IfTikHAr!

      Delete
    2. I love that the Twitter count is clickable to view the results. Wondering though, is there any way to disable the "http://" part when it does the search? It messes up the results. Thanks!

      Delete
    3. @The Big Social Sorry i haven't got your Question , but if someone is already logged in to twitter he/she can directly tweet your Blog article/Contents.And if he/she is not logged in then a popup windows appear with "Http://" he/she has to sign in there then tweet :)
      Regards,
      IfTIKHAr!

      Delete
    4. I mean when you click on the number and it shows a Twitter window with the URL in the search. Mine doesn't work because it includes an http. No matter, that's a really minor thing.

      I do have a bigger question...I just bought a domain and am now redirecting my blog to it. But this counter is showing all likes/shares as 0. This makes sense since no one has actually liked/shared that exact URL. But is there any way to fix that? Show results for both domains maybe?

      Thanks!

      Delete
    5. Well ,You asked a very Good Question,Actually what you have to do is,just add this Widget again to your New Blog i.e Your Domain , Hope you will get the solution.

      Regards,
      IfTiKHAr

      Extra :- Actually your Domain is new,and no one has still liked it,its not a big deal,because your blog was old and was liked by many people on facebook that's why the widgets was showing likes,And Remember this widget just Fetch the Latest data from Facebook , Twitter etc i.e it will show the latest likes and tweets etc :)
      Hope you got the Answer :)

      Delete
  3. thank u so much,
    It was so easy...

    ReplyDelete
    Replies
    1. Hey John Salem we always provide well explained and clear articles,thanks for appreciating our work.Have a nice stay :)
      Regards,
      IfTIkHAr!

      Delete
  4. I want to see it in my blog on right side,but it only show the left side.Now what can i do?

    ReplyDelete
    Replies
    1. Hey Istiaque Bro All you have to do is just to change the "Left" in the script to right and thats it :)
      Regards,
      IfTikHAR!

      Delete
  5. Thankyou soo much i searched a lot for this working flaoting widget i found many links but all those were not working finally i got a working one from your blog
    and i feel glad if it is transperent please give me suggestion to make it as transperent currently background is yash color awaiting for your reply ....

    ReplyDelete
    Replies
    1. Hey Engg Computers,thanks for stopping by :) For making this Widget Transparent Change the style in the above script to this Code
      .addthis_floating_style {
      background: transparent !important;
      }
      Try it,hope it works :)
      regards,
      ifti!

      Delete
    2. If that trick is not working please follow this Link :)
      http://thatsblogginglab2.blogspot.com/2013/04/transparent-floating-vertical-bar-with.html

      Hope you got the solution :)
      Regards,
      ifTI!

      Delete
  6. I think it's mischief! If we copy the following script, then share options for your blog will be in my blog! Please be serious and make best posts!

    ReplyDelete
    Replies
    1. Hey Ankith Prabhas,Are You Kidding Bro?Are you new in Blogging Field?Bro the Code is posted by me not by you.SO all credit goes to me,if i add my blog link in the script why you start too much bullshit?Isn't Fair to give me a lil bit credit?Any Way thanks for Stopping by
      Regards,
      IfTI!

      Delete
  7. hello. look at my test blog: http://weqwdqwqe.blogspot.ro/
    why tweet boton is out of sidebar?

    ReplyDelete
  8. I don't want this widget on my home page. Please help.

    ReplyDelete
  9. nice your site thanks for sharing love you all team good work keep it up
    Skype Hacking
    Skype Hacker

    ReplyDelete
  10. nice your site thanks for sharing love you all team good work keep it up
    Gmail Hacking
    Gmail Hacker
    Password Hacker
    Gmail Hack Password

    ReplyDelete
  11. nice your site thanks for sharing love you all team good work keep it up

    WiFi Hacking
    WiFi Hacker
    Password Hacker

    ReplyDelete
  12. Trick and code is good for beginners unless u put your link'

    ReplyDelete
  13. hey nice widget i have applied it in my blog........u can check it here.....www.androidx.in
    thanx for sharing it

    ReplyDelete
  14. Thank you for the wonderful article on Add share button. Blogging is now a skillful way to make money by several methods. These are forever tips to add share button from blog.

    ReplyDelete
  15. Didn't work for me but i had to copy the one i saw after the live demo and it was exactly what i wnted. The only changes i made was remove left from the code and replace with rigaht. THanks a million

    Uche Francis
    Techdavids.com

    ReplyDelete
  16. Nice Post thank's for sharing i will found your post is very useful for new blogger.
    www.computerhelp8.blogspot.com

    ReplyDelete
  17. Very informative and well written post! I like the way you make your points.
    Custom Logo design

    ReplyDelete