Skip to content

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>

10 thoughts on “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?”

  1. Thanks! I don’t know how you read my mind about every HTML question I have, but you do! I’m so excited to have just found your blog (and I’ve subscribed too).

  2. I am having an issue with trying to make a button for my blog. I have an image picked out that I would like to use as a button for a weekly carnival I want to start. It’s going to be called God-Stop Friday. I would like to make a post to talk about it and to have the button and the html code so others can have the button on their blog as well. I have searched and searched through your blog where you talk about that, but I can’t get it to work right. I think I’ve tried it at least 50 times. Can you please help me?

    Thank You,
    Patty

  3. Hey guys, I don’t think I’ve told y’all this before, but BB101 is a GREAT tool for bloggers like “me”. For instance, I just realized I was confusing memes and carnivals, thinking the words were interchangeable. Not that it matters to everyone, but to me? I wanna be more precise…accurate…when I write. Soooo, thanks for sharing information that everyone can understand!

    🙂

  4. Thanks for this post! I tried it this morning and even used the conversion pg so it would show up on blogger. It totally worked! Not that I doubted you. I, like Laura, would love to know how to add the scrolling boxes for the codes. Thanks for your work on this site.

  5. Psst… you know that you violate the flickr.com-guidelines (http://flickr.com/guidelines.gne) with the examples shown above?

    Every foto hostet on flickr.com must have a backlink to it’s fotopage on flickr.com – would be a shame if new bloggers follow your tips 1:1 and have their account suspendet…

  6. Thanks for the instructions. I am going to attempt it. I have a Random Act of Kindness button that I want to add the HTML code to so people can put it on their sidebars and participate.

Comments are closed.