Organizing Link Party Buttons in your Posts from Gwenny Penny

Welcome to the BBC! The Beginner Blogger's Club is a month-long series of posts that include both beginner blogger features and tips from the pros. For more information on the series, read the full BBC post here.

Hey, everybody! I'm Gwen from Gwenny Penny. I'm so honored that Kristin asked me to participate as a mentor in the BBC. I'm here today to teach you about organizing link party buttons. What it really amounts to is learning how to build a table in HTML, and it's nothing to be afraid of, I promise :) You can also use this code to organize thumbnails of tutorials you've written or projects you've made. I use tables all the time on my blog, and you will, too, once you learn how to make them. Let's get started!

There are four basic bits of HTML code you need in order to create a table...

<table>..... "table"
<tbody>..... "table body"
<tr>..... "table row"
<td>..... "table data"

Easy enough to understand, right? One thing to know about HTML, however, is that whenever you "open" a piece of code, you also need to "close" it. If I were to "close" these snippets of code they would look like this...

</table>
</tbody>
</tr>
</td>

You've got all the code you need. Now you just have to put everything together in the correct order and add a few details to create a table of link party buttons!

Let's start by creating the basic code for a one row, three column table:

<table><tbody><tr><td><INSERT 1st BUTTON CODE HERE></td><td><INSERT 2nd BUTTON CODE HERE></td><td><INSERT 3rd BUTTON CODE HERE></td></tr></tbody></table>

Notice that each piece of "table data" is "opened" <td>, button code is inserted, then it is "closed" </td> before the next piece of "table data" is inserted.

By copying the code for three different link party buttons (directly from three different blogs) and inserting it in each of the three color coded spaces above, the result is a table that looks like this...


This is OK, but now we want to pretty it up :) First, let's center the table. You need to add <center> at the beginning of the table code and </center> at the end to close the centering command...

<center><table><tbody><tr><td><INSERT 1st BUTTON CODE HERE></td><td><INSERT 2nd BUTTON CODE HERE></td><td><INSERT 3rd BUTTON CODE HERE></td></tr></tbody></table></center>

Now our table is centered within the post, like this...







This is a good start, but how about making all of the buttons the same size? This gets a little more complicated, but you can do it! Let me show you the actual button code (which you can find in her sidebar) for Kristin's "Simply Klassic Sunday" party...

<a border="0" href="http://asimplyklassichome.blogspot.com" target="_blank"><img src="http://i166.photobucket.com/albums/u87/auntdoi/Simply%20Klassic/SimplyKlassicSundaybutton.png" /></a><br>

Let's say we want to make this button 100 pixels in height. We'll need to add a bit of code...

<a border="0" href="http://asimplyklassichome.blogspot.com" target="_blank"><img src="http://i166.photobucket.com/albums/u87/auntdoi/Simply%20Klassic/SimplyKlassicSundaybutton.png" height=100/></a><br>

If we want to make all of the buttons 100 pixels in height, we need to add that code highlighted in red above in that exact location for each of the button codes in your table, and you get this...







Nice, huh? Sometimes a button code will already include a pixel height. In those cases you can change the height that's already in the button code, but know that if a pixel width is also defined, you'll have to play with that, too, in order to keep the button image from getting distorted.

So what if you want to add more columns? Add more <td><INSERT BUTTON CODE HERE></td> between the <tr> and </tr>. What if you want to add a second row? You need to close the </tr> code at the end of your first row and open a new <tr> code. Let's say you want a table that is two rows by three columns. This is what it will look like...

<center><table><tbody><tr><td><INSERT 1st BUTTON CODE HERE></td><td><INSERT 2nd BUTTON CODE HERE></td><td><INSERT 3rd BUTTON CODE HERE></td></tr><tr><td><INSERT 4th BUTTON CODE HERE></td><td><INSERT 5th BUTTON CODE HERE></td><td><INSERT 6th BUTTON CODE HERE></td></tr></tbody></table></center>

The first row is between the <tr> and </tr>. After the 3rd button code, a new row is "opened" <tr> and follows code similar to that of the first row, just inserting code for your next three buttons and closing with </tr> at the end of the second row. This is an example of what it would look like (with all buttons changed to height=100)...








You may also be thinking, "I'm linking up to five parties. What do I do about that 6th button code?" Leave it blank. If you don't put any code in that spot, nothing will show up.

Hopefully I have given you enough information to start organizing your link party buttons, whether at the bottom of a post or on a page on your blog. HTML is nothing to be afraid of. The table code uses logic, so if you give it a little thought, you should be able to add as many columns and rows as you need to create the table you want to make.

Let me add a disclaimer: This is how I make my tables. I'm sure there are other ways. I am by no means an HTML expert. Everything I know I have learned through writing my own blog and scouring the internet every time I want to learn how to do something. You can pretty much Google anything that you want to learn in HTML and you will be able to find information on it. Don't be afraid to try!

Please stop by Gwenny Penny for a visit anytime. I would love to have you. Thanks for inviting me over, Kristin!

Thanks Gwen!!

I have to admit, it was a little bit out of selfishness that I asked Gwen to do this post, because I wanted to learn how to do it too!!!
Follow Me on Pinterest