Fang Talks

Call of the wild!

Hello and welcome everyone, to a Blogger T&T I should’ve written way sooner!

In the sidebar of my blog, you’ll find a “random post” link. It’s the one with the shuffle icon, go give it a shot! Just admiring that isn’t what you came here for though, you probably want to know how to implement one of those yourself. That’s what you’ll be learning today! As far as basic skills go, I’ll be assuming you know how to add a HTML widget to your blog. You’ll also need to enter some code into your Blogger template, but I’ll walk you through that, no worries!

Compressed script:
<script type=”text/javascript”>
function showLucky(e){var t=e.feed,n=t.entry||[],r=t.entry[0];for(var i=0;i<r.link.length;++i)r.link[i].rel==”alternate”&&(window.location=r.link[i].href)}function fetchLuck(e){script=document.createElement(“script”);script.src=”/feeds/posts/summary?start-index=”+e+”&max-results=1&alt=json-in-script&callback=showLucky”;script.type=”text/javascript”;document.getElementsByTagName(“head”)[0].appendChild(script)}function readLucky(e){var t=e.feed,n=parseInt(t.openSearch$totalResults.$t,10),r=Math.floor(Math.random()*n);r++;fetchLuck(r)}function feelingLucky(){var e=document.createElement(“script”);e.type=”text/javascript”;e.src=”/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky”;document.getElementsByTagName(“head”)[0].appendChild(e)};
</script>

Above you’ll find a compressed JavaScript script. It’s not very readable to humans, but it loads faster. For those of you who wish to get a good look at how it works, and possibly make your own tweaks, you can get the full script here.

So what will we do with these? You’ll want to go to your Blogger template page, the one which shows you a thumbnail of your blog’s current look. There’s two buttons underneath it. Hit the “edit HTML” one, and a window with code will pop up. (It may ask you if you’re sure you want to continue. Go ahead and say yes.)

What you want to do is scroll down a bit, ’til you find the </head> closing tag. The line above it should be empty. If it isn’t, place your cursor in front of the closing tag and hit return on your keyboard. On that empty line, you want to copy and paste the compressed script, all the way from <script type=”text/javascript”> to </script>.
Hit the orange “save template” button, and you’re ready to go!
What you just did was put a script in your blog template, so that it’s accessible on every page. The script will be called when a user clicks a special link, which we’ll be implementing now!

This part is really simple. Wherever you want to link to a random blog post, just use the following code:
<a href=”#” onclick=”feelingLucky()”>This is a link</a>
It’s that simple! Throw it in a widget, in a blog post, or edit it straight into your blog’s template if you’re bold enough! Of course, you can replace the “this is a link” part with whatever you want. Images and such are allows as well!

I hope this’ll do the trick for you. If it doesn’t, feel free to hit me up in the comments below, or shoot me an email or something. I’m always ready to help, so don’t be afraid to ask!

Enjoy!
~ Fang

Comments

  • 21/01/2017 (4:03 PM)

    impressive!

  • 15/10/2016 (11:43 AM)

    thanks… It worked :) awesome man.

  • 12/08/2013 (4:21 AM)

    thanks… It worked :)

  • 01/08/2013 (2:21 PM)

    Love it!

  • JMG
    04/03/2013 (12:46 AM)

    Thanks! The main site is at abadcaseofthedates.com, which is updated daily.

    I just updated the code on there (abadcaseofthedates.com), and it’s not working. Any ideas?

  • JMG
    03/03/2013 (11:34 PM)

    I think I just figured it out. It had to do with access to the posts feed. When I opened up the blog for anyone to visit, it works like a charm.

    • 03/03/2013 (11:40 PM)

      I just noticed it worked, yeah. The blog looks good, bet a ton of effort went into it. (That’s a long time between posts though, haha.)
      Glad you got it working, enjoy!

  • JMG
    03/03/2013 (11:30 PM)

    Sure. It’s abcotdlabs.blogspot.com. I’ll open it up for you.

  • JMG
    03/03/2013 (11:11 PM)

    Thanks a lot, Fang. I just sent you an invite. I’m testing out a new template and interface on a Blogger trial site before bringing it live. Piece by piece, it’s all coming together. If you help me figure this out, I’d be glad to link into your site once the new design goes live.

    • 03/03/2013 (11:30 PM)

      Mails tend to arrive real late for me sometimes, so can I get a link to your blog?

  • JMG
    03/03/2013 (7:07 PM)

    Blogger says: Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type “r.link.length” must be followed by either attribute specifications, “>” or “/>”.

    • 03/03/2013 (10:38 PM)

      Ah, thanks for pointing that out, apparently thing go wrong if you throw in the script directly. Should’ve tested that.
      I added two lines (first and last) to the code, give it another shot!

    • JMG
      03/03/2013 (10:47 PM)

      Thanks for the response. Still not working for me. I click the link and it takes me nowhere. If you’re of a mind, and up for the challenge, I’ll invite you to check out my blog, wherein I’m trying to implement it.

    • 03/03/2013 (10:59 PM)

      Yeah, sure thing, I’ll take a look at it!

  • 08/02/2013 (8:20 AM)

    This is great! But uh, will this work on Dynamic views? AFAIK they run on a different system (not language), so I’m not sure.
    I’m technologically dumb, so I might be wrong on that altogether.

    • 08/02/2013 (3:57 PM)

      Well, the script goes through the feed of your blog, so the layout of it shouldn’t make a difference. The dynamic views are a tad more complicated a template, and I’ve never used them, so I wouldn’t know where/how you’d best insert the link, but I assume it’ll work normally.

  • 08/02/2013 (1:28 AM)

    A random post thing is always a fun little toy to play with but I don’t think I’ll be getting one myself. My blog is cluttered enough as it is, and I don’t really think many will actually use it.

Post a comment

Your email will stay hidden, required field are marked with a *.

Experimental anti-spam. You only have to do this once. (Hint: it's "Fang")