Pictures: Side-by-Side

Have you noticed that sometimes I will put up pictures like this:


Or this:


{p.s. all pics via pinterest, which i am now obsessed with}

I am going to show you how.
It's super easy once you get the hang of it,
plus I think this is a fun way for you to "spice" up your blog.
Picture
after
picture
after
picture
after
picture
can get old.

So here's what I do:
I can't remember where,
but I found this code that I have just kept forever:
{ha. sound legit enough, right?}

<table><tbody><tr> <td><img alt="" height="330" src="http://i609.photobucket.com/albums/tt173/AudreyFuller/119118100_kRWg0FiV_c.jpg" width="390" /></td> <td><img alt="" height="330" src="http://i609.photobucket.com/albums/tt173/AudreyFuller/83845813_S383LPb0_c.jpg" width="270" /></td></tr></tbody></table>


And now I'm going to try and break it down for you.
Color code style.
  • These are opening and closing "tags". Do NOT, I repeat: DO NOT delete these or mess with these. If even a bracket gets deleted, it can be frustrating to find and fix.
  • This is where, within the "", you can write what you want it to say when someone puts their curser/mouse over your picture.
  • This is the "direct link" that you copy and paste from photobucket.
  • The height and width, duh. {jk} This is where you can RESIZE your photos to fit how you want them to! Yay!
And then if you want to add more pics in the line up,
you simply add another line of script in like this...

<td><img alt="" height="310" src="http://i609.photobucket.com/albums/tt173/AudreyFuller/101092004_0M3u7G9h_c.jpg" width="180" /></td>
...and get this:

<table><tbody>
<tr><td><img alt="" height="310" src="
http://i609.photobucket.com/albums/tt173/AudreyFuller/101092004_0M3u7G9h_c.jpg" width="180" /></td><td><img alt="" height="310" src="http://i609.photobucket.com/albums/tt173/AudreyFuller/26486532_9rtGgP2K_c.jpg" width="260" /></td><td><img alt="" height="310" src="http://i609.photobucket.com/albums/tt173/AudreyFuller/117241257_pIEmCXka_c.jpg" width="200" /></td></tr>
</tbody></table>

Does that kinda,
sorta make sense?
It's really not bad if you can just find where the tags begin and end.

So right before I open a post,
especially if I know I'm going to add in some cool "side-by-side" pictures,
I copy this code from a previous post {under "edit posts"},
paste it into my "new post",
and then just change the direct links.
Ta da!
Now you go try it!

4 comments

  1. good tips! this is one i have never heard of! I always go into photoshop and maneuver them side by side which is such a pain this seems much more simple!

    ReplyDelete
  2. That's what I used to do too!

    ReplyDelete
  3. So do you have to have photo bucket to do this though? I don't even think I have photoshop. I love that you do side by side cause you're right picture after picture after picture is annoying.

    ReplyDelete
  4. Yes, or at least another uploading site. I just prefere Photobucket. And there are alternatives to photoshop, so no worries! :)

    ReplyDelete

I love hearing what you have to say!