How to Add a Button to Your Blog

Secret of the Stole II ButtonThere have been several questions come up about how to add a blog button (or image) to your own site or blog, so I thought I would write up a little tutorial on how to do this.

If you have any questions after reading the post please feel free to leave a question in the comment area and I will try to address the questions as they come up.

The process is very easy, and the information below is intended for those who are needed some help with the very basics of adding an image to their site.

What is a Blog Button

A blog button, as it is often referred to as, is basically and image, used to link to a group or site to show participation, advertise, or just show what you have found.

Many Yahoo! groups use buttons to identify the group and give some perspective as to what the group is about. I am sure most have seen an avatar at one point or another. This is just one form of a button.

Where can I Find These Buttons

Some groups have buttons made by the owners, some use a pre-made icon or graphic, but usually you can find the buttons with the overall group description, or in Yahoo! groups, check the files.

You can also check the owners blog as often times these are posted so they are easy to find (like DK’s button post), but, one of the easiest ways to find a button is on another blog or site.

At the time of this writing, I just received an email from another blog that had added one of the buttons, Runner Girl Knits, and the button is on the right hand sidebar (good job Amy).

For the Secret of the Stole II group, you can find all the group buttons in the files section of the group, in a folder called “buttons”.

How Do I Get the Graphic to Use

Before taking an image or graphic from another site you should always check with the site owner or company to make sure they allow the non-commercial use of their images, many do not. In this case, DK’s buttons were made specifically for the group to use, so no need to ask first in this case.

Getting a copy of the image or images is very simple. You can just find the image you like, then right click on the image and then click “save as” or “save to file” and it will save the image to your local machine.

Keep it in a folder where you remember where it is located for later use and whala you have to the image.

Can I Just Copy the Button from Any Blog

This depends. In the case we are talking about here, yes. The images were made by our company for anyone to use, so as long as it is one of our official buttons or graphics it doesn’t really matter what site you save the button from.

If you are unsure of the origin of the graphic, best to just copy it from the owner or location they have specified.

How Do I Add it to My Blog

This is going to be a little different for each person depending on how they setup their blog. I will show a few examples below for you to try. There are basically two different ways to add a photo or image. (1) You can add it through the blog interface, like through Blogger or WordPress, or (2) you can code it into your blog or site manually.

Adding a Photo Using the Blog Interface

This example is going to be using Blogger since it is a very popular interface with knitting bloggers, but those who use WordPress or any of the other blog interfaces available, will see a similar screen or function.

First, you want to go to your blogs admin area, usually where you do your posts. In Blogger, you can click on customize, or just go to the template area. The click on the link called add a page element. Another box will open and you can choose the option for add photo. Just follow the instructions and then save your changes and there is your image (see the two screen shots below).

Don’t forget to add the url to the group so when someone visits your site they can just click on the image to go to the group or site you want. For the Secret of the Stole II group, that url would be

Blogger Add Photo

Blogger Add Photo

Adding a Photo Using Code

You can also add an image by just placing the code in the sidebar of your blog or in the post itself. If you have access to the code, you can just paste the image code anywhere in your blog you like and it will show the image. Don’t forget, code is very specific, it will do exactly what you tell it to do, nothing more or less. If the image doesn’t show up, there might be something not quite right in the code, but that happens all the time, so don’t be discouraged.

<a href=”; >
<img src=”; /> </a>

The code above will show you the image when you replace the [] with the proper url location and the photo-name.jpg replaced with the file name you saved on your computer. The url location is going to be where the image is stored on the Internet. This could be an ftp site, Flicker, any image or photo gallery site, you just need to know where the image is being stored and place the address just after the src=” part of the code above.

To make the image a link to the group itself comes from the <a href=” section and you can make the http:// location anything you need. Just replace the group url with the address you want and the image will be linked to the site of your choice.

Can I Just Link to the Image (hotlinking)?

In a word, NO. This is called hotlinking and this is a big no-no with blog owners, webmasters, site owners, just about anyone that hosts their own site. When you just link to an image instead of saving it to your local computer and then “hosting” the image somewhere, you are using the bandwidth of the other person and this is a very big deal on the Internet.

Each time someone views the image on a post you have written the image loads from the linked location, so unless the link location is yours (or available for you to use) it would be best not to use it in that location. Not only does it cost the other person money in some cases it will make for some unpopular opinions of your hard work.

There is another reason as well. When you link to the image instead of saving it yourself, you do not have control over what the image looks like. I have know several people who have found a person using a hotlink of their image and they had no problem what-so-ever with replacing the nice looking image displaying on your site with a not-so-nice image of… well… you get the idea. Anything they want.

Conclusion on Adding Images

Adding an image or button to your blog is easy to do and can increase the value of your blog to your readers. If you have any questions about how to add an image there are lots of knowledgeable blogging knitters that would love to help you. I hope that helps, good luck, and if you have any questions just leave them in the comments below. Mr K

18 thoughts on “How to Add a Button to Your Blog

  1. Hi,
    I put your button on my blog-all by myself. Usually I have to ask my son for help. And I linked it to the Yahoo site. I don’t see any drop down reason box but please use this as my blog contest entry.

  2. Hi again,
    The only form I see on the main page is the form for enews and I can’t get it to take my email address. I am looking at the home page and don’t see any other contact form. Is there another page? Can you send me the address?
    Thanks again.

  3. I was able to add the button to my blog, but I can’t figure out how to add the yahoo groups link to the button. I am very new to blogging and am trying to get up to speed. Thanks.


    PS. How do I get to the contest comment section?

  4. Sylvia, thanks for the comment. The button looks great. To have the button be a link to the group, you just need to add the code below in front of the image code.

    You should be able to edit your sidebar on your blog, then just put this in front of the code for the image. The part to add is what is in the quote box above, just add the first part with the url in front of the img tag.

    Hope that helps. To join the contest, just go to the “contact” link at the top of any page on the site and submit your blog from there. Thanks, Scott

  5. Sorry, I still don’t understand how to link the blog button. I used Blogger, Template to add the picture of the SOTSii button, I don’t see any place to add the link, and I certainly don’t know how to do it. Help!!

  6. Cindy, after looking at bloggers settings a little more closely I can see that the aspect of adding a link to each image is not quite as easy as it could be. There is NOT a url address on the image line, so, you either have to actually add a page element, but instead of using the image, use the add html/java script option and add the code, as listed above in the blog post… or

    you can edit the actual html of the template to put the link in before the image. Blogger did not make this that easy since everything is in a widget now. I will find the code specific to the blogger widget and post it here when I find the easiest way to do it.

    The easiest way to do the whole thing is going to be through adding the html yourself through a page element. Just host the image on flicker or something like that, then call the image location from your flicker account and use the code option above in the post. Scott

  7. Bit of a braindead week, I’ve added the image but still haven’t worked out how to do the link. Ordinarily, I just stick a clickable list below the pic but Blogger’s not playing ball! Still, I’ve put a link in todays blog too, just to be sure!

  8. Pingback: Sots Has a New iPhone Toy | DK the Nautical Knitter

  9. Thank you, thank you, thank you!! I have a new lap top and a new blog and have been trying to over 3 weeks to figure out how people put these buttons on blogs! Thanks to you and a free hour to figure it out, I was able to put all the little buttons on my blog that I ever wanted. Bless you!!

  10. Pingback: Sots Has a New iPhone Toy | Deborah Fillmer

Is anybody out there?

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s