Tuesday, April 24, 2012

Blogging 101 (Part Three)

...and the series continues! If you missed my two other blog posts about Blogging 101 you can either click the blogging 101 sidebar badge (or grab it and add it to your site, hint, hint!) or just click on Part One or Part Two

In Part One we learned the basics, how to center images etc., how to italicize, bold or underline text in the sidebar and how to make an image clickable. Then in Part Two I taught you how to make your very own clickable AND copy/pastable blog button. We even added some extra sweet functionality to it like making it open the link it points to in a new tab/window and to display a message when you mouse over your blog button.

This time, I'm going to teach you a very useful thing, how to horizontally align images in a blog post. If anyone of you have tried to do this manually by dragging your uploaded pictures around inside a blog post you know it usually doesn't work. In fact, doing that usually screws up all the other formatting that you added to your blog post! After reading this article you'll be able to easily make pretty, lined up pictures, which not only look cool but saves serious real estate on your blog post!

So, here we go!

We have to start by uploading two pictures to Blogger. Do this by clicking the picture in the link bar above. You can upload your pic anyway you want, just get them on the page! When the first one is up, center it if it's not centered (that function is also in the link bar above or can also be accessed by clicking on your uploaded picture.) Now, before you upload your second picture, click on this first one and add a caption. You don't even have to put anything in the caption, you can just leave it as it is, it just adds the code that allows us to horizontally align our pictures. Here are our two pictures...

Albert Einstein
Author Unknown
When we're done, they'll look like this...
Albert EinsteinAuthor Unknown
Won't that be a cool thing to be able to do with your pictures? Yes? I thought you'd like it! Coincidentally, just this weekend my Inspiration Avenue friends begged to learn just HOW I was lining up all my pictures so prettily. So, this post is dedicated to those lovely women I so adore!

