This week’s tip for Tuesday’s Tip Jar is going to be about Button Code and how to read it. I know it’s nice to have the code available to copy and paste but I think it’s equally nice to understand how it works so that if you need to get into your own code and do some tweaking you’ll know how to do it, what to look for and why.

Before I get into how to dissect button code I’d just like to say that I am having a little trouble with Mr. Linky. I can’t seem to log into my account so I am waiting to hear back from them on how we are going to proceed so that I can post the section where you participate in Tuesday’s Tip Jar. In the meantime, we’ll temporarily go with a Trackback or Linkback for those participating in this weeks Tuesday’s Tip Jar. If you are participating all you do is link back to this exact post when you are referring to this week’s Blog Mommas Tuesday’s Tip Jar. The link to your blog will automatically show up at the top of the comment section on this post. Once we get Mr. Linky figured out we will bring that feature back.

Blog Mommas Button Example

Blog Mommas Code Example

<a href=”http://blogmommas.com” target=”_blank” title=”Blog Mommas”><img src=”http://blogmommas.com/img/blogMommas6.jpg” width=”125″ height=”125″ style=”border:0″></a>

1.) The a href=”http://blogmommas.com” is the part of the code that takes your visitor to the page they need to be when they click on the button or link. Also known as the site or page URL.

<a href=”http://blogmommas.com” target=”_blank” title=”Blog Mommas”><img src=”http://blogmommas.com/img/blogMommas6.jpg” width=”125″ height=”125″ style=”border:0″></a>

2.) The target=”_blank” is the part of the code that makes the site or page URL open up into a new window. Sometimes people will use that if the site or page URL takes the visitor away from their own.

<a href=”http://blogmommas.com” target=”_blank” title=”Blog Mommas”><img src=”http://blogmommas.com/img/blogMommas6.jpg” width=”125″ height=”125″ style=”border:0″></a>

3.) The title=”Blog Mommas” is the part of the code that gives your button or image a name. When your visitors scroll over the link in some instances the title will tell them what they are going to click if the picture does not. It’s an indicator of where they are about to navigate to.

<a href=”http://blogmommas.com” target=”_blank” title=”Blog Mommas”><img src=”http://blogmommas.com/img/blogMommas6.jpg” width=”125″ height=”125″ style=”border:0″></a>

In Summary it’s important to use the correct URL and to make sure you have the a href=”URL” all in quotes or the code will not work properly. The target= and the title= is not mandatory. The first half of the code will work fine without those aspects of the code. They are optional pieces to the code.

<a href=”http://blogmommas.com” target=”_blank” title=”Blog Mommas”><img src=”http://blogmommas.com/img/blogMommas6.jpg” width=”125″ height=”125″ style=”border:0″></a>

4.) The img src=”http://blogmommas.com/img/blogMommas6.jpg” is the part of the code that tells you where to find the image OR where the image lives on the internet. Whenever you can it’s always a good idea to store your own images and use those image’s URL so as not to infringe on someone’s bandwidth. Photobucket is just one of many free sites that will allow you to store images for free.

To figure out where an image is stored all you do is right click on the image, select view image info, and that will show you the URL of the image so you will know what to put in your code. Always make sure you ask the owner of the site if it’s ok to use their image link. Many site or blog owners will not mind. Some sites will even post a “copy and paste” key so you don’t even have to think twice about it.

You can tell from the string that I’ve highlighted above that I store that particular button image in a folder called “img” on my site blogmommas.com. If I wanted to add more images to that folder I could FTP them and upload them that way. When you insert a picture into your blog post your blog host will automatically upload and store your image for you. To test it out just right click on the images that you yourself have used on your blog or site.

<a href=”http://blogmommas.com” target=”_blank” title=”Blog Mommas”><img src=”http://blogmommas.com/img/blogMommas6.jpg” width=”125″ height=”125″ style=”border:0″></a>

5.) The width=”125″ height=”125″ part of the code provides the dimensions of your image. It tells you how tall and how wide your image should be.

<a href=”http://blogmommas.com” target=”_blank” title=”Blog Mommas” src=”http://blogmommas.com/img/blogMommas6.jpg” width=”125″ height=”125″ style=”border:0″></a>

6.) The style=”border:0″ part of the code is something that I need on this particular theme I am using on Blog Mommas because if I don’t have that in there then every single image that I use on this blog will have a nasty border around it. So, I have that in their as a personal preference because I don’t want to see the nasty border around my images and buttons that I link to. I haven’t figured out why that is..I just know that it works.

In summary it’s important to use the correct path or URL to your image or the code will not work properly. Everything that you see inside of quotes is something that will not work without the quotes. So any time you try to use code and things aren’t working just go back and take a closer look at your code and see if you are missing something. Chances are you just need to put quotes where they need to be. It’s the same thing with the <a></a> part of the code. The <a> starts the beginning of the code and the </a> ends the code. The width=, height=, and style= is not mandatory. The second half of the code will work fine without those aspects of the code. They are optional pieces to the code. If you would like to put some space in between your images you can add a <br><br> to the end of your code and that will do the trick.

Now it’s your turn – drop a tip in the jar!