Vertical Floating Social Bar for Blogger/Blogspot

By on October 14, 2014


In this tutorial I am going to show you how to add a simple floating vertical social bar on your Blogger site. I really recommend you to have one of these on your blog, because it might bring you a big boost of traffic. Blogger/Blogspot by default has those small social buttons which, to be honest, are not enough. They are too small and not floating and users usually pass them and you can lose big traffic because of that. The floating social bar will look something like this: vertical_floating_social_bar_blogger_blogspot So let’s get started. Step 1: Go to your blogger dashboard and click on “Layout” (as shown in the image below). blogger_dashboard_layout Step 2: On the “Layout” section click on “Add a Gadget”. It does not matter where the gadget will be placed, you can add it and move it anywhere on the “Layout”. blogger_add_a_gadget Step 3: A window with a gadget list will pop. In the gadgets list, scroll down and select “HTML/JavaScript” gadget (as shown in the image below). blogger_html_javascript_gadget Step 4: In the TextArea of your new added gadget, copy and paste the following piece of code (you don’t have to give any title to your new gadget), click “Save” then view your blog:

Step 5: The social floating bar might not be on your desired position so you will have to go back to the Layout and edit that widget. On the line 6 in the code, you have “margin-left:-750px“. You have to increase or decrease that value (-750px) until it fits your blogger template. You can also change the background color of your social bar by changing the value on line 9 (background-color: #fff;). The entire bar is open source and if you have any CSS and HTML knowledge you can modify it as you desire. If you have any trouble with this script or you just need some cosmetic help, please do not hesitate to comment or use the contact section and your issue will be fixed as soon as possible.

2 Comments

  1. SmileyDoll

    October 15, 2014 at 8:37 pm

    Awesome, very simple and cool!

  2. Pingback: Common mistakes of rookie bloggers… – Blogger Wizard

Leave a Reply

Your email address will not be published. Required fields are marked *