Many people have asked me how to make a blog button. This is the mother of all blog button tutorials (well, at least it felt that way when making it!!). Stick with me.
My 2 Best Blog Button Tips
- Make it interesting.
- Include a very clear call to action.
Instead of including just your logo or blog name, make your blog button something someone will want to click. Make it mean something. Be creative. Intrigue them.
Blog buttons and similar-sized ads are a dime a dozen these days. People like images, but they like images that speak to them and don’t just advertise something.
Make someone curious and wonder what’s behind that button of yours. And make it super clear exactly what they should do next (like, include words like “Click Here”).
In short, make your blog button more than just, “Here’s the name of my site. The end.”
A common size for blog buttons is 125px by 125px.
Once you make a button, you might want others to be able to grab your button and put it on their own site, in which case you’ll need a grab box along with your button. A grab box allows a visitor to copy the code in the grab box and paste it into their own site and your button shows automagically.
In order to do this you need to:
- Create an image 125px by 125px (which will be the button itself).
- Upload your image to your server.
- Create the code others will copy & paste to grab your button.
- Display your button & grab box on your own site (ready to be grabbed by others).
1. Create an image 125px by 125px (2 options)
Blog buttons are typically 125px by 125px square. To create your button, you can use either an existing image as your base, or you can start one from scratch.
I recommend you use Canva to create your button. Canva provides premade templates, but they also have an option to create an image with your own dimensions. Click the link that says “Use custom dimensions” and enter 125 by 125.
Next, design your button. I’m not going to go into the hows of design here. Canva’s Design School has a lot of tutorials you can use to design your own.
In its most simple form, you’ll use the options on the left to upload a photo as your image background or choose a color for the background and then you’ll add text. (Remember my 2 tips above.)
Once your design is done, download it to your computer using the download option in the top right of your screen. You’ll want to publish as an image. It should automatically be downloaded to your computer. Make sure you rename it appropriately. I talked about naming your images here.
Now you’ve got your image.
2. Upload your image to your server
Take note of the location of your image. It doesn’t matter a whole lot where your image is stored, as long as you know where it is. To make it easy, I would install it in my “root” (first level of my blog files).
If you do upload your button image here, the location of your image will look something like this:
3. Create the code others will copy & paste to grab your button
The basic code one will copy and paste to get your button to show up on their site looks like this (you will replace the bold with your own URLs):
The <a href=”…”></a>” portion is your hyperlink and is the page you want someone to land on when they click your button (most likely your home page). Make sure you don’t forget the closing tag (</a>) at the end!
The <img src=”…”> identifies where the image is located so a browser (i.e. Firefox, Safari, Chrome, Internet Explorer…but I know you’re not using Internet Explorer, right??) knows where to find it in order to display it.
So, for example, if I was going to put a button on my site (and I uploaded it to my root directory), my code would look like this (ignore the line break):
<a href=”http://bloggingwithamy.com”></a> (i.e. BloggingWithAmy.com) is where they land when they click on my button, which the computer reads like this: <img src=”http://bloggingwithamy.com/button.jpg” / >
4. Display your button & grab box on your site (ready to be grabbed by others)
Let’s put your button and a grab box in your sidebar for others to grab. You’ll do this by pasting the below code in a text widget.
To get to your widgets from your Dashboard, go to Appearance–>Widgets. Click & drag the “Text” widget into your sidebar (your sidebar options may differ from mine in this photo):
The text widget should automatically pop open for you once you drag it into the sidebar; if it doesn’t click the little down arrow on the right side of it. At this point you’re ready to paste your code (below).
(By the way, if you want a refresher course on placing widgets into your site, check out How to Use WordPress Widgets.)
Here’s the code you will paste into your text widget. It consists of two parts:
- Your image.
- The grab box.
Highlight and copy the entire next paragraph into your text widget. You will obviously replace the bold parts with your own code:
<img src=”YourButtonImageURL” alt=”YourSiteTitle” /><div style=”width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;”><a href="YourSiteURL" target="_blank"><img src="YourButtonImageURL" alt="YourSiteTitle" width="125" height="125" /></a></div>
So, for example, this is what mine would like:
<img src=”http://bloggingwithamy.com/button.jpg” alt=”BloggingWithAmy.com” /><div style=”width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;”><a href="http://bloggingwithamy.com" target="_blank"><img src="http://bloggingwithamy.com/button.jpg" alt="BloggingWithAmy.com" width="125" height="125" /></a></div>
Important Sub-Step: Make all code above HTML-friendly by changing the quotes!
In a nutshell, if you just copy the code above and paste it into a widget, it won’t work. Why? Because there are these things called “smart quotes” which mess everything up. (Feel free to google if you’d like. I’ll spare you the details.)
The bottom line is, it’s a bit of pain, but this is how I recommend making your code HTML-friendly:
- So you copied the above code.
- You pasted it into a text widget (as described at the beginning of Step 4).
- Now, once you’ve pasted it in your widget, very carefully delete every quote (“) and re-type it. There are 6 total. I suggest doing them one at a time and in order. Be sure not to add any spaces or extra characters in the process.
- Save your widget.
- Your image and text box should appear. If not, delete the code, re-copy it and paste it into a text widget and try changing the quotes once again. (It’s easy to make a mistake.) (If it still doesn’t work, it’s probably all my fault. :))
Once it’s in your sidebar, people can simply copy all the code in the grab box, paste it into their site and your button will show up!
Did you like this tutorial? There are a whole lot more of those ’round here! You might also like:
- How Much Do Real Bloggers Actually Make?
- How to Blog for Income
- Earn Online Easily & Legitimately
- How to Make and Install a Favicon
- Make Reading Your Blog Easier: 3 Tips
- How to Write an Ebook: The Guide
- A Simple, Effective Commenting Technique
This post is part of Works for Me Wednesday.