Mrs. Saoud, came to my aid and made my very first button. I was so grateful. It was wonderful.
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. :pNow 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><
(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.
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. :)