5 Steps to Creating a Button for your Blog Hop

Social Media 300x300

A few weeks ago I said I would teach you how to create a button for your blog hop.

  1. Create a graphic: I used The Logo Creator software to create mine, but you can use any software which allows you to specify the size of your graphic using pixels. After experimenting a bit, I figured out 150 x 125 pixels is a good size for most sidebars. Remember that your button is going to be fairly small in the scheme of the whole website layout, so you need to keep text to a minimum. Here’s what my graphic looks like: Button for blog hopNOTE: I also created a larger version of the same graphic (500 x 250 pixels) to use as a picture in my blog posts.
  2. Upload your graphic: In order for others to use your button, you’ll need to upload your graphic to a location where it’s accessible. I uploaded mine into my media file on my website.
  3. Create your button code: I figured the code out by reverse engineering (looking at the code for other buttons I posted on my blog). Here’s the code for my button: <a href=”http://new.inlinkz.com/luwpview.php?id=358604″ target=”_blank”><img src=”http://ruthlsnyder.files.wordpress.com/2014/01/blog-hop-for-writers-sm1.jpg” border=”0″ /></a>. In order to create your code, you will need the link to the blog hop (or whatever else you are wanting people to go to) and the location of your graphic. (I discussed using InLinkz on my previous post.) Here’s the code for a different button: <a href=”http://proverbs31.org/online-bible-studies/category/obs-blog-hop/” target=”_blank”><img src=”http://proverbs31.org/images/OBSBlogHop.png” border=”0″ alt=”P31 OBS Blog Hop” /></a> You will note the link comes first, included in quotation marks; in the middle there’s a command to create a blank space to insert the graphic; and then the image location is also included inside quotation marks.
  4. Add your button to your sidebar. The way you do this may differ, depending on which software you’re using for your blog or website. Here are the steps I follow on WordPress: A. Copy the code so you can paste it. B. Open the dashboard. C. Click on “Appearance”. D. Selected “Widgets” E. Find the “Text” widget and drag it up to the right side where your other widgets are located. F. Click in the “title” box and add a title for your widget. (I called mine Writers’ Blog Hop). G. Click in the next box down and paste your button code. H. Click “Save” I. Go to your site and make sure the button is visible, and also placed where you want it. (You can change the order of the widgets by clicking on a box and dragging it to where you want it back in your appearance menu.) J. Once your button is where you want it, go to your site and make sure it takes you where you want to go when you click on it.
  5. Share your button with participants. Once you’re sure your button is working properly, share it with people who are participating in your blog hop. You can do this via e-mail, Facebook, or any other way you’ve set up to communicate with your participants.

There you have it. Happy button creating 🙂


  1. Tracy Krauss on February 2, 2014 at 10:09 pm

    you are amazing! My new techno go-to person!

    • Ruth L. Snyder on February 2, 2014 at 10:16 pm

      Tracy, you make me laugh. I do enjoy learning 🙂

  2. […] the past few months. If you want some tips, check out my previous posts on hosting a blog hop and creating a button for your blog hop. You can also use a blog hop to run contests or have people enter for a free copy of your […]

Leave a Comment


Subscribe to "The Map" The Ultimate Writers Magazine