The question I’ve been asked the most as I’ve related my journey into the depth of learning HTML is “How do I make a blog button?” Usually what they mean is how do you make the sharable kind where the code also appears so that others can place it in their Favorite Bloggers sections. What I’m going to go through is the whole process from actually making the graphic for the button to getting it place on your own blog.
The first step is to make the pretty picture you’d like to use as your button graphic. It can be something as simple as just plain words or more elaborate like vector art or photographs. Most bloggers use something also found in their blog header to make the button easily identifiable. A word of advice though, don’t use any copyrighted images.
If you don’t have a graphics program such as Photoshop or Paint Shop Pro, there are several programs that are free to download, like GIMP. I’ve never used anything other than PS and PSP, so I can’t make any recommendations based on personal knowledge, but Google should be able to find you something free that’s suitable for your experience level.
Once you are satisfied with an image, reduce the size. Based on the width of the columns in the more popular 2 or 3 column blog layouts, I would suggest something square and no more than 175 pixels. The last step in preparing the graphic is to upload it into a graphics hosting site. I use Photobucket and I’ve not had any complaints, though there are other free comparable sites out there.
Now that you have your image ready, its time to work up the code. I’m not going to attempt to explain what each of the tags mean because honestly, I don’t know myself. What I will do is give you a code that works with the portions highlighted that you’ll need to replace with your own blog URL and the direct URL of the image you created and uploaded.
Copy this code into a text editor (Notepad works best) :
<center><img alt=”Sunflower” src=”http://i747.photobucket.com/albums/xx117/daysonthecreek/Sunflowerbutton175png.png” /></center>
<textarea><center><a href=”http://daysonthecreek.blogspot.com/” target=”_blank”> <img alt=”SunflowerButton” src=”http://i747.photobucket.com/albums/xx117/daysonthecreek/Sunflowerbutton175png.png” /></a></center></textarea>
In this section, replace the orange text: Sunflower with another one word name for your button.
Here, replace the blue text in the code with the URL from where you uploaded your image into Photobucket, use the code from the Direct Link area.
In the red text section, put the URL for your blog’s main page
Replace the green text with SunflowerButton with another one word name for your image
Replace the second blue text with the same Direct Link used in the first blue text area
Okay, now that you have your code ready, you need to place it on your blog. Open an HTML widget (or text widget in WordPress) and place your whole code in there. Save it and preview your blog. You should see a copy of your image with a text area underneath that others can copy and paste onto their blogs to show your clickable button!
