How to Align Social Media Buttons in Blogger

Social networking sites sharing or like buttons are very economical tools to increase traffic on a blog/site. You can readily create social networking sites sharing or like buttons and put them on you site’s sidebar or posts. Showing up social networking sites sharing buttons below or above posts is very beneficial for your site because visitors can share your posts if they want.

Sometimes, when we put sharing or like buttons on our site,these do not appear in a line. In others words buttons appear misaligned in posts. This looks very unprofessional if buttons do not appear aligned. The basic reason behind misalignment of buttons is the dimensions of the buttons for example dimensions of twitter button is different then dimensions of Facebook button. Because of different dimensions of our social networking sites buttons we see them misaligned.

I am not going to give you any html code to align your buttons. I am going to share with you that what I did to align my buttons. First of all, I would like tell you that like you all I also searched on internet to solve this issue but I could not do this. But I got a hint from a site that social media buttons show misaligned because of dimensions of buttons. After that i changed the dimensions of my buttons and eventually I aligned them. So now read  how I did align my social networking buttons.

Warning: Save your Blogger Template before this. We are not responsible for any type of data loose.

Step 1: First of all,Save your blogger template. To save Blogger template go to Blogger Dashboard-Template-Restore/Backup(you can find it on the top corner)-Download full template.

Step 2 After saving template go to Blogger dashboard then Template. Click edit template and find your buttons code in template.

Step 3: I have placed iframe code for Facebook button. The original height of button was 80px. First of all, I changed it with 40px and in preview it came little bit down from its original position. After that i tried with 20px and both of my buttons came up in a line. I did not make any change in twitter button.

align social buttons

Note: If you have added such buttons in your site’s sidebar then to decrease space between them you may do same process.

I am sharing this personal experience with you guys because perhaps you may also align your buttons with this method.

Leave a Reply

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