How to Make a Blog Badge or Linky Badge – with and without text.

Communicate 4I get quite a few newer bloggers approach me to ask how to make a blog badge or linky badge. I have saved my badge instructions in my word document but I think it would be far easier if I shared it here for people to find and use it to their advantage. Like anything, it really is easy when you know how!

Firstly, before you do anything else, you need to be a member of Photobucket. You can sign up for a free account at http://www.photobucket.com. This is where you need to upload your image to in order to get the necessary code.  Once uploaded, you will need to resize the picture. Generally around 150 x 150 should do it – although some people prefer to display smaller badges.

For a Badge displaying text underneath.

If you would like a badge like this:

Mini Creations
<div align="center"><a href="http://www.kidglloves.com/mini-creations-linky" title="Mini Creations"><img src=" http://i1322.photobucket.com/albums/u568/ToriWel/ef7d160c-a604-4e72-8583-44faa168849b_zps059b161d.jpg" alt="Mini Creations" style="border:none;" /></a></div>

which means people can copy and paste the code underneath, then follow these instructions:

<div style=”padding: 5px;” align=”center”><img title=”Verily Victoria Vocalises” src=” http://i1322.photobucket.com/albums/u568/ToriWel/f4b98fc8-dec9-4971-b030-4d0d94d0b9ea_zps4e0b983c.jpg” alt=”Verily Victoria Vocalises” /></div>

<pre style=”background: #f0f0f0; border: solid 1px #cccccc; color: #777777; font-size: 90%; height: 50px; margin: auto; text-align: left; padding: 10px; display: block; overflow: auto; white-space: pre-wrap; width: 90%;”>&lt;div align=”center”&gt;&lt;a href=”http://www.vevivos.com” title=”Verily Victoria Vocalises“&gt;&lt;img src=” http://i1322.photobucket.com/albums/u568/ToriWel/f4b98fc8-dec9-4971-b030-4d0d94d0b9ea_zps4e0b983c.jpg” alt=”Verily Victoria Vocalises” style=”border:none;” /&gt;&lt;/a&gt;&lt;/div&gt;</pre>

Simply copy and paste the above code and tailor it to your needs using the instructions below:

  • The areas highlighted in pink – this is the name of what you are doing the post for – e.g. the name of your blog or name of your linky
  • The areas highlighted in blue – the image’s Direct link (second option down in the links to use section) from Photobucket
  • The area hightlighted in green – the URL of the page you want people to go to if they click on the badge

 

For a plain Badge without text

Mini Creations

 

For a plain badge with no text then follow these instructions:

<div align=”center”><a href=”http://www.kidglloves.com/mini-creations-linky” title=”Mini Creations“><img src=” http://i1322.photobucket.com/albums/u568/ToriWel/ef7d160c-a604-4e72-8583-44faa168849b_zps059b161d.jpg” alt=”Mini Creations” style=”border:none;” /></a>

Simply copy and paste the above code and tailor it to your needs using the instructions below:

  • The areas highlighted in pink – this is the name of what you are doing the post for – e.g. the name of your blog or name of your linky
  • The areas highlighted in blue – the image’s Direct link (second option down in the links to use section) from Photobucket
  • The area hightlighted in green – the URL of the page you want people to go to if they click on the badge

PLEASE NOTE THAT I USE THE ABOVE ON A WORDPRESS BLOG AND AM NOT SURE HOW IT WOULD WORK ON OTHER PLATFORMS.

If you have any questions then feel free to comment below. Hope this helps 🙂 xx

Digiprove sealCopyright protected by Digiprove © 2014 Victoria Welton

Follow:
If you enjoyed this post, please share:

5 Comments

  1. January 8, 2015 / 1:48 pm

    Hi,

    Found this post really helpful but need more help!

    I have created the code but can’t seem to work out how to then insert this and my badge into a post. Can you advise.

    Thanks 🙂

  2. Pingback: How to Make a Blog Badge or Linky Badge – with and without text.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge