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:

 

300-250

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:

300-250
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!


Navigate