Here is the button that I have made. I have posted this on my sidebar. People who want to link to my site with the button just need to copy the code in the box and add it to a HTML/JavaScript widget on their blog. Then, they will have a button on their blog that links to my blog. Want to create one for your blog? I have step by step instructions below.

I am by no means tech-savy. But, I have had lots of fun playing with and developing my blog. I noticed that many sites had little buttons that you could add to your blog that would link back to their blog. So, I decided that I wanted to try to figure out how to do it. I figured I would write it down so that I can pass along the info, but more importantly so that I have a reference for when I want to create another button or for when I change the look of my blog and need to replace my lost widgets. So, here is a step by step tutorial on how to make a button for your blog.
DISCLAIMER: I KNOW it seems like there are ALOT of steps, but for my sake I needed to describe each step in detail. So, it may be over-kill, but at least I won't have any questions when I have to use the steps to make a new button! :-)
As I said, I am not that tech-savy. I know that you can do a lot of this using digital scrapbooking, but I only know how to use paper and scissors. So, that is how I made my button (similar to my
header, but I am sure that you could probably use the same info if you have a digital design that you want to use for your button.
Having said all that, the paper version of my button measured about 2.5” x 2.5.” I scanned it in at 300 dpi and saved it to my computer. Here is what I did:
1) Open up the blog dashboard.
2) Select Posting and then Create. (I have found that for me the easiest way to create the button is to make it in a post and then paste it as a widget to on my sidebar.)
3) Use the “Add Image” tool and browse to find the scanned image you want to use for the button. Select “None” for the layout and “Small” for the image size. Upload image.
4) Once, the image is uploaded, click “Edit HTML” so that you can obtain the info needed to create the button. What you will need is: 1) the url of the website you want the button to link to (this will be the web address of your blog) 2) the image ID, and 3) the url of the image. #2 and #3 can be found in the HTML you see on the screen.
5) Copy and paste the HTML code below into your post. (It is easier if you paste it a few lines below the image code that appeared after uploading.
6) Now you will begin to make the following changes to this code by using the HTML code that was already on your screen. First, where it says, BLOG you will need to replace that with the web address of your blog. (Be sure to begin with http://) You will have to do this in two places.
7) Next, look in the HTML on your screen to find where it says img id=”……” Copy and paste the info that is between the quotations and use it to replace PHOTO-ID. You will have to do this in two places.
8) Now, look at the HTML on your screen to find where it says src=”….” Copy and paste the info that is between the quotations and use it to replace PHOTO-URL. You will have to do this in two places.
9) Now, you will need to add the following to the very end of the HTML code you are creating, but change the parenthesis to less-than and greater-than symbols: (/textarea)(/center)
10)Now, save your post.
11) Click Compose and take a look at your button.
12) If it looks good to you, then click Preview.
13) Click on your button to test that it links back to your blog.
14) If all is well, go back to your saved post. You may have noticed that you have two pics of your image. One is the button that links to your blog and the other is simply an image of the pic (If you click on it, it will just be an enlarged picture. It will not link to anything). Select “Edit HTML.” Now, it’s time to paste the button onto your blog as a widget.
15) Copy the HTML of the button.
16) Move from the “Posting” section to the “Layout” section.
17) Click “Add a Gadget”
18) Select “HTML/JavaScript.”
19) Paste the HTML of your button and save. Now you are all done! Enjoy your button!
Like what you've read?
Subscribe to have it delivered directly to your inbox!
{This post may contain affiliate or advertiser links. Please review my disclosure policy.}