Blogger Blog Badge Tutorial with Grab My Badge Box

Say that 3 times fast!  I couldn’t think of an easier way to say “how to make a cute blog badge with a “grab my badge and add to your blog” box.

I’ve wanted to add a blog badge to the shop for sometime, but time, time, TIME, is always a factor. Just yesterday a friend asked how to do it and so I thought I would share what I told her with you! These instructions are for a Blogger blog.

DESIGNING YOUR BLOG BADGE

I use Photoshop Elements, but I know there are bunches of free services out in web world that you can use. You can also try Photoshop Elements for free here: 

In Photoshop Elements:

Select the “File” Drop Down Menu

Select “new”

 Select “blank file”

I normally design everything at 12x12 inches out of habit.

Select 300 pixels/inch

Select Transparent Background

Using a photo or image of your choice design your badge.

There are a number of sites like the Graphics Fairy HERE: where you can get neat images for free.

Be sure to have the name of your blog/shop/site on your badge.

  Resize your image to 125x125 pixels by doing the following:

Select the “Image” Drop Down Menu

Select “Resize”

Select “Canvas Size”

Change the drop down options next to width and height to “pixels”

Enter “125” in both width and height

Save your image as a png file.

Uploading your image to an Image Hosting Site

I use Photobucket which can be found here: 

It is free and easy to use. It has lots of options for altering your images if you don’t have a photo editing software.

After opening an account you will need to:

Select “upload” from the top bar menu

Select “select photos and videos” Find your saved badge and upload it to the site.

Once your image is uploaded to an album you should be able to hover your cursor over it to reveal a menu which contains a bunch of information

 Left click the mouse in the “direct link” box and it will automatically copy the code. You need this code to get your blog badge to appear.

I find that at this point opening a typepad or Microsoft word document is SUPER Helpful.

BUILDING YOUR CODE

 Paste the image url from the previous step in the word document

Copy the code below and paste it into a word document (be sure to leave space from the code you just copied and pasted from Photobucket so you don’t get confused)

[center][img

src="YOURIMAGEURLHERE"/][br/][br/][textarea style="width: 129px; height: 129px; overflow: scroll;"][div style=”width: 125px; height: 125px; overflow: auto; border: 1px solid #666666;”]<a href=&#34YOURB LOGNAMEHERE/" target="_self"><img src=" YOURIMAGEURLHERE" alt="YOURBLOGNAMEHERE" width="125" height="125" /></a>[/div]][/textarea][/center]

YOURIMAGEURLHERE = the code you copied from Photobucket

YOURBLOGNAMEHERE = the URL of the site you want people to go to when they click your blog image

TWO VERY IMPORTANT NOTES:

Everywhere you see [ or ] you must correct the code to read < or > with the correct orientation. I can't write the code that way on the blog because blogger reads it as a badge and shows the image of the badge not the code.

You must copy the code EXACTLY down to the punctuation and spacing. If your badge does not look right, you most likely have a coding error.

ADDING THE CODE TO YOUR BLOG

1.    Sign into your blogger blog

2.    Select “Layout”

3.    Select “Add a Gadget”

4.    Select the “HTML/JAVA Script” gadget by selecting the blue plus sign

5.    Copy the entire code you have created and paste it in the “content” box

6.    You do not have to choose a title, but you can if you like

7.    Click “Save”

8.    Click “Preview” in the Layout menu to see how your fantastic blog badge with grab me box works.

Now anyone who wants to add your badge to their blog can do so by adding a gadget just like you did and entering the code found in your grab box to the content section and saving.

 Some of you may say “this is for the birds” and it is true that one mistyped key stroke and you may have to edit the code all over, but I find a little frustration is better than paying someone to do something for me. And I love the sense of accomplishment that comes from doing something for myself.

Hope this helped someone and feel free to post the Curtsey Boutique Badge on your blog J

CarrieAnne