Have you ever wanted to make a blog button with grab code but you weren't sure how? Today I will teach you.
Here's what you will need:
1. Photo editing software (Gimp, Photoshop, etc.)
2. Images for button
3. Image hoster (Photobucket, etc.)
Lets start off by opening your photo editing software. I am going to use GIMP because its FREE and easy to use. If you don't have a photo editing software you can download GIMP here.
After you have gimp open you are going to go to File>New and you will see this box come up. We are going to change the width and height to 125x125 because it is the standard size of a button. Afterward you are going to change Fill With to Transparency. Click Ok. Now you should have a blank 125x125 box on your screen. Go ahead and open everything you want to put on your button. To do this go to File>Open and find your images. I am going to add a background, image and text.
Once you choose your image, try and decide which one you want for your background. Once you do this, we are going to have to scale it to size (125x125). You can do this by going to Image>Scale Image>. Once you do that you will see a box pop up. In that box you will change width and height to 125 and hit Scale. Now your image should be 125x125. We now need to copy and paste the image onto our blank canvas. To do this you will hit Shift>Ctrl>V at the same time. You should now see your background image over your blank canvas.
Obviously with such a dark background I can't stop here, but if you have a light background you can. I am going to layer another image on top of this one. I already had my image opened so I just scaled it by going to Image>Scale Image and changing width and height of my second image to 110x110. I want my first background to show just around the edges, kind of like a frame. If you decide to do this step you can change the width and height to whatever you want depending on how much of the first image you want to show. Here is my new image after copy and pasting my second image onto my first.
After we have our background we are going to add graphics or elements to pretty it up. I am going to use the image inside my header and scale it to size to fit inside my button. I started off by scaling the piece of my header image to 100 in width and the final product ended up being only 60 in width. In GIMP you can change the width or the height and it will change the opposite accordingly. So when I say I adjusted the width of my image to 100 it will adjust the height to make the image proportionate. This will always happen unless you click on the chain icon to the right of the width and height boxes to break the chain. If you break the chain you can make the image be whatever size you want proportionate or not.
Here is my button so far. I scaled my image to this size because I have to have room for my blog title. Next we are going to get started with adding text.
To start adding text you will have to click on the A that you see in the toolbox on the right hand side of GIMP screen. Once you click the A you will see the bottom of the toolbox change. You should now see a place to change font type, font size, font color, alignment, and spacing. For your button lets start off by changing the font type, size, and color. Now lets start adding our text.
After you add you text and adjusting it accordingly you should see your final product. Now you need to save it by going to File>Save As. Now enter the name of your button. I named mine IYTSButton.jpg. Now hit Save.
After you hit save you will see this box come up. Hit Export. A new box will pop up and make sure Quality is set at 100% and hit Save. Now your image is saved and we can upload it to your image hosting. I am going to use Photobucket. I think most people are fimailar with Photobucket so we won't use pictures but I will give you a step by step on how to do this. Log in to your image hosting software and upload your photo. Afterward you will see your image on photobucket. Click on it and you should now see your image with a box full of codes next to it. You will need a code to post the button on your website.
To do this go to your blogger dashboard and click on Design. Afterward, click on Add a Gadget. Now choose HTML/Javascript from the Add a Gadget window. Next, copy and past this code:
