Build A Blog Button For Your Blog

Today is all about buttons!

No, not that kind of button.  I’m talking about blog buttons.

While they’ve fallen in popularity over the last few years, many bloggers still enjoy displaying special images on their site called blog or grab buttons.

The idea of a blog button is simple.  It’s an image linked to your blog with an HTML code beneath it that other bloggers can copy and paste into their own site.  When a blogger “grabs” your button’s code, your image will be shown in their blogroll, sidebar, or wherever they post their blog buttons.

Why And When To Use A Blog Button:

For a long time, bloggers have used blog buttons to show support for the blogs they followed.  With the rise of social media, though, people have relied less on blog buttons and more on likes.

However, the blog button is not dead yet.  A picture is worth a thousand words and there are still plenty of reasons to have a blog button on your site, some of which are:

• Free advertising–When a blogger posts your button on their site it’s like getting free advertising for your blog.
• To promote a product on your site–have something to sell? Create a button for it and post it in your sidebar!
• Beautify your affiliate ads–Affiliate banners aren’t the prettiest, so why not make them look better by creating your own graphic.
• To promote a link-up or blog party–This is probably the most popular reason to create a blog button.

So today I am going to show you how to build and code a grab button for your blog.

Create An Image For Your Blog Button:

To make a blog button you are going to need a graphic and a grab box.  Let’s start with the graphic.  I will be using Canva to create this button because it’s a great graphic design tool (it’s also free?).

• Open up a blank image that is 200 by 200 pixels wide using the custom dimensions button:

The most common size for a blog button is 125 by 125 pixels wide; however, I like large images so I am going to make mine 200 by 200 pixels wide.

• Start designing!  You can create your graphic using the free photos and illustrations Canva has to offer or upload an image from your computer:

• Don’t forget to add your blog’s title, tagline, or promotional text:

• Once you are happy with your design, download the image to your computer (I recommend saving it as a JPG since JPGs are smaller files than PNGs):

Okay, you’ve got your image.  Now you need to upload it to your server.  The easiest way to do this is to upload the image directly to your blog.

For Blogger users:

• Create a new page on your blog and upload your image:

Don’t click the publish button!  This page is nothing more than a holding place for our image. Just add the image and save the page as a draft.

For WordPress users:

• For a WordPress blog, all you need to do is upload the image to your media library.

Alright, you’ve successfully created a blog button and uploaded it to your website!  But, you still need to create a code for others to “grab”.  We are going to use a bit of HTML to turn our graphic into a clickable “button”.

Create A Grab Code For Your Blog Button:

Before we can turn this graphic into a grabbable button we need to locate a few urls, namely the url of our blog and the url of our blog button.

Your blog’s url is the same as your blog’s address with either http:// or https:// in front.  So, if your blog is www.yourawesomeblog.com then the url is http://www.yourawesomeblog.com.

• To find your blog url, go to your blog and look at the address in the search bar at the top of your browser:

• Copy and paste this into a program like Notepad where you can access it easily later on:

Now we need to get the url of our blog button.

WordPress Users:

• Go to your media library and locate your blog button image.
• When you click the image, a box will pop up on the right side of your screen showing your image’s details.  One of those details is the image’s url.
• Copy and paste the image url into Notepad just like you did for your blog’s url.

Blogger Users:

While Blogger users will follow the exact same steps for finding their blog’s url, finding the image url is a little trickier.

• To find the image url on Blogger, you’ll need to go back to the page where you have the image for your blog button saved.
• Right-click on the image and hit “inspect element” (*Note: I am using Firefox.  Your browser may say something different like “view image properties”).

• Now right-click on the highlighted text.
• Hit Copy Link Address.
• And close the toolbox.

• Finally, right click on your page and hit paste:

That text you see is the url of our image.  Since I am the only one who will see this page, I like to save the image url under the image so the next time I need it I can find it quickly.

Now that we have our urls we can start building the button!

WordPress Users:

•  Go to your site and click the Customize button in the toolbar at the top of your browser.
• Find the Widgets tab and click it.
• Decide where you want your button located and click that tab (for this demo I am choosing my sidebar).

• Click Add A Widget then click Text.
• After opening your Text Widget, switch from the Visual editor to Text editor.

• Now you need to copy and paste the following code into the box:

• Open notepad (or wherever you have your urls copied).
• Change YOURIMAGEURL to the url your blog button image.

• Change YOURBLOGNAME to the name of your blog.

• Change YOURBLOGURL to the url of your blog.

• Click Done then click Publish to make your changes live:

• Your button should look like this:

An image with a snippet of HTML in a box below that other bloggers can copy.

Blogger Users:

• Go to your site.
• Navigate to Layout and click the Add A Gadget button in your sidebar or wherever you want your button published.

• Click HTML/JAVASCRIPT and paste the following code into the box:

<img src=”YOURIMAGEURL” alt=”YOURBLOGNAME” width=”200″ height=”200″ /><div style=”margin: 0; padding: 0; border: 1px solid gray; width: 200px; height: 200px; overflow: scroll;”> &lt;div class=”YOUR-BLOG-NAME-button” style=”width: 200px; margin: 0 auto;”> &lt;a href=”YOURBLOGURL” rel=”nofollow”> &lt;img src=”YOURIMAGEURL” alt=”YOUR-BLOG-NAME” width=”200″ height=”200″ /> &lt;/a> &lt;/div></div></div>

• Open Notepad or wherever you have your urls saved.
• Change YOUR IMAGE URL to the url of your blog button.
• Change YOUR BLOG NAME to the name of your blog.
• Change YOUR BLOG URL to the web address of your blog.

• Click save and view your blog.

Your button should look like this:

You can tweak your grab box even more by styling the width and margins in the code.

Here are a few examples showing what I mean:

<div style=”margin: 0; padding: 0; border: 1px solid gray; width: 200px; height: 200px; overflow: scroll;”>

<div style=”margin: 0; padding: 0; border: 1px solid gray; width: 200px; height: 400px; overflow: scroll;”>

In this example, I changed the height of the grab box from 200px to 400 px.

Here I changed the border around the grab box from 1px to 3px:

<div style=”margin: 0; padding: 0; border: 1px solid gray; width: 200px; height: 200px; overflow: scroll;”>

<div style=”margin: 0; padding: 0; border: 3px solid gray; width: 200px; height: 200px; overflow: scroll;”>

And here I changed the border color from grey to deep maroon:

<div style=”margin: 0; padding: 0; border: 1px solid gray; width: 200px; height: 200px; overflow: scroll;”>

<div style=”margin: 0; padding: 0; border: 1px #7a1f3d; width: 200px; height: 200px; overflow: scroll;”>

A Few Button Building Tips:

1. Make it pretty–because no one wants an ugly button on their site.
2. Make it clear–if viewers can’t read it chances are they won’t click it.
3. Size it right–sidebars are narrow so keep your button at or under 200 pixels wide.

Now that you know how to create a blog button, go make one of your own!  Remember, your button represents your site, so make it enticing.  Tweak people’s curiosity and get them wondering what’s on the other side of that image.