Mommy Hacks # 1 - How to add buttons to your blog | Merry Christmas & Happy New Year!

This is the first in a series of "mommy hacks".

That is really useful bits of HTML you can use in your blog even if you're a complete beginner.

Every week I'll give you examples of code that I have used on my blog to solve specific problems. You can just copy the code but I'll also explain what each bit means, so very soon you'll be able to work things out for yourself.

(My examples will be in Blogger because most new bloggers use it but the HTML is the same if you're using WordPress).

I have done some ~~coding~~ hacking in the past many eons ago but I am in no ways an expert. I just believe that moms make great coders and with just a little bit of help can have fun fixing all the challenges our blogs throw at us.

But before we get started, there is one really important thing you must do and that's back-up! If you're not sure how, follow these simple steps on how to back-up your blog.

# 1 Adding Buttons to Your Blog

There's all sorts of reasons for having a "button" on your blog, you might want to

Add a button from a linky party ...
Or make an image in your post clickable ...
Or include links to your most popular posts in your side bar ...

Getting started

The html for "buttons" is really simple - these three lines are all you need to get started ...

The first line just says it's a link and - highlighted in blue - gives the page the link should go to. The second line just gives the "address" - highlighted in pink - for the image to be displayed.

To find the address of any image on your own blog or someone else's:

Right click on the image
Click "Copy Image URL"
Put the cursor where you want the URL, right click and click paste

Changing the size of the button ...

Before you try this out - there's one tiny extra bit of code it's useful to know and that's the line I've added in green below. All it does is say you want the button to be 125 pixels wide:

Your turn ...

Now you're ready to have a go. In Layout add an HTML/Java Script Gadget to your side bar. Copy and paste the example above into the gadget and then copy and paste the:

URL you want to link to into the link address (highlighted in blue in first example)
URL of your chosen image into the image URL (pink in first example)

Finally change the width to your ideal size - 75 will be a small button, 250 a really big one. Then, click Save and View Blog. Well done! You should now have a working button!

You can now use exactly the same code to put clickable images into your posts. Just create a new post, switch to HTML and paste in your code. Then switch back to Compose mode to see it displayed. Unfortunately, you can't test the link in Compose or Preview, so it makes sense to get it working as a Gadget first and then copy the code into a post.

Troubleshooting? ...

If it's not working. It's easiest to remove the gadget and start again.

When pasting the URLs make sure not to paste over the top of the quotation marks.

Check you haven't deleted any of the rest of the code. All the pointy brackets, for example, are really important - they're like the capital letter and full stop at the beginning and end of a sentence. Without them the code doesn't know that you've moved onto a new instruction.

Next time ...

In my next posts, we'll take this a step further and I'll show you how to create a button that your blog readers can grab and how to display a group of buttons together so they don't look messy.

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 everyone can share.

If you're looking for more blogging tips follow my Blogging board on Pinterest ...

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