About   All Tips   Tips by Category   Tips by Ability   Help!

Straighten Up Your Buttons! - Beginner

Do the buttons in your sidebars look like the image on the left? Are some of your buttons centered, while others are left-aligned? With little effort (and no risk to your template) you can format your buttons so that they are all aligned with each other. Doing so will give your blog a more organized, professional feel.

The first thing you'll need to do is decide whether you want all of your buttons to be centered or left-aligned. Then you'll need to open each and every button gadget that is misaligned and tweak the code by following the directions below:

If you prefer left-aligned buttons, you'll need to remove the centering tags from the buttons that look out of place. Click here for a tutorial on how to add/remove centering tags from button codes. Sometimes a button will not have centering tags, but will still appear centered. To make it left-aligned, you will need to search for the word "center" within the code and change it to "left".

If you prefer centered buttons, you'll need to add centering tags to the html code of each button that is not centered. Click here for help on centering buttons.
If you have buttons in your sidebar that were installed as picture gadgets, you'll have to create an html code for the buttons in order to center them. Click here for a tutorial on how to create an html code for a button.

You'll want to be very careful not to delete anything within the button codes other than the characters you wish to delete. Deleting a > may not seem like a big deal to you, but it may mess up the button. If you accidentally delete more than you intended to and have not saved the gadget, simply click on "cancel". Then open the gadget and try again. If you saved the gadget before noticing the error, you'll need to open it and replace the faulty code with the original code. Then make your changes.

Helpful hint: Before beginning, I make a back up of all of the button codes that I wish to change by copying the button codes and pasting them into a new Word/Notepad document. I put plenty of space between each code so that I can easily tell them apart. If I accidentally delete a button or make an unrecoverable error, I can retrieve the original button code from the document and reinstall it.

You may be wondering how to center other sidebar gadgets, such as blog archives, pictures, blog lists, and labels. These things cannot be centered easily, if at all. They require the changing of the code of the gadget within your template, which is something I have very little experience with. If you have successfully centered one of these types of gadgets, please let me know what resources you used. I would love to link to you as well as the tutorial!

Take a little time to straighten up the buttons in your sidebars. You'll be surprised by how much it will improve the overall appearance of your blog!

Related Posts:
How to Center Buttons and Other HTML Images
How to Create an HTML Code For a Photo/Image
Create a Grab Box For Your Button
Adding Buttons to Your Sidebar

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

Please do not copy and paste my words and images into your own posts. I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)


Melissa said...

Thanks so much!

De said...

Wow! You have so much great information in this entire blog. So much stuff that I have been searching the web trying to find answers for. I don't know why I didn't find your blog a lot sooner. I actually found you through another blog. The blog was www.blogaholicnetwork.com. I am now your newest follower. Thanks for posting all this helpful information.