How to Align the Tweet Button With the Facebook Share Button on Blogger
Twitter and Facebook make buttons available so you can publish them on a site, such as Blogger, and give your readers a convenient way to share your information. By default, these buttons display one on top of each other on your blog, which is troublesome if you want to save page space or want to have a more attractive layout. Fortunately, Blogger gives you the ability to edit the code of your buttons so you can make them align horizontally on your page.
Instructions
-
-
1
Log in to your Blogger account, and click the "Layout" tab on the Dashboard page. Click the "Add a Gadget" link in the area on your layout, such as the sidebar, where you want your Tweet button and Facebook share button to appear. This action opens the "Add a Gadget" dialog window.
-
2
Click the "Basics" link on the left and then click the "HTML/JavaScript" option that displays in the list. Paste the code for your buttons in the "Content" text box. If you do not already have this code, load Twitter's "Tweet Button" page and Facebook Developer's "Social Plugins" page in separate browser windows, follow the instructions on each page to configure your buttons and then copy the codes needed to publish them on your Blogger site.
-
-
3
Type "<div style="float:left;padding: 4px;">" before the first line of code that begins one of your buttons, and enter "</div>" after the code that finishes the button. If the first button in your box is the Tweet button, for example, the code looks similar to the following:
<div style="float:left;padding: 4px;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div> -
4
Click the "Save" button, and then click the "View Blog" link that appears to see your page. If the buttons do not align, adjust the number after the padding attribute to a higher or lower value and then view your page again (for example, <div style="float:left;padding: 2px;">). Save your work when done.
-
1
