Skip to main content

How To Make A Blog Badge (with grab code)

Geekalicious - Think Geek - How To


example
There is a great trend at the moment for sharing the blog love by displaying a button to show your affiliation.  The usual places for these are in the sidebar of your blog or on a separate Affiliate page.

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
Upload your image to an online storage website (or your own hosting area).  If you have one with facilities to edit your image this will make it easier for novices (like me).  I use Photobucket but there are other similar storage and editing websites out there**

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

 Geekalicious
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.


Labels:

Popular posts from this blog

26 Bands From The 80's : Where Are They Now?

The other day, whilst out with my husband , I was listening to some UB40 in the car and wondered what they were up to now.  Then I saw this post from Buzzfeed and realised I totally needed to steal that idea.   BUT the problem with doing a "Where Are They Now" of the 80s is that they are either dead, accountants (dead accountants?) or in their mid 50's and, having realised they have snorted their pension up their nose, are dragging themselves onto the Reunion Tour concert circuit. So here are my chosen few that form my A-Z of 80's 'Where Are They Now?'   Do you fancy adding any of your own? Art Of Noise.   Last seen looking for Peter Gunn and desperately hoping that Tom Jones tells a "I know A rt Of Noise" story about them on The Voice. Billy Idol.   Currently setting off airport alarms all over the world after having a steel rod inserted into his leg following a motorbike accident in 1990.  Practicing Rebel Yell on Guitar Her...
Keep Reading »

[REVIEW] Canvas print from PrinterPix

Whilst dabbling in a bit of (very) amateur photography I occasionally have a favourite photo printed onto canvas.  It's usually a scenery picture and used to brighten up the walls in the lounge or at a focal point on the stairs.  Most recently I have had two images put through the process by PrinterPix . I sent off an image of my son after his Territorial Army passing out parade in April (proud parent moment) and one of our dog on the beach from a few months ago.  They were returned within a few days and looked even better than I had imagined. Soldier Boy is on a canvas that is 16" x 20" on a standard thickness (2cm) frame.  Michi is on a 12" x 16" canvas which is stretched onto a thickeer (4cm) frame.  Both have been printed using a gloss finish.   All canvases from PrinterPix are hand-stretched, use fade-resistant ink and tension wedges are fitted into the corners of each frame to aid stability. What do you think?  I'm in l...
Keep Reading »

7 Things To Do In Roda, Corfu

This year, our summer holiday took us to Corfu. We were staying in Roda on the north coast of the island and had a wonderful time. It's a beautiful Greek fishing village and has the most chilled and welcoming atmosphere I've ever experienced.  I'd love to share my recommended seven things to do if you visit Roda. Sunset over Roda harbour Swimming With The Fishes The coastline at Roda is completely flat so you can walk out quite a distance and still only be in shallow water.  The beach in the village is very sandy but becomes rocky as you move out of town towards some of the beach front hotels (twenty paces out to sea, it becomes sandy again). The water is generally very calm, beautifully warm and clear enough to see the occasional fish swimming by.   Chill out at the Boathouse As we walked down from our hotel, The Boathouse was one of the first bars we stopped at before continuing into Roda. It is perfectly placed between the rural coastal road that l...
Keep Reading »