How to Make a Custom "Grab My Button!" Image & Code For Your Blog! (In-depth instructions!)

Hi there jammers! Panda here!

In this handy tutorial, I'll be teaching you how to create a custom button and code for your blog! I've been making these for awhile as commissions for AJGC, but so many of you have asked how to make them, so I decided to make a tutorial on the very subject! ^.^

In case you're unsure of what a blog button is, it is essentially a little gizmo like this one:

<div align="center">
<a href="http://animaljamgraphiccentral.blogspot.com" title="Animal Jam Graphic Central"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj1JRfr5xAd6HA-SDA43pxHFTu06FsuYHVRFVNBoqtM6d41Pkx9iNMoL0dijkN0yTjlci5ZNyG9pAjplUa8rA6TZVbK7PwL0E0eKwzagldpzIGbSia-iBxWMYsQ4Jmjvxu_83BSz3sZhE/s1600/ajgcbutton300+by+300.png" alt="Animal Jam Graphic Central" style="border:none;" /></a></div>

Viewers of your blog can copy and paste the code given in the box above into their own blogs, and a button will appear on their blog supporting your blog! It's a nice way to spread the word about your site.

Here's a brief overview of what we'll be covering:

• How to create a button
• How to create the code for the button
• How to install the button into a sidebar or page/post

It's all very easy! :D

Shall we get into it?

Alright! There is a video walkthrough of the majority of this tutorial over on my YouTube channel (it's also embedded down below) so if you're more into video content than written content, click the play button on the video below, or click here to watch directly on YouTube.

Now, it's time to move onto making your blog button. You can use whatever editing program you'd like (a brief overview of the various popular editing programs over here), but I typically use Photoshop. PicMonkey definitely works fine, though.

You can check out some of the techniques and take a look at a more in-depth overview regarding how I customize and create my blog buttons, but here are a few general design tips:

• A blog button can be any shape, but if you're unsure of which shape to pick, a circle is the most popular and fairly easy to customize
• Try using a border (like used in the button in the video)
• Make the keywords (like the main word in the title of your blog) larger than the rest of the text on the button
• Try to keep the number of fonts to a minimum--2-3 is usually good
• Use the hex code pairing principles mentioned in this previous tutorial
• If you have any signature blog colors (AJGC's main color is dark green, so I chose to use dark green in AJGC's blog button above) try to use them in your blog button as prominent or at least accent colors

Otherwise, you can go crazy and create a button that totally matches your style! ^.^

Once you have your button ready and made, you'll need to upload your button onto some website where you can grab the URL of the image from. Sites like Photobucket work well for this, but I usually just upload my images onto a random test blog created using Blogger. Essentially, I create a test blog on my Blogger account, make it private, and post my button into a page or post and grab the image URL. Simple!

Once you have your URL, you can go to the site I use to create my actual "Grab My Button!" codes and corresponding code boxes/gadgets. Here is the link to the code generator I use:

>> GRAB MY BUTTON CODE CREATOR THAT I USE <<

It's super user-friendly, and I definitely recommend it!

When you open up the code generator, you'll find a screen with some input fields. Here's a quick key showing you a breakdown of what you need to input into each of the boxes:

Then, once you've filled in all of the above info, you'll need to choose your code box customizations. This part is optional, but it definitely adds some flair to your "Grab My Button!" gadget! 

You can change and customize the text color of the code, the box color, the box border color... practically everything about the widget! 

After you're satisfied with the customizations made to the button, it's time to get your code! How exciting, no? ;)

Anyways... what you'll need to do is press the button that says "Preview" at the bottom of the screen. Then, click on the button that says "Get Code."

Copy and paste the code that you see into an empty Google Doc or Word Document, or some sort of document so that you have it just in case you lose it. 

Then, open up your blog, and decide where you'd like to install your button. Sidebar or in a page/post?

If you choose to install it in your sidebar, simply go to Layout > Add Gadget > HTML/Javascript > Copy code into the box > Save. Done! :D

However, if you choose to install it into a page or post, a different course of action is required. Go to Pages/Posts (whichever place you'd like your gadget to appear) > HTML > Copy code in the spot of the page where you'd like your gadget to appear > Save. The HTML mode of post editing is shown below:

You are probably currently on the "Compose" part of the page editing, but all you have to do to access the HTML part is to click/toggle the button that says "HTML."

Well, I sure hope that this tutorial helped you create your own "Grab My Button!"

Have a lovely day!