Blog Button Tutorial
Ah ha! You asked, I help. Here we go!
How to make a blog grab button!
Step 1:
So first off, obviously, you need a button! This can be a picture that you already have, or you can create one using Photoshop, Picasa, Microsoft Paint, or any other program you have on your computer. Here is my button that I made for this tutorial.
A good size for a grab button is 150×150, like the one pictured above. You can make it wider or taller if you prefer, but remember that most people have smaller sized sidebars!
Step 2:
Save your button to a file sharing program, such as Flickr, Photobucket, ImageShack, or anything of that nature. Which one you use is all your preference! I use ImageShack personally.
Step 3:
By clicking “Share” in any of these programs, you should see a list of links. Find the link that says “Direct Link” and copy that particular link. Put it somewhere for safe keeping, such as in a Notepad page. You’ll need this in a moment!
It should look something like this:
http://a.imageshack.us/img291/6387/testbutton.jpg
Step 4:
I’m assuming here that you’re making this button for your blog. Copy the URL of the blog page that you would like the button to take a person to when they click it. It can be your home page, or any other page you want to show up first. Add that URL to your Notepad page with the image URL.
Step 5:
Let’s take a look at the frame that you’ll be plugging your two URLs into.
Yes I realize it’s small, sorry. If you post code directly on a platform, such as blogger, it automatically will read it and use it so I had to take a picture. Below is a link to where you can download a copy for yourself to edit.
Download the code.txt file and go ahead and open it up to take a look. I’ll break some it down for you. All the code before the < br > symbol is what makes up your actual button that people will see. All the code after that is what makes up the box with the code, that people can copy and take your button elsewhere! Pretty cool right?
Step 6:
Time to plug things in! Be very careful what you erase and what you keep!
Erase both areas that say in capital letters “YOUR URL HERE”. Do NOT erase the quotes in the first section, but DO erase the parentheses in the second section. Replace these with the URL that you copied earlier from the webpage you want people to see when they click your button.
Erase both areas that say in capital letters “YOUR IMAGE URL HERE”. Again, DO NOT erase the quotes in the first section, but DO erase the parentheses in the second section. Replace these with the URL that you copied from your photo hosting account. This will be the picture that shows up.
Note: This means you are replacing four sections. I repeat four. Make sure!
Now, if you were careful you can save and refresh and…VIOLA!
<a href=”http://afanaticbookblog.blogspot.com”><img src=”http://i277.photobucket.com/albums/kk61/roses7184/testbutton.jpg” /></a>
One beautiful grab button all ready to go! Look at you, you amazing HTML coder! Woot!
A word of advice. If at first you don’t succeed, ask for help and try try again. You’ll get it! Leave me a comment if you need anymore help, and if you succeed let me know so I can go snag your new button to display on my blog!
Much love!
