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 body”

….. “table row”

….. “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…

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:


Notice that each piece of “table data” is “opened” , button code is inserted, then it is “closed”

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…

Gwenny Penny - Point of View
DIY Show Off Project Parade

This is OK, but now we want to pretty it up :) First, let’s center the table. You need to add

at the beginning of the table code and
at the end to close the centering command…


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

Gwenny Penny - Point of View
DIY Show Off Project Parade

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…

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

height=100/>

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…

Gwenny Penny - Point of View
DIY Show Off Project Parade

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

between the
and

. What if you want to add a second row? You need to close the

code at the end of your first row and open a new
code. Let’s say you want a table that is two rows by three columns. This is what it will look like…




The first row is between the
and 

. After the 3rd button code, a new row is “opened”
 and follows code similar to that of the first row, just inserting code for your next three buttons and closing with

at the end of the second row. This is an example of what it would look like (with all buttons changed to height=100)…

Gwenny Penny - Point of View
DIY Show Off Project Parade
Gwenny Penny

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!!!

Kristin

Kristin

Owner at Yellow Bliss Road
Hi! I'm Kristin and I'm the creative mind behind Yellow Bliss Road, where you'll find tons of recipes, free printables, and a little decor and DIY thrown in for good measure. Life can be complicated, so I am all about simplifying wherever I can - from food to decor to DIY - because I believe that it doesn't have to be elaborate or extravagant to be amazing. I am a single adoptive mom with a daughter in Preschool and a son in Kindergarten. My kids are a handful, I'm exhausted and most days my house is a mess - and I'm okay with that!
Kristin
Kristin
Kristin

Comments

  1. Claire says

    Thank you so much for the great explanation and breakdown! I attempted to make a table one before and failed miserably. This seems pretty straight-forward and I will definitely give it a try. Could you use the same idea to organize project images on a page?

    Thanks!

    Claire @ alittlesomethinginthemeantime.blogspot.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>