Today, I will show you how I made the buttons we have here in our blog. These buttons have a direct link to each site (blog, shop, facebook page, etc.)
This tutorial is the third of the Sprucing up your blog series. You can check the first part here and the second part here.
Disclaimer: I am no expert and all the things I will be sharing with you here is based on my own experience. My methods are easy-to-follow but not professional methods. So, follow at your own risk (just kidding!). Nah... really! ^^) I am sharing because it worked for me. And I hope it works for you, too!
For this tutorial, you can click each photo below for a larger view.
You can use a digital scrapbook paper or embellishment or a picture as background for your button. You can see a sample of each below.
Now, on to the tutorial:
Choose an image to use as background. You can edit it using Picasa as shown here. But today I will show you how to edit it using Photobucket.
Upload your image. Save your image.
Open the album in your Photobucket where you have saved your chosen image and edit it by clicking the upper tab which says Basic.
If your image is not yet cropped, do crop it. Then change your image size to your desired size. I made mine a 125 x 125-sized button.
Now, click the Decorate tab. Click the Text button and add your text. Choose the font you like, check transparent and glittery if you want a glitter text. Click auto or unclick auto if you want to choose manually your font size. Then type your desired text on the small box which says Enter Text Here.
When you are already happy with your button, save it. For this button, I added two text boxes for the differently-sized texts.
Now, go to your blogger account. Click Design, Add a Gadget, then HTML. Then copy and paste this html code:
Substitute the necessary links. In my case, I am linking this button to TSWL, the shop. Go back to your Photobucket and copy the url which says Direct link.
Now, your html code will look something like this:
Save your html and place it where you want it on your blog.
My button looked like this on the blog:
However, if you want for others to be able to grab your button, then follow the next steps.
Click the button which says Click special characters to entities:
Copy the code and paste it on an HTML gadget box on your blog or if you want on one of your blog pages. When doing it on a blog page, switch to edit html while pasting your codes, you can switch to compose before publishing so you can admire and check your buttons ^^)
So you'll have a "grab button" like this:
Or a page full of "grab buttons".
And, that's it! ^^)
Easy-peasy, right? **)
This post is brought to you by
![[Valid RSS]](http://i985.photobucket.com/albums/ae336/lelaniedenso/valid-rss-rogers-1.png "Validate my RSS feed")
