A Tumbleroll to Call Your Own
One of the features Bijan wanted during my redesign of his tumblelog was a “tumbleroll”. Since going live with the redesign, Bijan has been asked a few times how his Tumbleroll works, so I offered to write a quick tutorial. Creating your own Tumbleroll is pretty simple: it should only take about 5 minutes, and you’ll only need a little HTML/Tumblr code and CSS. Here’s how I did it…
Note: We’ll be using Bijan’s tumbleroll as a model, so if you don’t like the way his looks, that’s OK, it shouldn’t be difficult to change my markup to fit your needs.
We’ll start with the HTML/Tumblr code; Bijan’s looks (roughly) like this:
{block:Following}
<h3>Tumbleroll</h3>
<ul id="tumbleroll">
{block:Followed}
<li><a href="{FollowedURL}">
<img src="{FollowedPortraitURL-30}" title="{FollowedTitle}"/>
</a></li>
{/block:Followed}
</ul>
{/block:Following}
For those unfamiliar with Tumblr’s theme engine, this code will generate a list of the people you follow using their user icons as links to their tumblelog. For more specific information about what the theme variables do, check out Tumblr’s theme variable documentation.
I implemented the tumbleroll semantically as an unordered list so the list won’t look terrible in the absence of the CSS. Plugging this markup into your theme as-is will generate a normal list of your followers, but that’s not what we want; we’re looking for the Tumblr user icons to line up side-by-side, not on top of each other. To accomplish this, we apply some simple CSS:
ul#tumbleroll { list-style-type: none; padding: 0; }
ul#tumbleroll li { float: left; margin-right: 0.5em; }
And that’s all you need! Just add the markup to your theme and put the CSS into the “Custom CSS” box under the Advanced tab in Tumblr’s Customize dialog. Click save and enjoy your very own tumbleroll.