(Oh, and here's an IA plug, we're doing a Postcard Swap over on Inspiration Avenue, the button is grab-able from my sidebar. Go on over and read all about it, all are welcome & it's gonna be a whole lot of Mail Swapping FUN!!)
Now back to our regularly scheduled program...

Let me explain generally what we're doing with the pictures so you have a framework of where we're going. What we're doing is using simple code to set up invisible rows and columns kind of like a spread sheet, then putting each picture into it's own "square" called a cell. This orders them into a horizontal space so they look lined up! Doing this is called setting up a table. The whole set of cells makes up our table. The code is relatively simple and there's two ways we can go about using this code to it's best advantage. To decide what way to go, answer this question...
  1. Do you want to add a caption like a title or comment to each picture that you're lining up?
  2. Do you just want to line up a bunch of pictures, one after the other, keeping it absolutely simple?
If you don't want or need any captions that center themselves under each photo and all you want is for your pictures to line up horizontally, then you can put in the code yourself, it's pretty simple. What I do is keep a text file that has the basic code copied to it so all I have to do is copy it and add the specific details of each picture into their own "cell" in the "table". Easy Peasy! Here is what the basic code looks like.

Let me explain each piece of this code, then when I show you the more complicated one, you'll understand what you're seeing. First, the "center" does just that, centers our pictures. Remember from the previous Blogging 101 series', we need them in pairs with < > around them, we first tell blogger we want to center all that comes next by saying center (with < > around it), then at the end of what we want centered we put it's pair, telling blogger to STOP centering with /center (with < > around it), right? OK. (Please also remember this  applies to many pieces of code, it mostly comes in pairs, start doing something, then stop doing something!)

The next part, table, tells blogger we're gonna make a table, notice it's pair is at the END of the sequence too with /table. Right after that is cellspacing, this can be set at whatever you want, from 0 to like 100 (although that would put some HUGE space between pictures), that's what cellspacing does, it puts space between each cell of the table we're creating. For instance, with the horizontal pictures above, I used a cellspacing of 10, sometimes I want a wider space so I'll use 20. Here, I want to mention that there's a similar code bit called cellpadding, it works similarly, you can use either or both. I tell you about it now because the more complicated code that blogger creates for us, (that I'll tell you about below soon), uses both padding and spacing. Cellpadding puts padding within each cell, between the picture and the cell's border. Cellspacing puts spacing around EACH cell. (Don't worry if you're confused, just put a number from 1-20 in either cellpadding or cellspacing until you get the distance you want between the pictures.)

This is a visual example of cellpadding!
Each cell has padding around it.
This is a visual example of cellspacing!
A space is added between cells .
Here's why I tend to use cellspacinging, if you look closely, comparing the two sets of pictures, you'll notice that the names (Albert Einstein, Author Unknown) are different distances from their requisite picture. With cellspacing, it puts the space ALL THE WAY AROUND the picture & caption, which keeps the caption close to the picture as opposed to cellpadding which tends to move the caption down.

Ok, onward...
Here's the code box again.

The next part is tbody, which tells blogger that next we're gonna be filling the body of the table with cells that we're going to create. Now into the nitty gritty of the code. We start with tr, which encompasses all the table cells, then the first td, which, in pairs, goes around each cell using < >. Notice that table, tbody, tr and td all have pairs of /table, /tbody, /tr and /td. These, if you remember from a previous Blogging 101 are called opening and closing tags. It's the opening and closing tag td that repeats with each cell. So, right after the opening tag td, we put the info for the first picture we want to see in our horizontal line. After putting in the picture info we use the closing /td tag, which closes that cell. We then put an opening td tag again, opening a new cell, saying we're adding another picture in this row, then add the picture info, then the closing /td tag cell. We continue until we can't fit more pictures across our blog post. (I'll talk about blog post width in a minute, let's just finish here...) Then, when we're finished adding pictures in a horizontal row we add all the requisite closing tags that go with our opening tags, so we're adding /tr, /tbody, /table and /center, all with the < > around each one.

Side Topic: Blog width and number of pictures you can get across a post.
My blog post section is about 600 pixels wide, some are more narrow, around 500-550 (they might have a sidebar on both the left and right side, making the post part narrower. Some are actually a little wider than 600. Your total width of pictures have to be at least 10-20 pixels smaller than your blog center width. Don't forget to include the cellpadding (or spacing) you add between each picture! For instance, if your blog post width is 600 and you want to have four pictures in a horizontal row, then each photo cannot be any wider then 140, assuming that you use only 5 cellpadding (which would be a total of 15 extra pixels added to the widths of the total width of pictures...

140+5(padding)+140+5(padding)+140+5(padding)+140=575 pixels

The great thing is that when you upload a picture to blogger and choose a size (I choose small usually) then blogger adds height and width functionality to the picture code for you! If you remember from previous Blogger 101 posts, you can tell blogger what width and height you'd like your pictures. So, choose whatever requisite width you've calculated will fit your blog and put that as the width, then you can calculate the height that will keep the ratio of height to width the same so the picture stays the same dimensions. (if this calculation is too complicated, you could try taking out the height= part and only changing the width, this should change the ratio as the width changes, although I've never tried it this way, lol, so don't quote me!)

Ok, back to the code...

So, let me show you what the code will look like with the two above pictures added where they should be added.

And this is what that code above will look like! (oh, and if you noticed, I tried using just the width code, and it WORKS, it changes the picture to the correct height ratio to go with that width.)

Now, if you don't understand the picture code that I added between the td and /td then you'll have to go back to Blogging 101 Part 1 & Part 2 to learn what you're looking at.

I'm going to go over the basic code one last time so when you see the complicated code you won't freak out, lol. Let me show you the basic code, in the most simple way, then you'll "see" what I see when I look at the jumble of code I'm about to show you.

There are several sections to the basic code. I've explained about Line 1 and Line 3, it's LINE 2 that we're really concerned about. This is what the basic code will look like when we have three pictures in a horizontal row. We're gonna start on the left orange arrow and move along, with up and down arrows, toward the right, explaining as we go. 

First we open our table, that's tr, then we open our first cell with td and put the image code (our picture #1) then we close that cell, /td. Then open cell two with td, put the image code (picture #2) then close our second cell, /td. Finally, we open the third cell with td, put the image code (picture #3) and close our third cell, /td. Don't forget to close the table now, with the /tr. No matter what other code is added around this basic code, it's still just a simple table with three cells. 

Now I want to teach you how to use the code that Blogger makes, no having to type in your own code, just moving code around, manipulating it's placement. Since you understand what you're looking at, this should make putting pictures in a row much easier and quicker than what you have to do above, making your own table.

So, imagine you open your new blank blog post and want to add a line of pictures horizontally across the screen. You want to do this easily, without having to build your own table. What you do is this...

  1. Center your cursor using the button in the header bar, it looks like a bunch of stripes, I've highlighted it in pink!
  2. Upload the first image you want in your row of pictures. It doesn't matter if it's from a URL or from your computer or some other way.
  3. Click the uploaded picture so it's highlighted. Choose "add caption" and type what you want in the caption. (later, if you don't want to use the captions, you don't have to use them. It's just that adding the caption adds the extra "table code". What blogger does is when you add a caption to a picture it makes a table with only one cell, putting one picture into that cell, and "attaching" a caption, which allows blogger to make sure the caption stays with the picture)
  4. Now, click just below that caption you've added and if you cursor isn't centered then start at #1, if it is centered then start at #2 of this list.
  5. Continue until you have enough photos in a vertical line that will fill the width of your post (about a total of 550 pixels). This is usually three or four pictures unless their seriously small.
  6. Now, click the HTML button on the very left of the header bar, next to the arrows. You're gonna now be able to see the code for the pictures you just added in your post. This is what you'll see...

Don't panic when you look at the extra code in this box, you'll get to mostly ignore it because it's unimportant. Let me show you what this code above would look like...
Nice People
Sharing is Caring
Now, we want to manipulate the code by dragging it around so the pictures will be horizontally aligned with the captions under the correct image. Below is the same code as above, just highlighted to teach you what we want to highlight and drag around.

The pink parts are the three coded pictures each in their own cell & table and the blue parts are the captions, also each in their own cell (a special kind of cell for captions). All the rest of the (black) code is making individual tables with each picture/caption combo. Notice that it's totally similar to the code I showed you that puts the pictures in a line, but each picture is in a table of one! We want to use this fact, use the first picture's table but add two more cells to it, for a total of three cells for our three pictures. Remember, each cell is opened by td and closed by /td with < > around each tag. If you notice, each pink section has it's requisite opening and closing td tag. Each caption, in blue, has it's own specially classed td cell that "goes" with the picture cell. Don't worry, separating the picture cells and the caption cells doesn't "break" anything, in fact, once we move all the pink sections to make lined up pictures, we can erase all the other code, if you don't want the captions.

We will be working with the pink parts first, then the blue parts. Let me go over what we're gonna do generally then I'll try and show you visually. We're going to use the first pink section of code as the place we build the entire horizontal line of pictures. We will be moving the other two pink parts up so they sit right after the first pink section. Then we'll do the same with the blue parts, putting the second and third blue sections right after the first blue section. Basically we'll be eliminating the second and third picture's non highlighted black text. We only need one set of tr and /tr tags for the pictures and one set of tr and /tr tags for the captions. The great thing is that we can just highlight sections of code and carefully drag them to the right place. No copy/pasting or typing new code!

So, lets start with the picture of the code again, but I'll highlight the first move...

What we're doing first is moving section B to right after the /td of section A. (NOTE: I can't put the < > before & after the /td as I type because that tells blogger it's a closing tag and then blogger looks for the opening tag! This applies to ALL tags I type. That's why code is either a photograph or within a textbox.)

Ok, so we highlight section B, just like I've shown you in pink, then click and HOLD down the mouse button and drag the code so it's right after the /td at A. Now "drop" the second pink section B. When you're moving text, you'll notice that Blogger will put a straight vertical line like this...  |   exactly where your code will go if you drop it. As you drag your code, the vertical cursor moves with you. We want that vertical line to be right after the /td (with no extra space) where A ends. OK?

We now want to do the exact same thing with the third pink part, let me show you what the code looks like after B is moved to right after A below.

Notice that A/B are now together, I'm pointing to A's closing cell tag /td and B's opening tag td. We now want to move C to the END of B, again, right after where B's closing /td tag is. Highlight and drag C just as I told you to drag B. You will notice that after B is moved that all the black code is left, same thing will happen with moving C. Soon, we'll go "rescue" the captions (if you want to use them!). This is what your code will look like AFTER you move C.

Okie Dokie Pokie! Now we've done the major moving, putting A, B & C in the SAME table.  Notice that I've highlighted the captions for each picture. Look close, you'll see #1 says "Einstein", #2 says "Nice People" and #3 says "Sharing is Caring". If you want the captions under the picture they went with, all you have to do is move #2 and #3 to the back of #1, just like we did when we put our pictures A, B & C together.

(If you don't want any captions and were only using them to add the necessary code then you need to delete them and all the other superfluous code also. You have to eliminate all the blue captions and also 99% of the black code around them. The only black code we need to keep that's below the pink part is the closing /tr right after the pink part and the closing /tbody and /table that's just after the first blue caption. Remember, tags come in pairs and we have opening tags tbody and table above the pink part so we need to close our tags BELOW the pink part.)

But, let's assume we want those cute captions that go under each picture...

We want to highlight #2 and drag it to the end of #1, right after it's closing /td. Then highlight #3 and drag it to the end of #2, right after it's closing /td. This is what it'll all look like AFTER you move #2 & #3 so they snug up with #1 (just like we did with the pictures).

The pink part is the three picture cells making our pictures line up within the table. The blue part is the three captions that will now line themselves up below their own picture. The green part is the extra code that is left over after we move the pictures A, B & C and the captions #1, #2 & #3. This code must be deleted, it's the code that was making a table for each photo, to keep the picture and caption together when they were in a vertical line (in the beginning, before we started moving stuff.) If you notice, the green is made up of opening and closing tr's, tbody's, tables (with extra code that you don't need to understand, lol) etcetera. 

You need to delete the GREEN, but make SURE you leave the closing tags /tbody and /table that are right under the blue captions, they close your table, remember? Guess what? You're nearly done, all the hard part is DONE. All we have to do is put a number in for the cellspacing!! If you have a lot of pics that you're trying to squeeze into a line, then use a small number like 2, but if you have more space to use up then use 10 or so. You can play and see what number makes the space you want. Oh, and to truly see what space you'll get, you have to preview your page which is beside SAVE above the header tools. 

The other thing I want to mention is that your code may be wider or narrower and therefore the "cuts" to start a new line may break at different places. Just see the basic code then it doesn't matter where the line breaks happen. Here's what our completed horizontally aligned pictures with captions look like...
EinsteinNice PeopleSharing is Caring
We've finished! Whew, that was some serious thinking work! Did you get it? I sure hope so! Because I couldn't come up with a better way to teach it. I know I used a lot of words but I wanted to make sure EVERYONE understood.

**One Last Note: One of the comments I received about this post mentioned the size of the pictures you can use to put in a row. I should have made that clear, the pictures DON'T have to be the same size, they can totally be a mix of long and wide and tall and small. I used three the same size because they LOOK better, lol. Hey, life if a series of looking good!

I'll be back soon with my artwork for this week's APR challenge (rainbow), until then, be good to one another and enjoy your Spring week.


P.S. I would really appreciate it if all my visitors who are enjoying this series would join up using my Linky Follower tool in the sidebar, that-a-way ----->
(if you'd like a follow back please leave me a comment requesting one, I'm always thrilled to discover new bloggy friends.)

Pin It
I'm reading: Blogging 101 (Part Three)Tweet this Post


  1. I need an ADVIL....LOL
    So glad you posted that teaching....I actually thought of it this morning when I woke...I hope I pick the right code....(I'm a scanner, so I will just wing it....LOL)....off to copy and paste....


  2. WOW!!! I have read every word and have managed to get everything *almost* right! Thanks for the lesson, Jenn. This will come in VERY handy!!!

  3. Oh I'll definitely have to try that out! I've been battling with my pictures to get them lined up in one of my pages until I gave up. When I wanted to line up pictures in one of my posts, I created a collage in Photoshop and then added the whole image to my post, which works well when they are different sizes. But this sounds definitely like a much simpler way to line up images of the same size. Thanks for explaining it all so well, Jenn, and for sharing it with us!

  4. Hi, I checked your blog via Bloh Hop - Exposure 99%. Your blog is lovely. I am now following your blog.

    Please spare time to check out our newly launched TTC/Parenting forums blog below and return the love by following us.

    Pregnancy Forum Blog ---> Pregnancy Forum

  5. I did it....Yeah!!!! Thanks a bunch Jenn....I know that took alot of time to prepare...I realllllllllllllllllllly appreciate it.


  6. I am so making a bucket of tea and giving that a go... you have put in so much work on this and make it sound achievable even for techo phobes like me... awesome stuff... wish I could understand all this stuff like you do and yes I know you will probably hoping we all will by the end of the series, but I have a sneaking suspicion the main thing I am going to know is that you are the queen of blogging 101...xx

  7. Wow, thanks so much for all the effort on this! I am VERY new at it all, so I appreciate it! New follower, would love a follow back at http://sassyshoppperreviews.blogspot.com/

  8. This is such a brilliant series of hints and tips. Thank you so much for putting so much of your time into sharing it with us.


Please leave me a comment, I've sure missed hearing from you!


Related Posts with Thumbnails
^ Scroll to Top