Calamity Anne's Adventures: How To Make A Blog Button With Text Code In Blogger

Have you seen those buttons on blogs where there's some text beneath it.....then you grab that text and enter it onto your blog.....and VOILA.....you've got a button for people to click on to get back to that particular blog? Have you ever wondered how to do that? Well, dear friends, that wait is now officially over! Today I'm going to share with you not only how to make that button with the text code.....BUT.....also how to make a simple button of your very own! Once you get the gist of making a button, then you're free and clear to dive in and make more buttons that you can doody up with gorgeous flourishes and whimsical swirly-ma-jigs! With that said.....clear your cranium.....get your butt all comfy in your seat.....and let's get to work!

How To Make A Button With Text Code In Blogger
adapted by Me

You'll Need

Computer (duh)
Picnik (UPDATE: Picnik is no longer! Try PicMonkey or Creative Kit in Google+)
Photobucket
Creativeness
Patience

The first thing you're going to need to do is make a blog button. I've tried a couple of different ways of making them, and find that the following is the simplest and quickest one.

You need to have a photo or picture in mind for the background of your button before you can start creating. I decided for the button I'm making today, to capture a small part of the background of the blog this button will be going on.....wanted to keep it all matchy-matchy. So here's the background I'm using for the blog button...

Pull up picnik.com.....you can create an account if you want to (it's free), but it's not necessary (though you can't save your work on their site without one). Under the Library tab, click on Edit Photos...

On the screen that pops up, click on Upload Photos...

Here's where you need to upload the photo or picture you chose for your blog button background. Once you find the photo, click on it, and then click on Open...

First thing you'll want to do is resize the photo. Click on the Edit tab, and then click the Resize tab...

Unclick Keep Proportions (you want your photo to be a perfect square). Then change the dimensions to 150 x 150 in the New dimensions tabs. Then click on OK...

Here's where the fun begins! Click on the Create tab...

For my blog button, I just want to add some text.....though you can also add stickers, frames, effects, or whatever you desire to create your one-of-a-kind button!

Click on the Text tab...

You can now start typing in what you want on your button (the norm is your blog name). I prefer to type in one word at a time and work with that word only, which gives me more leeway for arranging everything in such a small space. Once I've got all my words typed in, then I can choose the font, color, and arrangement.

If you're satisfied with your button, then click on Save & Share...

The only thing left to do is click on Save Photo, and you're good to go! Remember what you named your button and where you saved it!

Now it's time to head over to Photobucket.com. If you have an account, then just sign in, if not, then you'll need to create one (it's free). Once you are signed in, click on Upload Now...

Then click on Select photos and videos...

Find the photo of the button you created on Picnik, and click to open. Once the upload is complete, click on Save and continue to my album...

The next step is where you are going to get the necessary code to create the blog button with text code. First thing you need to do is open up a blank Word document, so you have a place to store this code until you need it.

Click on the photo of the button, and you'll be brought to a screen where there are four (4) codes. You're only interested in the Direct Link, so click on the code in that box (which will instantly copy the code for you)...

Now paste that code in your blank Word document. Close Photobucket.

Head on over to your blog, and on the Dashboard, click on Design for the blog that you want this button to be applied to...

Then click on Add a Gadget. My blog is set up for several places to add a gadget.....you just need to select a spot that works for your blog.

Click on HTML/JavaScript...

Where it says Title, you can add whatever you want. I chose Grab My Button.

In the Content box, you will need to add the following code. Just copy and paste...

Now we need to replace some of the information to the above code. Where it says, http://YOUR WEB ADDRESS/, replace that with your blogs' web address (there are two places where you'll enter that information). Then where it says, BLOG TITLE, put in your blogs' name (there are two places where you'll enter that information). Next you'll need to go to your Word document where you saved your Photobucket code.....copy that code, and then pop it in where it says http://IMAGE WEB ADDRESS (there are two places where you'll enter that information). When entering both your web and image addresses.....make sure you only have ONE http:// showing. All words in black will remain as is.

This is what the code should look like.....of course, it'll have your info in it. If everything looks great.....then click on Save.

Once you've saved the code, then click on Preview and you'll get your first chance to view how your button will look like once it's on your blog. If everything is purdy and perfect, then click on Save...

Here's how the button will look when it's on your blog. Notice that you now have the code beneath the button so everyone can grab it and put your button on their blogs!

This is what your button will look like on someone's blog who grabbed your code. When anyone clicks on it, they will be taken right back to where it all began!

Go ahead and click on the button.....you'll be taken to my new shop which I hope to open very soon!!!

I hope I explained this as simply as possible.....but, if there's anything at all that you need clarification on, then please comment below and I'll answer back to you as quickly as possible!

I hope you enjoy your new buttons!!!