Adding a Shuffle Button to Tumblr

For those of you that have a tumblr blog, one of the funnest things to do (waste time doing) is to click on the “shuffle” button on a blog that you really enjoy, or on your own to take a walk down memory lane.

However, some themes don’t have this.. Which is a bummer, as they all should.

So, how do you get this? How do you install one similar to what you see below?

So, the steps are fairly easy.

  1. Log into your tumblr account
  2. Click on the customize button you see above. If it’s not in the top right corner, go to your dashboard and click on your blog name in the top of the page and you should then see the customize theme button on the right menu.
  3. Click on the customize theme and then brows to where you find the line </style>
  4. Just before this, you want to paste the following code (note: this defines where the image sits on your page, so you can play with the top and right elements):
    .shuffle {
    position: fixed;
    top: 25px;
    right: 5px;
    _position: static;
    _margin: 3px;
    _text-align: right;
    z-index: 1337;
    }
  5. What you just did, defines what is known as the CSS element positioning.
  6. Now, just before the </body> tag, post the following code which tells you what image to display
    <div> <a href=”/random”><img src=”http://static.tumblr.com/gmvpk3i/iAcll0j1w/shuffle.png”></a></div>   
  7. Click Update Preview to see if you like how it looks on the right viewing pane
  8. Click Appearance to go back to the main “customize” page, and click save
  9. Everything should now be as you had hoped!

Hope this works for you, or if you have any suggestions.

Reference: How To Tumblr

2 Comments

  1. Natalie P April 14, 2016 9:58 am  Reply

    Is there a way to get the random post to be a post with a certain tag? Like if I want to get a random music post and I tagged all my music with music?

    • Ned June 10, 2016 2:58 pm  Reply

      Hello Natalie,

      I think it’s either completely random or not. If you have a look at Tumblr’s ‘Lesser Known Features’:

      URL tricks

      Archive: cheezbag.tumblr.com/archive
      A quick view of everything on a blog. This one’s useful when you’re looking for a particular post, or if you just like rectangles. You can filter by month and year, or post type to help narrow your search.

      Tagged: cheezbag.tumblr.com/tagged/
      Shows all the posts on a blog that have been tagged with that tag. Works on any blog. Well, any blog that uses tags.

      Chrono: cheezbag.tumblr.com/tagged//chrono
      Variation on a theme: orders posts with a particular tag in chronological order.

      Date: cheezbag.tumblr.com/day/YYYY/MM/DD
      See only posts made on a specific date. Maybe you posted a bunch of things from New Year’s Eve but you have a very particular tagging system that can’t be messed around with.

      Random: cheezbag.tumblr.com/random
      Loads a random post from that blog. Do it again. There’s another one. Do it again. Yeah you got it.

      For more information, see: https://www.tumblr.com/docs/en/lesser_known_features

Leave a Reply

15 − nine =