Some links may be affiliate links. If you click an affiliate link and make a purchase, I will receive a commission at no extra cost to you.
This is the third in a series of Mommy Hacks – easy code, you can use to enhance and grow your blog even if you’re a complete beginner.
When you start blogging it’s exciting to add buttons from link parties to your blog, particularly if you get featured. But all these buttons come in different sizes and do funny things you don’t want them to do. So when you add them to a post or your side bar they can look a right higgledy piggledy mess!
But with some really simple html you can have them looking all neat and tidy. You can then use this same html to create image menus like these on my menu pages which are a great way to get readers to check out your old posts.
How to Tidy Up Messy Buttons
Before You Get Started
Before you get started with a Mommy Hack please do BACK UP YOUR BLOG! It will only take a minute and could save you so much grief.
The first thing to do is grab the buttons from your fave link parties. Here are 3 of mine. If I paste in the grab code they look like this – a right mess and they take up lots of room ..
Displaying the Blog Buttons In a Row
To get them looking neat we just need to strip out the extra bits people have put in and make them all the same width … here goes …
First of all look for tags <center> <div> and <align=”center”> like the one’s highlighted in yellow and get rid of them.
Remember an opening tag always has a matching closing tag – think of it like the capital letter and full stop at the beginning and end of a sentence. If you delete an opening tag you need to delete the closing tag as well – e.g. <center> and </center> or <div> and </div> …
We also want to get rid of any line breaks which look like these <br/> highlighted in pink.
The buttons now look like this which is much better but we want them all the same size …
Make the Buttons all the Same Width
To make the buttons all the same width, we need to add some code – width=”110″ – to the button to constrain it’s width, like the two examples in purple below. It’s easiest if you add this at the end of the code for each button, just before you see these symbols /></a>
Or we need to change the given width as in the green example below and remove the height, highlighted in blue, which we don’t want to keep changing …