Tutorials, Tips, and Resources

for Creating a Better Blog

7-Day Blog Bootcamp Challenge

Shape up your blog in a week! (learn more)

How To Make A Blog Button With HTML Grab Code

How To Make A Blog Button With HTML Grab Code
It’s been a while since I answered a reader question, so I thought I would take this opportunity to knock one out!

Diana asked: “Can you make a tutorial on how to make a blog button with a grab box code? I’ve been having trouble with this.”

Sure! Blog buttons, or copy and paste banners, have been popular in the blogging world and are actually fairly easy to do. I assume you’ve already read through my HTML: The Very Basics post so you have a bit of an idea about what this tutorial requires.

First, we will need an image to use as our button. I’m going to use this 300×250 ad:



Then, I want to put a selectable HTML code below it so others can copy and paste the code to add this image to their own website. To do this, we’re just going to use the <textarea> HTML code. The <textarea> code works by adding a text box, and whatever you want to appear within the text box is placed between the <textara> </textarea> elements. For example, if we wanted to just display text within the textarea, it would look like this:

<textarea>this is some text within the text box</textarea>

But we don’t want text within our text box, we want an HTML code. Simple, just place the HTML image link code within the text box:

<textarea><a href="http://www.yourlink.com"><img src="http://www.yourlink.com/image.jpg"></a></textarea>

But wait, we need to change something first.  The < and > symbols within the textarea are confusing the code as a whole. It is not sure what to do with them because you’re displaying a code within a code. All we need to do is swap out the < and > characters within the textarea for their alphanumeric counterparts, the less than and greater than entities: &lt; and &gt; (LT for Less Than, GT for Greater Than), like so:

<textarea>&lt;a href="http://www.yourlink.com"&gt;&lt;img src="http://www.yourlink.com/image.jpg"&gt;&lt;/a&gt;</textarea>

You’re just swapping < for &lt; and > for &gt; get it?

Here is how the whole thing looks together:

You can change the size of the textarea by adding the rows and cols (columns) values:

<textarea rows=”3″ cols=”40″>your code here</textarea>

Rows is basically the height while cols is the width. Play around with the numbers to get your box properly sized.

You copy and paste this code as an example for building your own text box:

<textarea>&lt;a href="http://www.yourlink.com"&gt;&lt;img src="http://www.yourlink.com/image.jpg"&gt;&lt;/a&gt;</textarea>

I hope you enjoyed this tutorial!

  • Enbrethiliel


    The “less than” and “greater than” signs used to work perfectly well inside the text area, but when I edited one of my sidebar widgets recently, the grab code just got messed up. This post was really helpful in getting me to reconstruct what I had lost. Thanks! =)

  • Mary O’Malley

    This is very helpful information. Thank you so much for sharing it,.

  • We can use same elements for html 5 also?

  • Very helpful!!! Thank you!!!

    Abbie E.


  • Thank you so much for this tutorial Dana. I have seen these HTML code grab boxes on other Blogger’s sites but haven’t been able to figure out how to do one for my Motorcycle Monday meme button. It worked like a charm. Once again a big thank you!!!

  • I found some useful information in your blog. it was awesome to read.
    thanks for sharing this great content
    Computer Tricks