5 Steps to Creating a Button for your Blog Hop

Two weeks ago I posted 10 Steps to Successfully Hosting a Blog Hop. In that post I said I would share how you can 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. you are amazing! My new techno go-to person!


  1. […] 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 […]

Speak Your Mind


CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Free Twitter Resource
We respect your privacy.
Free Email Updates
Get the latest content first.
We respect your privacy.

Check out my newest devotional book, Equipped. Ebook is available on Amazon! Dismiss