Blogging Tips: Buttons 101

I just wanted to post some information about buttons. When I first started blogging, I had to search for this info and since I didn’t know the correct terms, it took me quite a while. Well, I compiled everything I know about buttons into this 1 post. If you have questions or need help with something not explained here, just let me know and I will try and help you out!

Breakdown of Button HTML

<a href=”http://thesteadyhandblog.com/target=”_blank”><img src=”” border=”0″ />

the red is the url of where you want people to go when they click on the button

the dark blue is html that will open the url in a new window

the green is the location url of the picture that will be your button. You can find this by right-clicking on the picture and selecting View Image Info. Where it says Location is the url you need.

Creating Your Own Blog Button

For this, I have a couple posts that you can check out. They are very detailed and walk you thru the whole process.

1. How to Design a Blog Button by Musings of a housewife

2. How to Create a Button Code by Musings of a housewife

3. Creating Your Own Blog Button w/Code Box by Mommy Bits

How to Manually Resize Buttons

To change the size of a button add (width=”xxx” height=”xxx”) after the picture url before the /. You can add whatever size you want. 125×125, 150×150, 400×400. Just be careful as the picture may get distorted.

So for example here: this button (regardless of what size the picture is) will show up as 125×125 picture. This is something you don’t really want to do as it takes longer to load but it works great until you can manually resize the picture.

<img src=”https://lh3.googleusercontent.com/_ZGJkZ-N3wjA/TUB2V6DfLVI/AAAAAAAAADY/9rf93RMwoDs/s128/Button.jpg” border=”0″ width=”125″ height=”125″/></a>

How to Center Buttons

Put <center>in the front of your html and </center> at the end. The below button will now center in a widget or in a post. If you are writing a blog post, than you probably don’t have to use this html just select the picture and use the Align Center button in your toolbar.

<center><img src=”https://lh3.googleusercontent.com/_ZGJkZ-N3wjA/TUB2V6DfLVI/AAAAAAAAADY/9rf93RMwoDs/s128/Button.jpg”/></center>

How to get words to appear when your mouse hovers over a button

Put your mouse over the buttons under Find Me Here on my sidebar. When you put your mouse over the “f” the words “Like Me on Facebook” appear.

To do this enter: title=”what you want it to say” after img url before /. The same place where you would enter the HTML to change the size.

This button here would say “The Steady Hand” when you put your mouse over it.

<img src=”https://lh3.googleusercontent.com/_ZGJkZ-N3wjA/TUB2V6DfLVI/AAAAAAAAADY/9rf93RMwoDs/s128/Button.jpg” title=”The Steady Hand”/></a>

If you add the resize, center and hover words into one button this is what it would look like.

<center><a href=”http://thesteadyhandblog.com/target=”_blank”><img src=”” title=”The Steady Hand” width=”125″ height=”125″/></a></center>

I know colorful, huh? I think the color helps to see what the different parts are. If it hard to read, you can just copy and paste it and change everything to black. Feel free to share this information!

I'd love to hear what you think!

Subscribe