Make your own blog button

In honor of the blogging theme of the first ever Blog Expo, I am writing to you all today explaining how you can make your very own blog button!
I have to say that I did not know how do to this for a VERY long time. A lovely teacher, Mrs. Saoud, came to my aid and made my very first button. I was so grateful. It was wonderful.
Then I changed my layout and it didn't match as well. I wanted a change so I started to study the HTML code for the button. By study I mean stare at and try to figure it out. Needless to say I figured something out because I did eventually get it.



I have made my own buttons and countless of other buttons, for free for several other bloggers, even though some have, out of the kindness of their heart, donated to my Donors Choose Project . I am glad I was able to help them in this small way.
The first button I gave away was for Hadar's store. I guess I should make her a second for her Teachers Notebook store too. :p
Now I want to help you all. You can have a blog button for any even really. I have made many of the TBA buttons you see linking you back to different pages for the TBA events.

So first you should create your image. I use some digital scrap booking and clip-art papers and elements. I arrange it the way I want it on Word. I know it is weird that I use word but I use it so often it is the program I am most comfortable with.

After my image is just right I take a screen shot of my image. On my Mac Book I am able to customize the area I want to take a screen shot of. This makes my life a whole lot easier. For me creating the image is the largest and longest part. Once that is done, I upload the image to my Photobucket account.
Alright once that is done, you want to make sure your image is 200pixels x 200pixels. I have learned through trial and error that 200pxl x 200pxl is the standard amongst blog buttons. I have seen larger and smaller but it is usually the size that fits most side bars. I know Photobucket lets you re-size your image, I am not sure about other sites. However, you don't have to use Photobucket, you could use another photo site that gives you a "direct link" to your image, like Imagur.

Next, I have to create the HTML code. However, to make it easier all you will have to do is copy & paste.


First, you will have to copy the code below and paste it into a program you can type on like Word. Then you copy and paste the highlighted parts of the code.  :) Here we go...


(Disclaimer: This is the code for the button with the Grab box, that has an HTML code in it.)
<center><a href="This is where you paste the URL/ direct link to your blog" target="_blank" title="This is where you paste the name of your blog"><img style="width: 200px; height: 200px;" alt="This is where you paste the name of your blog" src="This is where you paste the direct link to the picture of your button" /></a> <center></center><center><textarea id="code-source" rows="3" cols="13" name="code-source">&lt;center&gt;&lt;a href="This is where you paste the URL/ direct link to your blog"&gt;&lt;img border="0" src="This is where you paste the direct link to the picture of your button"/&gt;&lt;/a&gt;&lt;/center&gt;</textarea></center></center>

(If you want the HTML code for just the button use this HTML code.) 
<center><a href="This is where you paste the URL/ direct link to your blog"><img border="0" src="This is where you paste the direct link to the picture of your button"/></a></center>
I use this code when I don't want others to grab my code but do want them to have an image to click on to link to another page. For example I use this code for my Donors Choose projects.

Photobucket

A few notes...
1. When copying the "This is where you paste the URL/ direct link to your blog" if you want the button to link to your blog make sure you are copying the general link to the blog.

2. When you want to link to a direct post, like a giveaway make sure you copy and paste the link to that specific post for the "This is where you paste the URL/ direct link to your blog". You should be able to see the title of your post in the "Direct Link"/ URL


Once you have got the updated code just copy and add it like an HTML button gadget on your blog.

Hope that was easy to follow. :) Enjoy the Expo, I know I am looking forward to the goodie bag! Have a great weekend. :)

13 comments:

  1. The best blog button maker ever!!!!

    ReplyDelete
  2. Thank you all. Your so kind. :)

    Ms. M

    ReplyDelete
  3. So I've worked on this and worked on this but I can't seem to get the image to show up. Any idea of what I might be doing wrong?

    ReplyDelete
  4. Kerri, are you talking about when the HTML code is finished?

    The tricky part about HTML code is that if 1 character is off it messes everything up.

    Could you email me your HTML code? I am at msk1ell(at)gmail(dot)com and I will see what is

    Ms. M

    ReplyDelete
  5. Thanks for sharing this.....Can't wait to try it out! This is one I am going to have to print out ;-)
    Thanks again!

    ReplyDelete
  6. You are a doll for sharing these steps! I love Word, but would never have thought of this! I love, love, love it!! I can't wait to start playing with it!
    Thanks again,
    ~Fern
    Fern Smith’s Classroom Ideas!

    ReplyDelete
  7. PS.... I just sent your Sit and Learn a little something, I am so excited about using Word for graphics instead of beating my head against the laptop all the time!!!
    ~Fern
    Fern Smith’s Classroom Ideas!

    ReplyDelete
  8. I am glad to help Fern. Thank you SOOOO much for your donation. An unexpected surprise.

    Ms. M

    ReplyDelete
  9. Thank you SOOOO much for this! I just created my own and feel like a little kid! I'm so excited!!! HAHA.Check my blog out www.shananicoleteaches.blogspot.com and tell me if you like it!)

    ReplyDelete
  10. You are so awesome! Thank you for taking the time to share this with all of us. :) I cannot wait until I have time to sit down and work on this. I re-posted on my blog.

    http://mrsungerskinders.blogspot.com/2011/09/ms-m-teaches-us-how-to-make-blog-button.html

    ReplyDelete
  11. I am glad you ladies were able to make some buttons for yourself! :)

    Ms. M

    ReplyDelete

Thank you!