How To Make A Blog Badge 1


Julie's Notebook - How To

Firstly find or make yourself a “badge” – Badges can be various sizes. Sadly there doesn’t seem to be a standard size, but think about what works nicely in your blogs sidebar. Might I suggest 125 x 125 pixels, or 200 x 150 pixels. If it is too big other blogs might not want to use it.

Find an image that suits your blog, think about the colours and style. If you blog is all in pastels you don’t want a dark image really, you want it to remind readers about your site. If your blog is about baking use a cake photo rather than a photo of yourself or your pet! Also if you use a certain image as you blog header already, edit this to the required size to use something familiar to your readers as your badge. My example below is a photo of my own notebook, cropped to 200 x 150. Although my blog is pale with blue touches, I love this photo and as many blogs I follow use pastels this might get used by my fellow bloggers. I have more badges in different sizes here on my blogroll page.

If you have no photo or existing logo/banner you want to use, make an image online or in Photoshop or other image software. If you’ve never made a logo I recommend a visit to FlamingText and click “create a logo” and just have a play. Use your blog name for example “my blog” rather than “http://www.myblog.co.uk” as you don’t need the linking bits as the HTML of the badge code will point it at the URL you chose anyway. Less letters is easier to read and looks better. Again go with your existing theme or blog style as much as you can.

Here are three examples of images that you can make on flaming text. The great bit is rather than editing an image to size, you type in the size you want each time. So just do the same image in a few different sizes by saving one size then going back and just change the sizing, not the colour or font, really easy. If your blog has a name but no header image or “banner”, make this at the same time so it matches.

groovy

Bold and bright

plasma

Colourful but pale background

tiger

This is rather a bad example, don’t do this

Just type in a few words on the “text” tab, and go to the “image” tab to select the image size. Do not worry about the other tabs much, then when you are happy click on “create logo” to complete your image, and save it to your computer.

FThow

Change the “text” and alter the image sizes in “image”. Save it firstly as a badge size then as a big blog header/banner.

A lot of new bloggers worry about html and writing it themselves, but you do not need to write it yourself.

Next you just need to upload it somewhere, as my blog is self hosted, I’ve literally stuck them in a post and then gone back to check the image URLs and used them. Good free places are ImageShack, PhotoBucket, or DropBox.

Neat little gadget

I like this “grab my button” code generator page. You just need an URL for the button you choose above, and the address you want to link the button to. Then press “preview” and then click on “get code” if the image looked right.

 

Then you just copy and paste this and stick it in your blog sidebar. For WordPress users, you want a new widget, select “text/html” and copy it all in and save, adding a title if you wish, perhaps “link to my blog”. For Blogger/BlogSpot blogs go in to your dashboard design area and chose “layout” and then click “add a gadget” in the sidebar or footer. Clicking on “add gadget” will bring up a small pop up, scroll down slightly and select “html/Java” and as for WordPress copy the code in to the bigger box, adding a title if you wish.

This is what you should now see… something like this.

Julie's Notebook

You’re done! Save your page and feel pleased with yourself.


Leave a comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CommentLuv badge

One thought on “How To Make A Blog Badge