On several blogs, I see a box under the blog’s button with the HTML code for people to add the button to their own blogs. How do you make that box with the code for people?

In my post about how to put a button on your sidebar and link it to another site, you can see how providing the specific HTML code for a button is helpful. It might look like this:

<a href=”https://www.bloggingbasics101.com”><img
src=”https://www.bloggingbasics101.com/BB101button2.jpg”></a>

All your readers have to do is copy and paste the HTML into their own sidebar, and ta da! There’s your pretty button and link back to your site. Sweet.

So, how do you do this? First you have to find the HTML code you’re looking for. HTML (HyperText Markup Language) is the code that tells your browser how to read and display each part of your post.

To find that HTML, you need to look in your Edit HTML tab and look for the JPG or GIF you’re trying to share (Ctrl + F will open a Find window where you can type the name of the graphic, e.g., button.jpg; Mac users can use the Apple key + F). Once you’ve found it, you’ll probably see the code you need and will look like this (with your relevant information in place of my examples in all caps):

<a href=”YOUR LINK HERE”>YOUR GRAPHIC</a>

Highlight all of that HTML code and copy it. Then click on your Compose Post or WYSIWYG tab and paste the code into your post where you’d like it to appear.

Important Note: If you want your HTML code to appear in your post, you must paste it or type in the Compose Post or WYSIWYG tab/window. If you type or paste it into your Edit HTML tab/window, it will be read as actual code instead of example code. For further explanation on this, please visit How do you show the HTML in your post without having the browser “read” it?

For those of you who are interested in a little more in-depth explanation of how to find the HTML code you’re looking for, I’ll explain a bit about the HTML you’ll be using. Everything I’m about to tell you is usually done automatically by your blog host when you use the WYSIWYG interface, but if you were to flip over to your Edit HTML tab, this is what you’d see and what it means.

When you are making a link you use these tags:

<a href=” “> and </a>

The <a href=” “> tells the browser that any text after it should be linked to something (e.g., another blog, another post, etc.). The </a> tells the browser that you are finished with that link and everything after the </a> doesn’t need to be linked. In other words, the </a> is ending the link.

You have probably noticed that in the <a href=” “> there are quotes. The URL or file name of where you are linking to goes here. For example, if you’re linking to Blogging Basics 101, it would look like this:

<a href=”https://www.bloggingbasics101.com”>

If you were going to place the BB101 button on your site, you’d know that the linking part of the HTML would need to look like this:

<a href=”https://www.bloggingbasics101.com”>  </a>

The only thing missing is the text or button/graphic that you want to link from. This information needs to go between the HTML linking code we just discussed. If you are just linking text, your code would look like this:

<a href=”https://www.bloggingbasics101.com”>YOUR TEXT HERE.</a>

If you want to link an image instead of text, you’ll need to tell the browser where to get that image. The code to do this is<img src=” “>. See how the abbreviations sort of look like Image Source? That’s exactly what your calling up–the source of the image. You place the URL or file reference for the image in between the quotes. For instance, if you are going to reference the BB101 button from this site, the HTML telling the browser where to find the picture is

<img src=”https://www.bloggingbasics101.com/BB101button2.jpg”>

So now we have our two parts of our code: the link and the image. When you put them together, you’ll have HTML code that looks like this:

<a href=”https://www.bloggingbasics101.com”><img src=”https://www.bloggingbasics101.com/BB101button2.jpg”></a>