Today’s post comes from our creatively brilliant contributor Katie from Mummy Daddy Me. Katie’s blog is a treasure of prettiness and stunning photography, so she’s the perfect person to share how to make a simple blog badge or button to brighten up your blog and give your blog fans something to display on their own site.
Why have a blog badge or button?
One huge part of blogging is being part of a community and supporting other bloggers. A blog badge in your sidebar is a really good way of embracing that community, giving other bloggers something they can use and display on their own blog roll or “blogs they love” page. It is really simple to make a blog badge or button on any one of the free editing packages like Picmonkey or Picasa.
Where and how to make your button
It doesn’t need to be particularly advanced, you just need something that shows what your blog is about and of course the name. You can be as creative or as simple as you want. A photo badge always works well and can make a visual impact too. In this tutorial I am going to be using Picmonkey.
- STEP 1:
Open up PicMonkey and upload the photo you want to use.
- STEP 2:
The first thing you need to do is crop your image so it resembles something of a square. For this you use the crop tool in the basic edits section on Picmonkey. Don’t worry about resizing properly as you can do this later. Just click on crop and then drag the free box around until it resembles a square – it doesn’t have to be exact, but get as near to a square shape as you can.
- STEP 3:
Then it’s time to add the text. Just click the fourth icon down on the left-hand menu which resembles a ‘P’. Here you are greeted with lots of different fonts. Have a play around with it and add your text on. You can also change the colour and size of the font.
- STEP 4:
Finally, the last thing to do is resize your photo. Go on to the first icon – basic edits – and right down at the bottom there is the resize tab. It is up to you to decide what size you want your badge to be, but around 200 x 200 is a good size for most blog sidebars. If your photo isn’t exactly a square just make sure you un-tick ‘keep proportions.’
- STEP 5:
Save your image and there you have it, your new blog badge is ready! This is just a really simple way of creating a badge but do have a play around because you will be able to make some really nice ones that perfectly reflect what your blog is all about.
Uploading your image to the internet
You can upload the image to your own blog as a picture but if your blog is self-hosted, I would recommend uploading to a free photo hosting website like Photobucket to avoid any nasty bills for dedicated hosting!
Putting an image on Photobucket also means you can change your blog address in future without breaking the badges.
Wherever you upload your image, you will see that it has a URL associated with it. In WordPress this might look something like this:
On Photobucket the URL might look like this:
Copy and paste this URL – known as the image source – into an email or Notepad (not MS Word) on your computer. You’ll need it later.
creating the html code for your badge
With these two pieces of information – the image source, and the destination URL – we can create the basic HTML code for a blog badge.
<a href = “http://www.myblog.com” target=”_blank”><img src=”http://www.myblog.com/wp-content/uploads/12/01/12/mypicture-jpg” border=”0″ alt=”KEYWORD”></a>
To make your blog badge, copy and paste the code above, making the following changes:
- Replace the first URL with the URL you’d like your blog badge to click through to, such as your blog’s home page.
- Replace the second URL with the image URL that you created when you uploaded your image.
- Replace the word KEYWORD with a word that describes your badge – this is useful for people with sight problems, but also helps tell search engines what your blog is all about.
All done! You now have code for a blog badge that you can add to your own site, or another person’s site.
(If you’re after a REALLY quick and easy way to do this bit, check out MyCoolRealm, which writes the code for you)
sharing your badge with other people
You can easily email people the code for your badge, but what if you want to display it on your site for them to copy and paste? This can be tricky but the best approach is to create a code box that displays the code for people to ‘grab’ the code from your site.
Here’s how to make a simple box for displaying HTML code on your blog:
<textarea name=”textarea” cols=”40″ rows=”4″ wrap=”VIRTUAL”>insert code</textarea>
Replace the part of this that says “insert code” with the badge code you’ve just created. You can play around with the rows and columns to adjust the size of your box to something you’re happy with.
And that’s it. It looks a lot more complicated than it actually is, I promise!