How To Make A Blog Badge (with grab code)
 |
| example |
This tutorial is designed to help you create your own badge and to show you how the HTML code is constructed. This gives you a bit more understanding so that you can create buttons for almost anything - to click through to pages on your own blog, to promote all posts under a certain label or even to point your visitors in the direction of a guest post you have written.
Step 1
Find a picture that you would like for your button. You can use any image you like but preferably a picture that you have taken yourself or a free* image from the internet. A bright image is good but relative to the subject is better.
Step 2
 |
| Use the direct link code |
Step 3
Edit your image (in Photobucket or similar) to approximatly 120 x 120 pixels - any smaller and it will not be prominent enough, any bigger and it might take over someone's sidebar and discourage them to display it. At this point you can also add any text to help promote your cause.
Step 4
Now to code everything up. I will use the HTML that I created for my own button and colour-code it for simplicity. If you copy the code below into "notepad" and change the necessary links/information you will be able to save your code on your own computer.
<a href="http://www.geekalicious.co.uk/" target="_blank"><img src="http://i1353.photobucket.com/albums/q676/iamtypecast/Geekalicious/GeekaliciousThinkGeek150x200_zps660ff4ce.jpg" border="0" alt="Geekalicious" /></a><br />
<font size="2">Grab my button<br />and link to my blog</font><br />
<textarea cols="20" rows="10"><a href="http://www.geekalicious.co.uk/" target="_blank"><img src="http://i1353.photobucket.com/albums/q676/iamtypecast/Geekalicious/GeekaliciousThinkGeek150x200_zps660ff4ce.jpg" border="0" alt="Geekalicious" /></a></textarea>
- The yellow section is the exact link you want your visitor to be direct to when they click on the button
- The red section is the direct link to the uploaded image
- The green section is to help with screen readers. You can put any text here for screen readers to describe the image.
- The purple section is the text that visitors will read to be encourage to place this button on their blog.
- The blue section is the sizing of the text (2) and the white "grab" area (20 columns x 10 rows). Adjust these to whatever you prefer.
- The black text is basic HTML and should be kept as displayed.
For information only
The first section displays the button
The second section displays the text
The third section displays the "grab code" in a handy box
Step 5
To place this widget on your blog sidebar use the HTML/JavaScript widget facility in your blog dashboard - simply copy the text and paste it into the widget box, then save. If you're like me and prefer things centred then add <center> at the beginning of the HTML and </center> at the end of it.
¨¨°º©©º°¨¨
If this post has been useful then I'd love you to say
"thank you" by displaying my blog badge in your sidebar
Grab my button
and link to my blog
If this post has been useful then I'd love you to say
"thank you" by displaying my blog badge in your sidebar
Grab my button
and link to my blog
NB: If you are using Wordpress.com (free, not self-hosted) then you will need to add the code into a "text widget" and place in your sidebar or footer. You cannot use this code in the body of a post.
* the best way to search for a free image on Google Images is to click advance search and use the drop-down menu to search for images "labelled for reuse with modification". You can also use Flickr. Use the search box for your theme, click "advanced search" then tick the three boxes at the bottom that allow you to search within the Creative Commons-licence content, to use the image commercially and to adapt that image. I always find it polite to comment under the chosen image and link to the uploaded, adapted version
** if anyone has any recommendations please let me know in the comments section.