How to Organize Buttons & Ads

PassionFruit has started charging to use their service which is fine for some, but those who just used it for swaps the monthly fees might not be worth it. I manage my ads and swaps myself. This organization extends to the blog buttons I display on my blog. This is how I organize and manage my blog. This post is aimed at bloggers who are not familiar with image coding. I keep track of swap & ad dates on a spreadsheet.

Here are some of my sidebar sections. See how the buttons/ads are all uniform? Blog buttons come in all different shapes & sizes, but I am able to control the size with some simple coding.

 First let's look at a linked image code. It looks like this~

The yellow needs to be the URL (web address) that you want the images linked to.

The pink code tells the link to open up in a new tab.

The purple is the direct URL link to the photo.

The green is the size parameters (in pixels) put on the image. 

You can add a center code as shown below to center everything.

You will see similar coding when you copy a person's button code, although they might not have the target=blank or the width, but they are easy to add it. To put 2 rows of 2 buttons here is the coding. There is a space between the first 2 images and then a BR (break) after the 2nd image to create the 2nd line.

 

My site sponsors section near the top of my sidebar contains four 125 pixel ads/buttons. 3 of the ads/buttons were already 125px, but one was bigger so I had to add the width coding to reduce it to 125 to match the others. Here is my actual coding~

I do the others areas of my sidebar the same way.

Here are 2 of my blogger pages that have organized buttons. The Linky Party where I list the linky parties that I participate in and My Features page, which lists all the blogs/site that I have been featured on.

Some people have made a page like this using InLinkz or Linky Tools. That is a great idea and the button/graphic will automatically be re-sized for you. I do these pages the same way as my sidebar above. When I get featured on a blog I will grab their button code and add the width parameter of 100 pixels (width="100") and put a space between each button code. I don't actually use a line break because when a row reaches it's width limit it will spill onto the next row. When I get a new feature I just add that coding to the top and it pushes the others over and then down. For fun I change the target URL to the actual blog post I was featured on. Sometimes I add coding to change the height instead of the width. This is usually when a button isn't perfectly square.

Give it a try on your blog! Make sure you follow the sample image coding I provided above. Check it carefully. The >< and " " are important so don't leave them out. A missing or extra character can mess things up!  That could cause some coding you didn't put up there to appear. Just start over. For that reason you might only want to do a few images at a time and make sure they are all lined up and uniform before adding more. Please leave questions in the comment section and I will try my best to answer below each of them.

This post was featured at~