Enter your keyword

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.
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:

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

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!


post a comment