How To Create a Simple Code Box on Blogger

You might not believe this, but there is a little nerd in me. I love to find ways to enhance my blog, tweak the hmtl codes to make it just so. Plenty of times it doesn't work-out, but I would always try.

How would you like to learn how to create a badge code box? One that is simple and just does its thing without crying for maintenance. It will look like the ones on my side bar, holding Thursday Two Questions and Self Sagacity's badge. It has no borders, no colors, just plain code boxes.


SS tip #1, I've tried the colored and fancy code boxes, and you know what? If you are not tech savvy, you will be wasting a lot of time editing. So stick with the basic until you become a guru or have time to spare.
SS tip #2, many codes I found will sneak in their url so that your code box will link to their site as well. The consequences are page rank and traffic rank leakage. If you don't care, don't worry about it. For people who are watching their page rank and traffic rank , this code box does not contain hidden links to other sites but the site you chose to link your image too.
SS tip #3, anytime you want a closer look at an image, just click on the image to enlarge. And for your information, the same goes to all the images on this website.

Here are the simple steps.

Create your image.

Obtain the image code, and if you don't know how to, refer to #3 of  How to Create a Favicon for Bloggers.

Link the image to the page or url you want.

Place the entire code with the link in between the green colored codes. Here is an example:

Below is the finished code with the image code and code box:

Now that you have the finished code box, decide where you want to place it on your site. Most of the time, it is best on your side bar. So let's go to your page element / or design tab. Click on add gadget, select the HTML option and copy the entire code to the window. Save.

This is the finish look. That is it folks! See how easy?


Thanks for stopping by today. Please feel free to leave me a comment or any thoughts you may have.