Build A Blog Button For Your Blog

Build A Blog Button For Your Blog

Today is all about buttons!

Tinkerbell With Buttons.

 

 

 

 

 

 

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

How To Build A Blog Button For Your Blog

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:

Create A 200 Pixel Image For Your Blog Button Using Canva.

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:

Design Your Blog Button In Canva Using Free Photos Or Your Own Images.

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

Don't Forget To Add Your Blog Title To Your Blog Button.

  • 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):

Save The Image As A JPG.

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:

Upload Your Image To A Page In Blogger.

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.

Upload Your Image To Your WordPress 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:

Locate Your Blog URL.

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

Paste Your Blog URL Into Notepad.

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.

Find Your Image's URL In Your WordPress Media Library.

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”).

Click Inspect Element To Find Your Image's URL.

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

Click Copy Link Address To Copy The URL Of Your Image.

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

Paste The Image URL Below The Image

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).

Open WordPress Customizer To Add A Widget To Your Blog's Sidebar.

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

Opening A Text Widget In WordPress.

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

<img src=”YOURIMAGEURL” alt=”YOUR-BLOG-NAME-button”/><div style=”width: 200px; height: 200px; overflow: auto; border: 1px solid #666666;”>&lt;a href=&#34;YOURBLOGURL&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;YOURIMAGEURL&#34; alt=&#34;YOUR-BLOG-NAME&#34; width=&#34;125&#34; height=&#34;125&#34; /&gt;&lt;/a&gt;</div>

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

Change YOURIMAGEURL To The Url Of Your Blog Button Image.

  • Change YOURBLOGNAME to the name of your blog.

Change YOURBLOGNAME To The Name Of Your Blog.

  • Change YOURBLOGURL to the url of your blog.

Change YOURBLOGURL To The Url Address Of Your Blog.

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

Click DONE and PUBLISH To Save Your Changes.

  • Your button should look like this:

Finished Blog Button.

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

*Note: When you paste the code into your text widget, it’s highly likely that WordPress will change all the quotation marks into “smart” or “curly” quotes which will break the code.  If your button looks wonky or doesn’t appear in your sidebar, you’ll need to go back and carefully delete all the “curly” quotation marks and replace them with straight ones.  After doing this your button and grab box should show up correctly.

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.

Add Your Blog Button Code To An HTML Gadget In Blogger Sidebar.

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

<div class=”grab-button” style=”width: 200px; margin: 0 auto;”>

<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.

Add Your Blog's Name, Url, And Image Url To The Button Code.

  • Click save and view your blog.

Your button should look like this:

Blog Button For Blogger Blog.

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;”>

Change The Length Of Your Grab Box By Tweaking The Code.

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;”>

Change The Thickness Of Your Grab Button Border.

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;”>

Change The Border Color Of Your Grab Box.

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.

Also, if you’d like to do a button swap, just visit our Blog Resources page and grab my button.  Then leave a comment on this post letting me know and I’ll add yours.

5 Comments

  1. This is an awesome post, Paradise Pink!:) I love how you showed how you make your blog buttons.
    -Quinley

  2. Hey! Awesome post! I use ribbit to make my blog buttons, It’s super easy and I can make them in as little as 5 minutes!

    1. Author

      Thank you! I’ve never heard of ribbit but will certainly check it out. Is it a button generator or a software for creating graphics?

      1. It is just a photo editor but I do blank canvas and add stickers and text then I am done! and some of it is free! but I said SOME.

Comments are closed.