ncharshaf handmade Adventures of a self taught bookbinder

18Nov/10Off

Decoding code: Adding a badge to your site

Having badges on your blog has become quite popular lately, and a great way to link to other websites or blogs in a more visually engaging way. Often, badges are used to show off if you have been featured somewhere, or to just link to a site or a cause that you support.

So, on to how to do them!

1. Find a badge that you like. For this example, I am going to use etsy's new "Every gift has a story" badge.

2. Generate the code Most places are generous enough to include everything that you need for the badge to allow you to just copy and paste, but lets pick this apart in case you ever want to modify, or build your own badge.

Here is the full code:

<a href="http://www.etsy.com/shop/ncharshaf?ref=badge"><img src="http://www.etsy.com/images/community/resources/badges/holiday-2010-badge-EN.png" /></a>

I have color coded this into its two sections, the link, and the image

The link: The link has an opening, and a closing tag. In red is the only text you need to worry about changing if you want to modify where the link takes you, everything else stays the same.

The opening tag: <a href="http://www.etsy.com/shop/ncharshaf?ref=badge">

and the closing tag: </a>

The image: You want to put the image in between the opening and closing link tags, this "wraps" the image inside of the link, so people click on the image and it takes you to the specified link.

The image tag starts with <img src=" and is closed by "/> The part in between the quotes, highlighted in red is where you put the url that your image is at.

<img src="http://www.etsy.com/images/community/resources/badges/holiday-2010-badge-EN.png" />

Once you have this code, you just copy and paste it into your website where you would like it to show up, I can post a tutorial on this later if needed.

Comments (0) Trackbacks (0)

Sorry, the comment form is closed at this time.

Trackbacks are disabled.