I love how on my sidebar I have a “Meet Lindsay” button. When my readers come to my blog they can click on that and be taken to an “About Me” page to get to know me a little better.
If you have been following my tutorials making one of these buttons is just like you made your blog button. It’s really easy and will bring a lot of design to your blog.
Here is how to make one…
1.) Open Gimp
2.) Click on File and then New
2.) I am going to make my file 250×250 pixels. Your size will depend on how big your sidebars are. Usually your sidebars will be between 150px – 300px wide. If you are using my tutorials your image needs to be 215px by 215px.
3.) Now my screen looks like this
4.) I want to use a picture for my button so I am going to open the file that I want to use. So now I am going to click on File and then Open.
5.) I am now going to scroll around and find the picture that I want to use. I am going to be using an element from a scrapbooking kit and will later add a picture.
6.) Once I find the element that I want to use I am going to click on Open. When I opened my image it went behind my Gimp screen so I had to move that around to find my image (does that makes sense??). Here is what my screen looks like now. Obviously this image is going to be too big to use on my 250x250px file.
7.) It needs to fit into my 250×250 file so I am going to need to resize this. So I am going to click on Image and then Scale Image
8.) I am going to set my width to 250px and the height will automatically adjust. Now I am going to click on Scale and the image will change to its new size.
9.) Now I am going to copy and paste this image into my white button box. So I am going to click on Select and then All.
10.) Now I am going to click on Edit and then Copy
11.) Now I am going to click on the screen with the white box. And then click on Edit and Paste
12.) After I click Paste this is what my screen looks like
13.) Now I want to move this image to the top so I am going to make sure my “move” tool is clicked (if not double click) and move my image.
14.) Now I am going to add a picture to this. I am going to open my picture file like we just did above.
15.) Obviously again this picture is going to be too big so I am going to scale it down. And then copy and paste. When I am done with is what it looks like.
16.) Now I am going to add text to my button. I am going to make sure the “A” on my tool box is double clicked. Then click on where you want your text. A little box is going to pop up. Write whatever you want into that box and it should show up on your button box.
17.) When I am done I have a lot of white space under my text. So I am going to double click on my crop tool and crop my image.
18.) Now my image looks like this. I am ready to save it and put it on my blog
19.) The first thing I need to do is upload this image to photobucket.
20.) I am going to open a new tab and go to my bloggers dashboard.
21.) Now I am going to click on Add a Gadget and select the HTML option.
22.) Now I am going to add my code. In the box that you just opened in blogger copy and paste the code below
<a href="http://twomenandamommy.com"><img src="http://i739.photobucket.com/albums/xx33/lindsayintx/ScreenShot2012-05-08at32239PM.png" /></a>
23.) You will need to change “http://www.twomenandamommy.com” with your coding. This will probably be an about me page. Just find the URL and copy and paste that code in here. For instance when I click on the “About Me” tab in my nav bar this would be my URL….
24.) You will also need to change http://i739.photobucket.com/albums/xx33/lindsayintx/blogrollnavbar-1.jpg to the direct link code you get from your photo bucket image. Once your image is uploaded click on it and you should come to a screen like this. This is your direct link code and the code you need to use here.
25.) So this is what my code will look like
<a href="http://twomenandamommy.com"><img src="http://i739.photobucket.com/albums/xx33/lindsayintx/ScreenShot2012-05-08at32239PM.png" /></a>
26.) I am going to copy and paste that into the HTML code in my blogger gadget. Save and now my blog looks like this
27.) Now when people visit this blog they can click on that button and be taken to my “About Me” page. It’s a great way to add to the design of your blog and also let your readers get to know you better. You can do all sorts of things too with this type of button. You can make buttons for your favorite books, sites, or upcoming events.
I hope you enjoyed this tutorials. And remember that you can always email me at lindsayintx@gmail.com if you have any questions.
