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.
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
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="YOURB 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
