Mommy Hacks # 3 – How to tidy up messy buttons

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.

HTML for blog buttons


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.

PicMonkey Photo editing made of win

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.

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


http://salttree.net/

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=”https://www.mumsmakelists.com/wp-content/uploads/thrivingthursdays-2-1.jpg” /></a></center>
<div align=”center”>
<a href=”http://www.crystalandcomp.com/” target=”_blank”><img border=”0″ src=”https://www.mumsmakelists.com/wp-content/uploads/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=”https://www.mumsmakelists.com/wp-content/uploads/button125x125-1.jpg” width=”125″ /></a>

The buttons now look like this which is much better but we want them all the same size …

http://salttree.net/

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=”https://www.mumsmakelists.com/wp-content/uploads/thrivingthursdays-2-1.jpg” width=”110″/></a>
<a href=”http://www.crystalandcomp.com/” target=”_blank”><img border=”0″ src=”https://www.mumsmakelists.com/wp-content/uploads/button3.png” title=”Crystal &amp; Co” width=”110″/></a>
<a href=”http://salttree.net/” target=”_blank”><img alt=”http://salttree.net/” height=”120″ src=”https://www.mumsmakelists.com/wp-content/uploads/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 …

http://salttree.net/
The Chicken ChickRomanceOnADime.comThe 36th AVENUE

If you found this post helpful do follow my Blogging board on Pinterest …

Follow Mums make lists …’s board Blogging on Pinterest.



Learn More HTML

HTML really is easy!

It can give you the blog you want AND skills you can earn money from as a mom at home … if you want to learn some more HTML these 3 books are a good start …

Moms Can Code!


Did you know one of the UK’s first software companies … which was very successful! … was founded in the 1960s by a mom who only employed stay-at-home moms as coders!
50 years on coding is still a great way for stay-at-home moms to earn the money their family needs.
But many of us are techno-phobes convinced we could never code.
So I am launching a new course … Moms Can Code … specifically for moms. 
With fun, easy-to-follow and mom-relevant tips it will take you from simple blog enhancements to building your own mobile apps and websites …

More Blog Design Tips

Share on pinterest
Pinterest
Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp

TOP RELATED PICKS

Luci

Luci

Hello, I'm Luci, Editor of Mums Make Lists. MML is full of creative tips I’ve put together to bring calm and balance to the lives of busy mums and their families.

23 thoughts on “Mommy Hacks # 3 – How to tidy up messy buttons”

  1. I so needed to see this! My link page is a huge mess! I saw your link over at the Strut Your Stuff link party. I plussed and pinned this. Thanks!
    – Kate @ i heart eating

  2. Wow! I’ve been looking for an easy tutorial on this ~ and I found it (and you) over at the linky party from Not Just a Housewife! THANK YOU! day2daySuperMom.blogspot.com =)

  3. I already knew how to do this, but I sometimes don’t. I am pinning this for future reference. You did a great job making this task easy. I do like neat buttons!

  4. Oh my gosh I can’t believe I could do that! You made it so clear and very easy to do! Thank You!!!! I just added a “Where I Party” page =) @day2daySuperMom.blogspot.com

  5. I just did this! Yay!! I just started blogging and I spent so much time on my design, my blog was right where I wanted it…then I stared linking up and it was not pretty. Thanks for the help. I am pinning this for the future!

Leave a Comment

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