Add a Shuffle Button to Tumblr

Website: Tumblr

Tumblr is a very cool site to keep a kind of photo journal of sorts. Of course, other people use it for a general blog to post poems or writings etc, but I really appreciate it for the photography elements of it.

One cool feature to have is to be able to click on a shuffle button, which will automatically go to a random post in the archives.

This can be achieved two ways. The first is much simpler and is just a text link within the header or blog description.The second is a bit more involved and adds a shuffle button to the top right of your Tumblr blog, just under the other Tumblr buttons dashboard, edit, delete..

Editing Tumblr Blog Theme

For both of these methods, you must first be logged into your Tumblr blog.

If you have multiple blogs under one Tumblr username, then you must select the theme you want to edit with the drop down menu on the upper right hand corner.

Then select customize to customize theme.

Text Link | Simple Tumblr Shuffle

The first method is the simple method, so all you have to do is add a simple text link to your site description (replace yourblog with your blog) : <a href=”yourblog.tumblr.com/shuffle/”>Shuffle</a>

Feel free to change the ‘Shuffle’ to any word(s) you wish.

Tumblr is nice and automatically updates your preview. If you like, click save, if not, move the link somewhere else.

Tumblr Shuffle Button

If you desire a nice looking button (shown above) instead of the text link, then you’re in the right spot. We’re already logged in, and customizing the blog theme we desire to customize. Now we need to do two things. First is to tell the theme where we want the button to be placed with custom CSS code, then we need to insert the actual shuffle button into the HTML of the theme.

1. In the very bottom of the Customize page click on the Advanced Options link
   
2. Now at the bottom of the Advanced Options page, there is a space to enter custom CSS. Enter the following code

   .shuffle {
       position: fixed;
       top: 35px;
       right: 3px;
       _position: static;
       _margin: 3px;
       _text-align: right;
       z-index: 1337;
   }
   
   

3. Click save, which will bring you back to the Edit Theme page, scroll to the top and click Edit HTML
   
4. Browse all the way down to nearly the very bottom until you find the close body tag: </body>
5. Enter in the following code:

    <div class="shuffle"> <a href="/random"><img src="https://static.tumblr.com/gmvpk3i/iAcll0j1w/shuffle.png"></a></div>

That should do it. Click on the update preview, make sure it shows up correctly in the top right corner, and save and exit.

Note: if you want to change the position of the button, you will edit it in the CSS that you posted in step 2 with the top and right class elements.

Hope this helps!

referenced how to tumblr for this tip.