Back to Blog School: How to Make a Simple Blog Badge or Button

1

How to make a simple blog badge or button

Throughout September we’re going back to school with a series of tutorial posts about all things blogging.

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 Blog Badge

  • 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 2 Blog Badge

  • 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 3 - Blog Badge

  • 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 4 Blog Badge

  • 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:

http://www.myblog.com/wp-content/uploads/12/01/12/mypicture-jpg

On Photobucket the URL might look like this:

http://i894.photobucket.com/albums/tots100/my-picture.jpg

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.

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!

Back to Blog School

Every day of the week, Good Reads brings you the best and brightest content from Tots100, the UK parent blog network. Our community of more than 7,500 parent bloggers have a combined monthly audience of more than 10m readers, writing about everything from parenting to politics, food and fashion.

Discussion1 Comment

So You Know...

As you've likely heard and seen, there's an increasing focus on the authenticity of follower growth and engagement on social platforms across the Influencer Marketing community. The platforms themselves have taken measures to deter inauthentic activity and brands now more closely scrutinise the audiences of the influencers with whom they are partnering.

The Flea Network has implemented a system that will detect abnormal spikes in following and engagement, and flag these properties. Of course, such spikes can often be attributed to viral posts or high-profile brands that bring greater exposure to some content.

If one of your social accounts is flagged by our system without an obvious reason, we may reach out to you for assistance in understanding it. If we find any influencer has artificially inflated their audience size or engagement using paid acquisition or automated, third-party tools, we will remove them permanently from our influencer community.

Feel free to reach out to us at bloggers@fleaenterprises.com with any questions or comments.

Thank you!

The Flea Network Team

Got it!