Mommy Hacks # 3 - How to tidy up messy buttons

This is the third in a series of Mommy Hacks - easy bits of code that you can use in 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.

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.

Grabbing Buttons

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.

<center>
<a href="http://www.domesblissity.blogspot.com/"><img border="0" src="http://i47.photobucket.com/albums/f180/gourmetphotos/thrivingthursdays-2-1.jpg" /></a></center>
<div align="center">
<a href="http://www.crystalandcomp.com/" target="_blank"><img border="0" src="http://crystalandcomp.com/wp-content/themes/thesis_18/custom/images/button3.png" title="Crystal &amp; Co" /></a><br />
<br /></div>
<a href="http://salttree.net/" target="_blank"><img alt="http://salttree.net/" height="125" src="http://i1217.photobucket.com/albums/dd394/salttree/Blog%20decor%20Jan%202013/button125x125-1.jpg" width="125" /></a>

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 ...

<a href="http://www.domesblissity.blogspot.com/"><img border="0" src="http://i47.photobucket.com/albums/f180/gourmetphotos/thrivingthursdays-2-1.jpg" width="110"/></a>
<a href="http://www.crystalandcomp.com/" target="_blank"><img border="0" src="http://crystalandcomp.com/wp-content/themes/thesis_18/custom/images/button3.png" title="Crystal &amp; Co" width="110"/></a>
<a href="http://salttree.net/" target="_blank"><img alt="http://salttree.net/" height="120" src="http://i1217.photobucket.com/albums/dd394/salttree/Blog%20decor%20Jan%202013/button125x125-1.jpg" width="110" /></a>

The 3 buttons all now look lovely and neat like this and we can easily add more in the same way without ruining the effect ...

Feedback

Do let me know if this was useful - was it too easy? too hard?  And what other problems have got you stumped? Tell me about them and I'll come up with a solution.

And if you found this post helpful, you might also like ...

Mommy Hacks Newsletter

If you would like to receive more Mommy Hacks and blogging tips subscribe to the Mommy Hacks mailing list