blog buttons: a tutorial
I've gotten several requests lately on how to make a blog button. Because I think it's something every blogger should know and because I love ya, here's a tutorial on how to make your own blog button with a grab box. It's really very easy - honestly, the hardest part for me is coming up with the design ;)
To design my button, I used Picnik, but you can use any software that lets you resize and add text.
Upload your photo to Picnik. Make sure it's something very simple that lets you read the text easily. You could always use just a plain solid color background as well.
Once your photo is finished uploading, select the crop button.
Select the square crop. You could leave it rectangular (or whatever shape you photo is in), but I think having a square button just looks cleaner. Go ahead and drag the cropping box to as large as it'll let you.
When you're finished cropping, go to the "create" tab...
...then click on the text button.
Now is when you add your text. If it's a button for your blog, it would make sense to write the name of your blog :) I just wrote "I love pumpkin bread", since this is just a sample button.
You can play with the fonts - there are plenty of options. Just make sure you don't put too much text on the button, since we're going to be resizing it to a much smaller size.
After this step, I like to round the edges of my buttons (which you can do under the frames tab), but you don't have to.
When you're all done fixing your button to your liking, hit the "save & share" tab. Under dimensions, we're going to resize the button. I chose 160px, as it fits in my sidebar quite nicely, but feel free to use a bigger size. I wouldn't recommend going above 200px, though.
After resizing, go ahead and hit the "save photo" button and select your desired destination for the button.
Now for all the HTML junk... ;)
Upload your button to an image hosting site such as Imgur, Photobucket, or Flickr.
Whatever you use, make sure you copy the direct link - if you don't, your button won't work.
<center><a href="PasteBlogURLHere"><img src="PasteDirectLinkForPhotoHere" /></a><textarea><a href="PasteBlogURLHere"><img src="PasteDirectLinkForPhotoHere" /></a></textarea></center>
Paste in the direct link and your blog URL (which you must copy directly from the address bar -- if you type it in, it won't work) in the spaces I specified.
Go to Blogger > design > page elements and select "add a gadget". Select the HTML/JavaScript gadget, paste in your code.
(Don't be like me and make your font way too small...hehe. Oh well, it's just a sample button.)
Congratulations! You've just successfully made your very own blog button - that wasn't so bad, was it? :) If you have any questions, don't hesitate to ask, whether via the comments or email!
-carlotta
To design my button, I used Picnik, but you can use any software that lets you resize and add text.
Upload your photo to Picnik. Make sure it's something very simple that lets you read the text easily. You could always use just a plain solid color background as well.
Once your photo is finished uploading, select the crop button.
Select the square crop. You could leave it rectangular (or whatever shape you photo is in), but I think having a square button just looks cleaner. Go ahead and drag the cropping box to as large as it'll let you.
When you're finished cropping, go to the "create" tab...
...then click on the text button.
Now is when you add your text. If it's a button for your blog, it would make sense to write the name of your blog :) I just wrote "I love pumpkin bread", since this is just a sample button.
You can play with the fonts - there are plenty of options. Just make sure you don't put too much text on the button, since we're going to be resizing it to a much smaller size.
After this step, I like to round the edges of my buttons (which you can do under the frames tab), but you don't have to.
When you're all done fixing your button to your liking, hit the "save & share" tab. Under dimensions, we're going to resize the button. I chose 160px, as it fits in my sidebar quite nicely, but feel free to use a bigger size. I wouldn't recommend going above 200px, though.
After resizing, go ahead and hit the "save photo" button and select your desired destination for the button.
Now for all the HTML junk... ;)
Upload your button to an image hosting site such as Imgur, Photobucket, or Flickr.
Whatever you use, make sure you copy the direct link - if you don't, your button won't work.
<center><a href="PasteBlogURLHere"><img src="PasteDirectLinkForPhotoHere" /></a><textarea><a href="PasteBlogURLHere"><img src="PasteDirectLinkForPhotoHere" /></a></textarea></center>
Paste in the direct link and your blog URL (which you must copy directly from the address bar -- if you type it in, it won't work) in the spaces I specified.
Go to Blogger > design > page elements and select "add a gadget". Select the HTML/JavaScript gadget, paste in your code.