A Complete Guide To Tumblr
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Click here to kickstart your project for free in a matter of minutes.
Take a break with a 3D game built on Netlify!
Check the frontend report!
Tumblr is also an option for designers and creative people, because it gives you complete control over the look of your tumblelog. It also offers great opportunities for theme designers, especially with the recent launch of premium themes (which range in price from $9 to $49). Read on for your complete guide to using and designing for Tumblr.
Why Use Tumblr?
Quite simply because Tumblr makes setting up a blog very easy. It also makes it very simple for you to follow other tumbleloggers on the website and to share their content. Tumblr tries to combine the best parts of blogging and micro-blogging in one. It handles longer-form and multimedia posts, like regular blogs, while encouraging more interaction between tumbleloggers, like micro-blogs.
Post Formats
The fact that Tumblr has built-in formats for a variety of content types makes it stand out from other blogging and micro-blogging platforms. There are templates for text, photos, videos, audio, quotes, links and chat transcripts. Most themes take advantage of the differences between these post types and implement special formatting for each one. You can also add plain text to most of these post types, and you can add images to your text posts. It’s a quite flexible system.
Because of the unique post formats, Tumblr makes a perfect platform for vlogging and podcasting, as well as for photo blogging. For audio posts, you can even call in a post, requiring nothing more than a phone. You can also email in posts of all types (each type of post has a specific email format).
Tumblr API
The Tumblr API has spawned plenty of third-party apps that let you do all sorts of things with Tumblr. More than a dozen iPhone apps can be used with Tumblr, and at least as many Web services. Desktop and mobile apps are available, as well as widgets and plug-ins that you can use on other websites. You can set up Tumblr to automatically post to your Twitter or Facebook account, too.
For developers, the API opens a world of options for creating apps. The API itself is relatively straightforward and anyone with basic PHP and XML skills will have a short learning curve. While dozens of Tumblr apps are already out there, there’s still plenty of room for further expansion.
Other Unique Features
Like Twitter, Tumblr lets you follow other users and view their posts in your dashboard. Tumblr also gives you the option to reblog or “heart” (the equivalent to a “Like” on Facebook) posts from anyone, whether you follow them or not.
Following other users is simple: just click the “Follow” link in the upper-right corner of their tumblelog. That’s also where you’ll find the links to heart or reblog content.
Blog Options
Tumblr gives you fairly complete control over how you blog. You can set up group blogs with multiple authors. You can also set up numerous blogs under a single account (each with its own custom options), though only one username is able to follow other tumblelogs. Tumblr also lets you keep private Tumblelogs that are password-protected, so you can share them with those you know or keep them completely personal. Just make sure not to post to your public tumblelog by accident!
Getting Started
Starting out with Tumblr is easy. Just sign up on the site, enter your email address and a password and the URL you want to use (something.tumblr.com). You’ll have the option to set up a custom domain name after you’ve signed up. Once your account is set up, you can start posting right away.
Themes and Customization
Hundreds of themes are available for Tumblr, most of them for free. Take some time to go through the theme options when you sign up, either to find one for your tumblelog or to get ideas to create your own theme.
One thing you may notice with Tumblr themes is that a lot of them have very narrow content areas. While wider themes are available, the vast majority are narrower than 800 pixels (and some even narrower than that).
Most Tumblr themes come with some customization options that don’t require any HTML and CSS knowledge (if you plan to create some public themes, you’ll probably want to include some customization options). There’s also an area to enter custom CSS that will override existing styles.
You can customize the HTML in any theme, too. Click on the “Customize” link from your dashboard, and then click on “Theme” and “Custom HTML.” This is also how you would create a theme from scratch. You can link to an external style sheet, too (Tumblr has a static file uploader for uploading theme assets).
Editing an existing theme is a great way to start designing for Tumblr. It also gives you complete control over how your theme looks and works without having to start from scratch.
The Bookmarklet
The Tumblr bookmarklet makes it easy to post content from anywhere on the Web. Just drag it to your bookmarks toolbar and use it when you find something to blog about. Depending on the page’s content, a window will pop up suggesting a particular content format for your post. You can change the post type right there or accept its suggestion.
Most pages will default to the “Link” post format, but if you’re on Flickr, for example, it will default to the “Photo” format. Likewise, if you’re watching a YouTube video, it will default to the “Video” format.
Creating Custom Tumblr Themes
While Tumblr makes it easy to customize the HTML and CSS of almost any theme, you may want to start from scratch. If you’ve ever created a theme for another blogging platform or CMS, creating a Tumblr theme won’t be any more difficult. Even if you haven’t created a theme for another CMS, creating a Tumblr theme isn’t much more difficult than creating a standard HTML template.
Basic Structure
Tumblr themes include the same basic parts as any website. There’s usually a header and main content area, as well as an optional sidebar and footer. Beyond that, Tumblr themes are broken down into blocks. Each block on your tumblelog contains some piece of data. For example, there are blocks for each of the post types (text, photo, audio, video, etc.), as well as blocks for things like your tumblelog’s description and “Previous” and “Next” page links.
The Tumblr loop has a huge number of variables to take advantage of. You’ll need to define blocks for each post type in order to display them properly in your theme. Beyond that, you choose what to include in your theme.
A complete list of Tumblr variables can be found on the Creating a Custom HTML Theme page on Tumblr’s website. The page also includes more information on creating Tumblr themes in general.
More on Tumblr Theme Variables
Variables allow you to do various custom things with your Tumblr themes. There are basic variables for things like the theme title, portrait URLs and favicons. There are unique variables for each of the post formats, too. Some formats (like text posts) have only a handful of variables, while others have over a dozen.
Creating Public Themes
With the addition of premium themes, many designers are becoming more interested in creating their own Tumblr themes. You might want to do a few things to a public theme that you might not bother with for a personal theme, though. One of these is creating some customization options that allow users to change things like font colors and which parts of a page to show and hide. Look around at what other themes allow to be customized, and look at the variables that Tumblr uses.
Public themes do have a few requirements that may not apply to personal themes. These are:
- All the theme’s assets have to be hosted on Tumblr.
- Third-party widgets have to be commented out. This means that you can include the code and instructions on how to enable it, but it must be disabled by default.
- Your theme must support all of the different post types: text, photo, quote, link, chat, audio and video.
- It must support the standard tags (check the variables list to see what they are).
- It must be good-looking and fully functional. Tumblr themes are vetted for quality; unattractive ones won’t make the cut.
At the moment, when you submit a theme to Tumblr, it’s free by default. To be able to sell premium themes through the Tumblr directory, you’ll either need to ask or be invited. Overall, the premium themes program is pretty secretive.
This doesn’t mean that you can’t sell premium Tumblr themes elsewhere. Theme Forest has a number of Tumblr themes for sale. Other theme developers sell them directly through their own websites. Both are options if you want to get into the premium theme market.
Remember to include credit and a link in the footer of your theme, so that visitors can find your other themes and download them. Many users will leave this credit and link as is, giving you potential traffic for your blog.
Tumblr-Specific Memes
You may want to consider joining in on some Tumblr-specific trends, events and memes out there.
Tumblr Tuesdays and Recommended Blogs
Think of Tumblr Tuesdays as sort of like Twitter’s #FollowFriday hash tag. Tumblr has a built-in recommendation engine that feeds the directory listings of blogs that are recommended enough as well as the recommended tumblelogs that show up in your dashboard’s sidebar.
Bacon
I suspect that Tumblr has a higher proportion of bacon-related blogs than on any other blogging or micro-blogging service out there. Just a quick search turns up at least half a dozen tumblelogs focused exclusively on bacon.
Unfollow Friday
Playing on Twitter’s #FollowFriday hash tag, Unfollow Friday encourages you to post annoying or disgusting things to your tumblelog in an effort to get people to unfollow you. The goal is to see how many people you can get to stop following you.
Conclusion
Whether you’re looking for a quick and easy platform to post short-format or multimedia posts or you’re interested in developing custom Tumblr themes to give away or sell, this guide should get you on your way. If you have additional resources or tips to share, please do so in the comments below!
Further Resources
(al)
