After a small, technical accident (where I deleted everything in my blog’s sidebar), I decided it was time to revamp and make a new blog button. That’s the easy part. The hard part came when I wanted a “grab box” underneath it. Like this:
Hours of frustration later, I called in back-up. My computer-knowledgeable brother-in-law (who fixed the problem by the way and made our blog button a “grab box”). But I wanted to know how to do this myself.
So I set off the tackle the task. Not alone, however. There was Google. (Actually, there was a lot of Google, but I won’t keep admitting that.)
After my amazing feats (and successes!) in the blog-button-grab-box-making-crusade, I decided to do a little tutorial myself. Yes, there are a heap of them on Google. But this one is special.
(Did I mention that I’m a visual person? No? Well, now you know.)
To start, we need a blog button first. I’ll do my tutorial through PicMonkey, but there are other programs you can use. (If you’re unfamiliar with PicMonkey — it’s free and you don’t have to sign up.)
Step 1: I find a picture.
This one looks nice. (Compliments of my sister.)
Step 2: Pull up PicMonkey and choose “Edit Photo”.
Step 3: Crop the picture into a square. Then resize it. 125px by 125px is always a good size.
I’m going to put words straight on, but you can fiddle around in PicMonkey if you like and play with effects and overlays.
Mine looks like this. Utterly trendy and fashionable.
And then, playing with overlays and effects, I turned it into this:
Well, I’m not winning any graphic design awards…but that’s not why we’re here! Back to the tutorial!
First you need an image url.
I had a LOT of trouble with the next part. So I’m going to be straight-and-down-the-line. I know you can do this with picasa and flickr…but I’m going with PhotoBucket because it worked for me (and picasa and flickr didn’t).
PhotoBucket is free (and you can log in with facebook or twitter if you want). So, if you haven’t already, make yourself an account and upload your amazing blog button.
All you have to do to get the image url is hover your mouse over the picture.
It should look something like this:
See under the picture where it says “Direct Link”? That’s what you want. Copy and paste that. You’ll need it soon.
Note: You can have a Word document open if you like to keep all your bits and pieces (urls and such) in one spot.
Next you need a html code:
Those bits I’ve highlighted in blue are the ones you’ll be replacing with your own information.
And now put it together!
Fill in the html code.
So where it says “Your Blog Title” — I write “NotebookSisters”
Where it says “Your Blog Url” — I put http://notebooksisters.blogspot.com.au/
Where it says “Your Image Url” — I get the code I took from the PhotoBucket picture (under “Direct Link” remember?) and slap it in there.
Pull up a fresh page in blogger.
See in the left-hand-corner of the fresh blogger page? There are 2 buttons side-by-side and one says “Compose” the other says “HTML”.
Flip the page to the HTML setting.
Whack your filled out HTML blog-button code in there. Flip it back to “Compose” and…
You’re a genius. Hopefully. You’re not if your blog button doesn’t look like this:
(I’m just kidding. If you’ve come this far — reading my tutorial I mean — I think you’re pretty smart.)
If your blog button did work, give yourself a pat on the back. Well done. Amazing job.
If you give this a try, please comment and tell me how it worked out for you. Do I have any technical glitches in my tutorial? Feel free to point them out so I can fix it.
Have a question? (Or did you make a blog button and grab box and I should see it?!) Throw me a comment! (But I can’t promise any wonderful answers because, alas, I am not very HTML literate. I will answer the best I can! Or else Google will.)
Have fun making your blog button and grab box!!