I have no graphic design experience (obviously) and couldn't even locate pictures on my computer before I started blogging. But I knew that if I wanted to blog, I'd have to learn. A lot. And I'm getting there. Slowly. So last week, when I showed you how I made my blog button and how I installed it, I had an idea. Why not make my project pictures clickable? Then, my pages would become a little more interactive and user friendly. Here's my step-by-step, in case you want to try it too.
Start with an image. I uploaded mine to Picnik (I know they are closing. I am using other programs, like Pixlr and Fotoflexer, but for now I knew I could do these in Picnik faster.)
Crop the picture into a square. I made mine as big as possible.
Then resize the picture. I chose 200 x 200. But this can be changed in the HTML code at any point. So if you want to change the size later, it's easy.
You can edit the picture (exposure/sharpness), then save it to Photobucket.
Now, you have a picture to use. We'll get back to that in a moment. Head back to your blog, and open a new page. Then choose the "Edit Html" tab on the top.
Now add the following -
<a href="http://mycoveredbridge.blogspot.com/2011/08/hey-lets-make-dance-floor.html" target="_blank"><img height="200" source="blank" src="http://i1180.photobucket.com/albums/x414/kristenW4/dancefloor.jpg" width="200" /></a>
BUT you need to make the following changes -
1. The line in red - this is your post URL. You can find it by opening the post (in a new tab).
Simply copy and paste it over the example.
2. The line in green - this is your picture URL in Photobucket. If you hover over the picture that you want to use, a pop up box will appear. Choose "Direct Link". Paste that code where it is green.
Does this sound confusing? Well, think of it like this - the HTML code will do a couple of things. It tells the computer where your picture is (the green line) and where you want to go (the red line). Once you have changed those two lines, you are finished! If you click over to the "Compose" tab, you should be able to see your picture! And once you publish, you should be able to click on it!
I put multiple projects on the page by following these steps for each project. Just remember to eliminate the space between each picture's HTML code. So the end of one code and the beginning of the next code should look like this -
/></a><a href=
And one last point, I chose to add a bit of code to make it easier to come back to the main page. When you click a picture, it opens in a new tab. That is my preference (I don't like clicking the back button a bunch of times). Look at the code above. See this -
target="_blank"
That's what makes it open a new tab. If you don't want it to open a tab, simply take that out.
I hope this helps! If you have any questions - or you need something to be a little clearer - leave a comment or send an email. Like I said, I'm still learning all of this stuff. And at first, it is really confusing. But the more you play around with things, the easier it gets! Really! So give it a try!
