An easy step by step tutorial for creating a functional blog button for your site
A blog button can be great tool for getting your name out there. Whether you’re swapping with another blogger, or someone just wants to share your button to let everyone know they enjoy reading your blog. In any case, if you don’t have a grab box on your site you’re missing out on an excellent opportunity. In order get started you’re going to need an account with an image hosting website. Two great free sites are imageshack.com and photobucket.com. Once you have that all set up we can get started. The end product will look something like this:
<div align="center"><a href="http://creatingmyowncareer.com/" title="Creating My Own Career"><img src="http://i1301.photobucket.com/albums/ag113/KellyStahleyArtDesign/bababab_zpsbf44a9d4.jpg" alt="Creating My Own Career" style="border:none;" /></a></div>
Step 1: The first thing you’re going to have to do is create the image for your blog button. Personally I use Adobe Illustrator but there are a bunch of free online image/photo editing programs that will work just as well. One I like is picmonkey.com. It’s free and has really great features to make your button look nice. I’m not going to go into detail about how to make the image but I suggest you create something that represents the style and tone of your blog; something that grabs the viewers attention and makes them want to click on it. You can make your blog button virtually any size you’d like, however I notice that the smaller buttons generally get “grabbed” more often. Some common sizes are 125×125 pixels, 200×100 pixels and 200×200 pixels.
Step 2: Next, upload your image to your hosting website. Make note of the image URL. It should look something like this -
Step 3: Now you’re going to have to insert your information into a piece of code that will display your button. Fill in the highlighted text in the following code with the your own information.
<!–grab button header –>
<div style=”width: 150px; margin: 0 auto;”>
<img src=”Image URL” alt=”Grab button for your blog name” width=”width in pixels” height=”height in pixels” />
<!–end grab button header –>
<!– button code box –>
<textarea rows=”15″ cols=”20″>
<divs3″>your blog name button” style=”width: 150px; margin: 0 auto;”>
<a href=”your blog url“>
<img src=”Image URL again” alt=”your blog name” width=”width in pixels” height=”height in pixels” />
</div><!–end button code box–>
</div> <!–end grab-button –>
Step 4: Now all you have to do is paste that code into the html of your blog wherever you want your grab box to be displayed. And that’s it!
Did you follow along and create your own blog button with a grab box? Leave a link to where you display it and I’ll grab it and put it on my sidebar.