Tips and Tricks ------Blog Button Tutorial

I've been learning some new things for my blog over the last few days and just learning some  online tricks in general. So I thought I would share some with you.

The first is making a blog button with code underneath so that fellow bloggers can snatch it to put it on there site, thus gaining you more possible readership.

1. First, you need an image or picture you would like to use as your button. You can either take a picture you have and re size it or make an image from scratch. If you're making one from scratch you will most likely need Photoshop, unless you have another program you use. You can download a free trial of Photoshop at adobe.com.

If your using Photoshop - Open up a new document to be sized 100x100 pixels. This is the best size for a button in my opinion, you can make it any size you like. The simplest thing you can do after opening a new document is just type the name of your shop/blog/website. For example:

You can get as creative as you want by adding a cute background or a picture.

If you're not using Photoshop - Get the picture you would like to be the button and head on over to a photo editing site. A great one is Pixer.us. Upload your picture to the site and re size to about 100x100 pixels. You may have to crop it to make it a perfect square. But like I said, you may choose any size you want if you don't want to use 100x100.

2. Once you have your photo/image complete and sized save it to your computer. Now, off to get your photo a HTML code. Photobucket.com is easy to use and will assign your photo/image a HTML code. Upload your photo/image to photobucket. This is what it will look like:

This is a screen shot of my button on Photobucket. There is your HTML code under your photo/image.

Copy the "HTML Code" and place it inside the code where it says "ENTER PHOTO HTML CODE HERE"
And put the website you would like your button to lead to where it says "ENTER WEBSITE HERE." Make sure you put http:// in front of your website address. My button code for example:


ref="http://elizabethmdesigns.blogspot.com">http://i760.photobucket.com/albums/xx250/ElizabethMDJewelryDesigns/NewAD-1.jpg/>

Cut out my website and photobucket address and place yours in it's place.


Once you have entered your info in the above code you will have your very own HTML code for your button/badge! Exciting uh?

On Blogger- Go to layout - Add a Gadget - HTML/Javascript box - paste your code you have worked so hard at here. This will make your button appear on your blog. Leave the window open.

NOW, you want to make that precious code available to your adoring fans. They will in turn copy and paste it to their blogs to proudly display your button! You must make that HTML code "publish-able".

Go here. Type your HTML code between the tags. Erase what is already there except for the do-dads that look like this < >. Click Encode. There you go, a code you can publish beneath your button.

 Remember that window you left open in blogger? The one you put your button HTML code in? Go back there and paste this code there. Under the the code you put there just a bit ago. You'll have two codes there now. One that will display your button, one that will publish so it can be copied. When you click save and view your blog now you should see your button plus a code beneath that your fans can copy!



I want to thank http://smilemonsters.blogspot.com for this tutorial. Please head on over to there blog and check it out for yourself!

ElizabethMD Jewelry Designs

Contact Me