This page has moved to a new address.

Crackin' the Blogger Code ... Turning Images Into Links

Mommy Blog Designs: Crackin' the Blogger Code ... Turning Images Into Links

Sunday, July 17, 2011

Crackin' the Blogger Code ... Turning Images Into Links

I had so much fun writitng yesterday's HOW TO Blogger tutorial ... and I'm ready to have even more fun today!

Today we’re going to be talking about turning any image into a link. This can be handy in a few places ...
  1. You can use these images as your buttons in your menu bar (this is the follow up to the tutorial from yesterday on Setting up your menu bar using labels in Blogger)
  2. You will now be able to make your own buttons and banners 
  3. You will also now be able to place graphics and buttons where ever you would like on your site. (I have found this to be very handy! I now use graphics for links everywhere!) 
Here’s how to do it ...

STEP ONE: Create the image or graphic

This is actually not a design tutorial, so I am not going to teach you how to create images and graphics. Perhaps ... if there’s enough interest ... maybe that could be a future HOW TO series. But for now, let’s just talk about the coding, and HOW TO with Blogger.

Just a quick summary on how I do it ... I use an incredible site - They have millions of stock images for pretty much anything! I LOVE hanging out in Shutterstock!

I’ll go and grab an image from Shutterstock to start, then I’ll pop it into Photoshop and play around with it. That’s where I’ll add any text, extra layers, play around with the color scheme, and make any other changes I want to it.

You’re welcome to create your images any way you like. It can even be as simple as just creating a nice looking text box in Word, or Pages (Yup ... I use Pages! I’m a MAC girl all the way!!)

IMPORTANT ... once you have your image created, save it as a JPEG file.

STEP TWO: Upload your graphic

Now we need to take the graphic that you just created from your computer, and store it somewhere in internet land!

I use ImageShack to do this. Some people use PhotoBucket, or a few other file hosting services. My preference is ImageShack.

So go ahead and upload the image into your file hosting site. They will then give you a direct link to your image. Copy the URL that they give you.

Your link will look something like this:

How are we doing so far? Have you turned your image into a URL? If so ... let’s keep going ...

STEP THREE: Add some code to turn your URL into a Link!

OK ... if you were following along with me yesterday, you’ll remember our super fun HREF tag. We’re going to be using that tag again ... but we’re going to add just a little extra to it. This will ensure that our image URL turns into our image!

Here’s the code for you to use:

<a href="" ><img src="" /></a>

Copy that snippet of code exactly ... but be sure to change the 2 pieces ... Where you want to link to ... and Your Image URL.

And that’s it! So here’s an example of a completed image HREF tag:

<a href="" ><img src="" /></a>

{For those of you vB chickitas who are following along ... that’s actually a special surprise for ya! Add that EXACT piece of code to the sidebar on your blog and see what happens!}

And that’s it! Pretty simple! That’s how to turn any image into a link using HTML.

So ... coming back to yesterday’s tutorial and our menu bars ... All you will need to do is replace the plain text HREF tags that you put in yesterday with these nice graphic HREF tags ... and you’re good to go!

But wait! There’s more!!

BONUS: Now let’s take any image and turn it into a blog button. 
 Here’s the code for that ...
<a href=""><img src=""width="150px" height="150px" /></a>
<p>Copy the code below:</p>
<form><textarea rows="5" cols="22" readonly="readonly">
<a href="">
<img src="" /></a></textarea></form>

Again .. just copy and paste that entire snippet of code ... and replace it with your own info.

And yes ... you are supposed to enter the 2 URLs twice . Why? The first one is for your actual image to show ... and the second one is the text that your visitors can copy ... so they can easily grab your button!

Yup ... again ... really simple. Just copy and paste the codes I’m giving you, and replace with your own URLs.

And then to get your new button into Blogger ...
  • Log in to your Blogger dashboard and click on DESIGN. This should take you into PAGE ELEMENTS. 
  • Click on ADD GADGET. This will open a new window.
  • Scroll through the list and find HTML/JavaScript. Click on that one
  • A big text box will open. Copy and paste the entire button code you just created (With the 2 URLS twice)
  • Hit SAVE
  • Now you can drag and drop the HTML box here you want it to be on the page.  You can play around with the placement if you want.
  • Hit publish ... and take a look at what you created! Yeay! 
Please let me know if you have any questions, comments, or suggestions for future HOW TO Blogger tutorials!

Tomorrow we’re going to be removing that nasty looking Blogger menu bar at the top of every Blogger Blog! Your blog will look much cleaner and more professional looking with that Blogger bar removed. Come on back tomorrow ... and I’ll show you simply ... step by step ... how to remove the Blogger menu bar.

Tons of HUGS!!
Ro :)

Labels: ,


At August 17, 2011 at 7:21 AM , Blogger Syed Store said...

Hi Ro, Couldn't wait, so had to check your blog. And thanks again for sharing, specially the button one. Hey I tried to make mine and I got it halfway done but my image didn't work. Will you please explain how come I get the right image URL. I Will really appreciate.
Again would love to say, You are simply an awesome woman. I admire your talent.

At August 17, 2011 at 7:27 AM , Blogger Syed Store said...

Hey Never mind, I will try photo shutter, but would wait for you tutorial for Photoshop, "how to create image and graphics, my hubby is a graphic designer but I do not want to learn from him as he is not a good teacher like you. I am being honest. He would say I will do it for ya but never told me when may be in


Post a Comment

Subscribe to Post Comments [Atom]

<< Home