How to make a Code & Box for Your Blog Badge, MeMe, or Pic Link!

Today in Computer Coaching I am addressing something a little more sophisticated. You wont need to learn this if you don't ever want to make a pic link/badge for your Blog or Meme, or to announce something by posting a picture then when someone clicks on it, it takes them back to a place you want them to go.

A lot of women have asked me how to do this and there are already places on the web that explain. But I am going to show you anyway, so you have the info right at hand with all you need!

Let's do an example of what I mean. Let's use, Take Root and Write. Trw_badge

You have probably seen this on the right side of our site. It is our TRW pic link or Badge. Whatever you want to call it. It is the 'symbol' of our site. Under it you see a code inside a box. If you were to click in the box, highlight all the code and copy it to your virtual clipboard, then go paste it somewhere, anywhere HTML is allowed, then our Take Root Write Badge would APPEAR in that spot!

Not only that but when someone clicks on it, no matter where it is, it will lead them back to the main page of TRW.

You will see these all over the blog community and actually most websites. If you have or want to create a meme, you would need to do this so others can support and take part in your meme.

So HOW DO WE DO THIS?

First: You need a picture/badge. (like ours to the left)

Second: You need to HOST your picture on photobucket. That's simple enough. Just sign up and upload your pic. Follow the instructions.

Third: You need the Direct Link for your now hosted picture. Simple. Just click on 'Direct Link' in PB by your picture. It is now copied to your virtual clipboard.

Fourth: We will now insert (paste) this Direct link into the code below where it says, DIRECT PIC LINK HERE.
Careful here! You want to make sure to ONLY put the link in, dont erase anything but the words...

DIRECT PIC LINK HERE

Fifth: Now you need the direct website link that will lead people to where you want them. Like for our TRW badge, it leads you to http://www.takerootandwrite.com/
So, Copy your direct link and now insert it into the code below where it says, WEB LINK HERE.

Here is the code... DO NOT erase any quotation marks, or anything!!

Now if you want your website to open in a new window, use this code below...

<a href="WEB LINK HERE" target="_blank"><img src="DIRECT PIC LINK HERE" /></a>

Your not done! This is just the code you can add directly somewhere yourself. Like on your own blog, with no code box, or not showing the code in ANYWAY.

So let's you want to keep it simle and just share your new code with friends or in a post on your blog. Well, what will happen when you add that new code to a post or anywhere HTML it will auto turn into your Pic Link or Badge. That doesn't help them!

Let's first look at how to just post the code with it actually staying as code.
You need to go to this website that will auto change your code so you can post. It has a great name, are you ready, you will feel very techy!

Convert < and > to > and < (make you want to run?) Don't!

The link to this page is HERE for you to come back to.
It's VERY simple, so don't run!

UPDATE HERE SINCE 1st POSTED! They closed the website above, so you need to use the info below to add the exact same app to your Google Homepage. Which if you dont have, you should have!

I am doing a 'coaching' post on setting up your google homepage, will add link HERE.

So Go to iGoogle then open your acct. This is awesome for SOOO many reasons. But for today you are going to add this app HERE to your personal iGoogle page. It will stay there until you take it off. I use it ALOT so mine stays! It works the same way as below, so you can still use these directions!

When you get to the page you will see like the pic to the left.

You can click on that pic to see a bigger view!

You can see in the pic that I posted our TRW badge code in it. Just like you just created for yourself.
After your code is in you just click on the button under the window (look at my courser) It says to Convert to Character Entities. Just Click it!

Then you will see a new code that looks all crazy pop up over in the other window!
That is the code you now copy and then paste either into a post on your blog, or into a Code Box.
This wierd looking code is actually so when you post it, it will NOT turn into your picture. It will actually turn into your actual code! This is so now, people can come and copy and paste your code to add to their blog, or be part of your meme etc.

SO! Are you ready to go ALL THE WAY! Meaning creating a cute little box to hold your code??? Like on Take Root and Write and in Christian Women Take Root?

Well, with a few more steps, you can have a really professional touch!

Here is a sample code which you can tweek the size and colors. This is for our TRW code box.

This code will generate an EMPTY code box... Empty_code_box because I did not have any of the RED below inside the code.

You need to add your really funky code that you copied and pasted from the Convert website into the code over the entire RED area. So your funky code will replace the red. When you do that, you will end up with your actual code in a box!

Very Cool! Now be brave and I am going to show you a few areas in the code you can tweek so easily to make it match your blog or meme better, by adjusting color or size etc. This time only look at the RED to see things you can alter. If you need color codes for the colors you want to use, here is a link to grab them. Just copy and paste the color code you like over the code number! Site HERE.

REMEMBER Don't Copy this code below! Just LOOK at it and Learn what you can alter!

See from above I marked-

"border: 3px solid black ----You could change the 3, to bigger or smaller border and also the Black to any normal color name.

height: 75px; width: 150px;---- You can change the height and width here.

background-color: #CCCC66--- Here you would use the color code you pick and just replace the CCCC66

Well there you have it! Now go for it! Gives you a little idea of playing with code!

NOTE! Here is a New Video Tutorial on Getting a Picture to link to where you want.

HERE

Make sure you click the video to see full screen. Also all text used in the video is under the video!

Comments

You can follow this conversation by subscribing to the comment feed for this post.

This was SUPER HELPFUL and I think I got it to work! Thank you SO much!

Posted by: Jenni | August 27, 2008 at 10:14 AM

Help! I am stuck on the 4th step....

Posted by: Venus | August 27, 2008 at 06:24 PM

@ Jenni, We need to tweek your background color, so it matches your badge more. I can help--- Come over!

@ Venus Get over to the Computer Coaching Group in CWTR, I will help you out!! :-)

BLessings!
Noelle

Posted by: Noelle | August 27, 2008 at 07:29 PM

Boohoo! It didn't work for me.
For some reason, it kept putting the graphic in the box, not the coding for the graphic. And it took stuff out of my sidebar. Oh well.

Posted by: Heidi | August 28, 2008 at 11:57 AM

@ Heidi~ You are not using the website that transforms the code for you. Look at the pic above- The part that says...
Convert < and > to > and < (make you want to run?) Don't!

That is KEY to getting the code in AS CODE, not a picture.
Let me know :-)

Posted by: Noelle | August 28, 2008 at 01:24 PM

I DID IT I DID IT!!! BUT: How do I get the box under the picture? I got the code in the box but I can't figure out how to get it under my badge.
Thanks Noelle you're the best!!

Posted by: Venus | September 05, 2008 at 12:58 PM

OH DUH!! I got it, I just needed more coffee for my brain! I DID IT!! My badge is on my page!!

Posted by: Venus | September 05, 2008 at 03:03 PM

Yeah me again it looks right but it doesn't work!

Posted by: Venus | September 05, 2008 at 03:23 PM