A-Z Blogging Challenge 2012 Navigation Buttons

A-Z Challenge Navigation Buttons

The A-Z navigation buttons are back in 2012. A little late to the party, but with extra goodness: Snazzy colours, a “Loading buttons…” animation, and a counter so you know how many sites you’ve visited.

It’s difficult to navigate a list of nearly 2000 sites. So I created a widget with two simple buttons letting you easily navigate the long list of sites.

The “Next” button let’s you move along sequentially, starting at site 1, then 2, 3, etc. The “Surprise Me!” button (aka “Scotty”) will beam you to a random blog. I encourage using the “Surprise Me!” button because it is much fairer to all participants. Every site gets an equal chance at being visited!

Benefits of using the buttons

  • Quickly navigate the challenge without scrolling up and down a long page
  • It’s less daunting than looking at almost 2000 links and wondering how you could visit them all
  • The “Surprise Me!” button creates a level playing field for all blogs because sites are picked at random
  • A counter tells you how many sites you have already visited
  • The buttons should work until the end of the year so you can continue discovering new sites after the challenge has ended (if the linky list format changes and the buttons break email me about it
  • Easy to add to the widget. It’s just copy and paste
  • Non-Blogger users, e.g. on WordPress.COM, can use this dedicated page which also has the buttons

Blogger users can add the widget to their site following the instructions below. 

WordPress.COM users
You cannot install the buttons because they do not allow custom widgets on wordpress.COM.
Instead, use this dedicated page as your A-Z button page. You cannot install the buttons on WordPress.COM. That page is an alternative. See my sidebar for a button image you can use. Add a normal image widget to your WP sidebar and set the URL link to: http://a-z.marcusclearspring.com. That’s the best I can offer for us WP .com users.

Please give me feedback in the comments. Email me with any problems, but please be specific. Saying “It doesn’t work”, won’t give me much of an idea what you did, or what may be wrong. If you have problems, start over and try to watch out for where things go awry. Then explain your steps, and I will try to help. Supply a link to your page. I’ll try to get back to you ASAP.

Copy and paste the code below where you would like the buttons to appear on your blog, e.g. in the sidebar above your A-Z badge. See the image in the top left corner of this post. If you need any help, use the contact form.

Step-by-step instructions for Blogger with screenshots


  • For Blogger users who have enabled Dynamic Views. It appears Blogger’s Dynamic Views do not show custom widgets. To ensure the buttons will be visible, choose a theme which is NOT in the new “Dynamic Views” group.
On your Blogger dashboard, click Design
You will see your template. On the right side where the sidebar is, click Add a Gadget
In the list of gadgets, scroll down to HTML/Javascript, and click the plus-sign (+)
Enter a title like “A-Z Navigation Buttons”, or whatever you like. Then paste the widget code below into the form.

Copy and paste the following code into Blogger’s widget box. Hover your mouse over the code to see a handy “Copy” icon on the right hand side. It looks like two pages on top of each other (second from the left). Alternatively, select the code with your mouse, then right-click and choose “Copy”:

<div id="loading"><img style="display: inline-block;" src="http://a-z.marcusclearspring.com.s3.amazonaws.com/images/icon_progress.gif" alt="" />

Loading buttons...</div>
<div id="navbuttons" style="display: none; margin: 0px;"><button class="css3buttongreen linkynav" onclick="getlinks('a-z-2012','nextlink');" name="next" type="button">Next Blog</button><button class="css3buttonorange linkynav" onclick="getlinks('a-z-2012','rndlink');" name="next" type="button">Surprise Me!</button>
<div id="sitesVisited" class="textline"></div>
<a class="textline" href="http://marcusclearspring.com">Get the button code</a></div>
<div id="linky" style="display: none;"></div>
<script charset="utf-8" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://a-z.marcusclearspring.com.s3.amazonaws.com/jquery.cookie.min.js"></script><script type="text/javascript" src="http://a-z.marcusclearspring.com.s3.amazonaws.com/a-z.min.js"></script>
You can now see the new widget listed by the name you gave it. Click “Save”, then click “View Blog”

A-Z Challenge Navigation Buttons

You should now see your shiny new buttons. They are valid all year, so even after the challenge has ended you can continue discovering new sites.

If the buttons remain inactive or grey, try this: paste, and paste again. Simply add the buttons as a new widget again. Even if it takes pasting three or four sets. Then delete the ones which didn’t work. This has worked for most people. If that fails, don’t despair, use the dedicated A-Z navigation page.

Please add your blog address in the comments so I know how many people are interested in using the buttons. Even of you use the standalone page.

That’s it. Happy bloghopping!

Notes and further info

One limitation applies to the Next Blog button. When you go to a new site, the “Next” button will start from the first blog on the list. It won’t know what you clicked on other sites. Yeah, it’s a bummer, but that’s how browser cookies work. It’s a security feature, so it’s also a good thing. I’d suggest always jumping off the same page in the same browser, if you prefer using the “Next” button. You know that browsers use cookies to remember things, right? The browser can only place a cookie at the domain where the button is pressed. It cannot keep a central cookie for all sites. If you always use the buttons on the same site (i.e. yours) then it will remember fine (as long as you don’t delete your cookies). The random “Surprise Me” button is of course not affected.


Place the code in your theme template. It’s worth reading the tech instructions at http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way on how to include jQuery, which the buttons use.
Sorry, I can’t help with WP .ORG integration. If anyone has a working recipe, please let me know and I will include the instructions here.




<link rel="stylesheet" href="http://a-z.marcusclearspring.com.s3.amazonaws.com/a-z.css&quot; /><div id="loading" style=""><img src="http://a-z.marcusclearspring.com.s3.amazonaws.com/images/icon_progress.gif&quot; style="display: inline-block;" /><p style="display: inline-block;font-size: 0.75em">Loading buttons…</p></div><div id="navbuttons" style="display: none;margin:0px">
<button type="button" name="next" class="css3buttongreen linkynav" onclick="getlinks('a-z-2012','nextlink');">Next Blog</button><button type="button" name="next" class="css3buttonorange linkynav" onclick="getlinks('a-z-2012','rndlink');">Surprise Me!</button>
<div id="sitesVisited" class="textline"></div>
<a href="http://marcusclearspring.com&quot; class="textline">Get the button code</a>
</div><div id="linky" style="display:none">
<script src="http://www.linkytools.com/basic_linky_include.aspx?id=126737&quot; type="text/javascript">
</script></div><script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://a-z.marcusclearspring.com.s3.amazonaws.com/jquery.cookie.min.js"></script><script type="text/javascript" src="http://a-z.marcusclearspring.com.s3.amazonaws.com/a-z.min.js"></script&gt;

view raw
hosted with ❤ by GitHub



44 thoughts on “A-Z Blogging Challenge 2012 Navigation Buttons

  1. I apologize, but I do not exactly understand how to get these buttons on my WordPress blog home page. When i go to the dedicated page, I only get the “photo” of the buttons, and no code to put in my widget. There is something I’m doing wrong, I am sure, but please help me out if possible! I’d love to put the buttons on my side bar! Thanks.

    1. Paula, WordPress.COM does not allow any customs widgets (I’m using WP myself). That’s where the dedicated page comes in. It can be used as a standalone page. Leave it open and use the buttons there. The counter will then work for you too.

      What I suggest, is placing just an image of the buttons in your sidebar, linking to the dedicated button page.

  2. I can’t get my Blogger Blog to accept the widget. It won’t display and I did once get an Invalid widget message. I followed all your instructions. In any case it should be straightforward. It’s infuriating. I won’t use the ‘f word’ on here, but Blogger let me add the google+ Badge and Button ok – it’s exactly the same method (e.g. add an HTML/Javascript widget), and ‘f’ comes before ‘g’ in the alphabet (as we know), so now I have a ‘g’ gadget (for google) and an ‘f’ one (for how I feel about having a failed gadget). Any more suggestions?

    1. Actually, on second thoughts, I think it’s to do with blogger Dynamic Views. It doesn’t support all widgets, and my blog is set to Dynamic Views. Drat.

      1. Fiona, I think you may be right. Blogger’s new “Dynamic Views” don’t seem to allow widgets. OTOH your site should still be viewable without Dynamic Views, or you can switch back. I’ll look into it. Thanks.

  3. I’m sorry but they don’t work on my blog when I paste the code into an html gadget , besides not getting a color coded button they are inactive as you say but I’ve tried to paste it into another gadget, but only one set seems to appear anyway so I’m afraid I don’t know much about coding or html to understand what I must do to fix it 😦

  4. I know why the code doesn’t work . Did you look at the top of the code? It only has the loading gif . I think the css is missing . It just says what the hell is that?

  5. I would love to use this, but no matter what I do I can’t get them to activate. They show up fine, but nothing happesn on the click!

  6. …also, I can see that the screen grab of the Blogger widget has different code than the code actually provided. There’s a “src” in the screen grab that is absent from the provided code. I have a suspicion it would work if I could get my hands on the code in the screen grab…

  7. i love the button idea too. IT doesn’t work with non-blogger blogs? I Went to the link “for non-blogger blogs” and there were buttons but no code….???

      1. I guess I’ll just keep using the one on your page then. Interesting, just found a blog that is marked private! She isn’t going to get a lot of comments!!

  8. I’m behind everyone, I just added the buttons. The problem I have is the buttons are both grey. No color and they are much smaller than the way they should be. Tried to do this twice and got the same result both times. And they do not work.

  9. So glad you made this … I was hoping someone would know what to do! Plan to put it up tomorrow on my regular computer …


  10. I added the widget, but it started over at zero, so I deleted it. But I love this idea! Wish I’d found it at the beginning of the challenge.

  11. I enjoyed using the buttons last year, and hope to use it this year to visit everyone on the linky till year end. Thank you.

  12. Thanks very much for this! I’ve found it a bit late for the challenge but hopefully can still visit plenty until the end of the year.

    Very useful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s