The Blind Leading the Blind: a tutorial

Technology comes easy for some people. But not for me. Everything I know how to do on the computer has been hard fought and hard won, usually learned one baby step at a time.

That’s why I am so excited–so ECSTATIC–that I learned how to make a linked thumbnail image for my blogs, and how to get the HTML code to appear below the image in a scroll box!! Ladies, I can’t even figure out how to work the remote controls to turn my television on by myself. This is HUGE!

I’ve been searching for this very information for at least a year. I’ve tried to follow different people’s instructions, but to no avail. So now that I have finally figured it out, I want to explain how I did it.

If nothing else, I can refer to this post next week when I want to do this again but can’t remember what steps I took! Maybe some of you have been wondering how to do the same thing with your blogs. Believe me, if I learned how to do this, you can learn, too! My way is probably not the best way….any technical guru will most likely tell you that. But I don’t know any technical gurus, and this is the way that worked for me.

By the way, I owe it all to two excellent tutorials I found. Smilemonsters actually convinced me that I could do this, and showed me how to build the linked image. Blogging Basics 101 taught me how to get the HTML code into a scroll box and how to fool the computer into not reading the code.

I’m still learning how to take an image and put text and graphics onto it. I’ve learned how to use photoshop just a bit, but I can’t figure out how to download my doctored image to my computer. As I said, I’m learning by baby steps. So we’ll save that lesson for another tutorial down the road.

Let’s assume you’ve already got an image. In my case, a couple sweet friends each made me an image for two of my sites. I’m now trying to learn to make one myself for this blog.

Resizing the image to a thumbnail
If you are working in Photoshop, you can resize your image right there. Most thumbnail images should be around 125 x 125, give or take. Just upload your photo, click edit, then click resize, then click custom, and type your desired size into the boxes provided. When I do this, I can set one number and the other automatically re-adjusts. My image isn’t a perfect square, so it doesn’t come out a perfect 125 x 125. Again, I’m still learning here.

If you already have an image and you aren’t using photoshop, you can resize your image right on your browser at Pixer.us. Just upload your image, click the resize button and drag the button to the size you want, then save the image to your computer.

Generating HTML code for your button
Now you need to generate HTML code for your image. You can do this at Photobucket. You’ll need to upload the newly resized thumbnail. Then hover over the image, and you’ll see a drop down menu appear below your image. One of the items will say “HTML”. You want to copy that HTML code.

Getting the code onto your website
Next, go to the website where you want to put the image. If you are working in blogger, click on your layout, then Get a gadget, then HTML code. If you are on WordPress, go into your Widgets and drag a text/HTML box over to the sidebar.

Here’s where it gets messy. There is a way to put an example of this code right into this post, in such a way that you can read it but the computer ignores it. I can’t figure that out. Here is a step by step of what to put in your widget box or gadget box. If you want something simple you can copy and paste, go to Heather’s post at Smilebox and copy her code from there. If you do that, you can skip to the part where it says “Cleaning up the code”.

Here are my instruction, though, in case you don’t want to merely copy and paste, you want to BUILD it YOURSELF!

At the top of the HTML box, type this:

a href=”Enter Website Here”

and enclose that phrase with a carat on either end so that you see < before the letter a and > after the second quotation mark.

Enter your web address where it says enter website here, making sure you put the complete http:// address, not just the name of your site.

The next part of your code begins with another < sign, placed immediately following your last > sign. After the < sign, write the letters img src=”Enter photo HTML code here”

Put the HTML code for the image (which you generated at Photobucket) where it says Enter photo HTML code here.

To finish out this strand of code you’ll need a backslash after the last quotation mark /

Then a double carat, backslash, letter a, end carat. The symbols look like this, but with no spaces in between
>

<

/

a

>

Cleaning up the code
All you techies, look away now (or laugh, whichever you prefer). Whenever I click “save” my code somehow morphs. If I go to my website, I see my beautiful, linked button image, but there is extra code beneath it. Code I did not build myself. And what’s worse, my readers can see it, too! That’s OK. You can fix it.

Once you’ve done the above step and clicked save, go to your website and check out your new badge. Is there an extra http:// address below your badge, or a repeat of some of the symbols you just typed? If there is, go back to the window where you just placed the code. You should be able to see at a glance where your “good” code ends and where the extra code (which the computer generated, but you didn’t build) begins. Just delete that extra part. Save again and go back to your site. Check your button: does it look perfect? Click it, does it lead where it should? Great job!!

Get that code into a scroll box so people can grab your button
You want your friends to be able to easily put your button on their site, right? Up until now, I’ve been doing this the old fashioned way. I download the button image to my computer, then upload it again in WordPress or Blogger as a linked image, typing in the web address myself. You can use this technique any time you want to put an image on your blog when the HTML code is not provided.

But you want to make it easy for your friends, right? It is so simple.

Just copy the code you used to make the image in the first place (after you’ve saved and cleaned up that extra http:// information). Paste it below the original code. If you publish it like this, it will just show up as two linked images. You want a way to make the second set of code appear as code, so someone can copy it. You just need to put something before and after that code so that the computer doesn’t “read” the code and turn it into an image. I got this to work in my sidebar, but can’t figure out how to make it work in a post.

So although I wish I could show you an exact example, I am not good enough for that yet. What you want to do is write the word textarea and enclose it in carats <> and put that at the beginning of your code. Then you’ll want to write /textarea and enclose that in carats <> and put that at the end of your code.

Notice the part that goes after your code has a backslash in it…very important. When I put this before and after my code, it automatically created a scroll box for the code. What a bonus!

Don’t forget to save what you’ve just done. Then go to your site and grab your new code. Test it out to make sure it works before you assume that it does. One time I forgot to add that all-important backslash and my HTML code box contained everything from my site’s home page!

Happy Blogging!