You requested a blog button tutorial, so here it is! (My pleasure, by the way.) I did do this tutorial a while ago, but it needs updating.
This tutorial is supposed to be dead easy for Blogger. I’ll show you how to make a blog button and then how to put a HTML grab box underneath. Feel free to yell if you have any questions!
We’ll be making something like this:
I’m using PicMonkey because a) it’s free, and b) you don’t need tutorials to learn how to use it. Seriously easy.
Find a picture!
Do remember, though, that pictures belong to people. Public domain pictures are best to use for blog buttons. I like clip art, personally, because it’s free domain. Also taking screen shots of your blog header can be helpful too!
This is just some notepaper background image (I actually screenshot it from my blog template).
Make your photo 200×200.
(You can crop it into a square and than shrink it, if your original photo isn’t a square.)
Blog buttons need to be small. You don’t have to have a square either…circles and rectangles are fine. But don’t make it too big! It wants to ideally fit on anyone’s sidebar. 200 is a fair size.
Decorate! What identifies your blog? Do you always use a particular font? Do you use clip art? (We have owls!) Picmonkey has a bunch of overlays too, to peruse.
I’ve made it a circle in the “Frames” section (by rounding the edges to max. and then making the outside transparent).
Good stuff, blogglings! We’re ready for the next step!
I’m using Photobucket. If you don’t have one, I recommend signing up. It’s the easiest way (in my opinion) to get the direct URL you’ll need. (And if you’re like me, you make these blog buttons ALL the time.)
Upload your button to Photobucket. Once it’s uploaded click on it and your screen should look like this:
To the right of this picture you should see “Links to share this photo”. You want the “Direct” link. Copy it.
Open a Word document (or some other text editor, it really doesn’t matter). I’m using TextEdit on my Mac.
Past your Direct Link from photo bucket on here. We’re just keeping it for later!
Now you need this delicious piece of HTML code:
Go ahead and past that on your doc too.
WARNING: Be careful to past it ALL. If you miss a single dot or dash, you’re sunk.
See the words highlighted in blue in that piece of HTML code? All you have to do is add your information into them.
Where it says YOUR BLOG URL: I put in http://paperfury.com/
Where it says YOUR BLOG TITLE: I put in Notebook Sisters
Where it says YOUR IMAGE URL: I put in the Direct Link from the picture in Photobucket.
It wants your blog URL an awful lot. But humour it.
And THAT, blogglings, is it. You’re done!
Pull up a fresh post in Blogger and flip it to the HTML side.
Add your carefully put together HTML code:
Then flip it back to COMPOSE:
And would you look at that?! A fabulous blog button!
Good stuff, blogglings! Cake all round!
Here it is again straight on the page:
Your readers can snag your button by grabbing the code out of that little box. It’s great to have on your sidebar! We keep some of our favourite blogs and their buttons on a page here.
Let me know if this tutorial is successful for you. Or if you get stuck! I’ll be answering comments (well, I always do, but, just so you know.)