With the booming popularity of Tumblr and more than 39 million blogs, the need for a stand-out blog is almost essential. In this tutorial, we’ll build on HTML and CSS knowledge to start the HTML structure that is used on all Tumblr blogs.
Tumblr gives users control over all aspects of their blog’s design via the HTML and CSS syntax and uses a simple “block” system. The Tumblr block system only loads content when required. Let’s look at this code as an example:
{block:Posts}
{block:Text}
<article>
{block:Title}
<h2>{Title}</h2>
{/block:Title}
{Body}
</article>
{/block:Text}
{/block:Posts}
In this example, {block:Posts} will only allow the below code to load if there are posts. The {block:Text} will only load if there are text posts, since there are other types of posts such as quotes, photos and video. Finally, the {block:Title} will only render if the user sets a title, remember that this is optional. These ‘blocks’ are set by Tumblr and are used on all Tumblr blogs.
If we didn’t add these blocks, Tumblr will try to add the article to every webpage even if there were no posts or text on the page. The block can simply be thought as a conditional piece of code.
You would have also noticed the curly brackets (braces) which contain a word, these signify the variable that will load. Since the title for the posts will always change depending on the blog, {title} will load the correct corresponding title to the post. The same goes for {body} which loads the corresponding body text for each post. Want a caption of a photo? use {Caption}; want to render the current day of the month? use {DayOfMonth}; want the audio player? use {AudioPlayer}. You’ll learn more about where to find these later on.
The HTML syntax you’ve learned before for starting webpages is still applicable. You should still start your project with the relevant doctype declaration. Let’s add our code above, to make use of text posts.
<!DOCTYPE>
<html>
<head>
<title>{Title}</title>
</head>
<body>
{block:Posts}
{block:Text}
<article>
{block:Title}
<h2>{Title}</h2>
{/block:Title}
{Body}
</article>
{/block:Text}
{/block:Posts}
</body>
</html>
If you copy and paste this into your Tumblr blog, the text posts will display. However, the five other types of post require different code. The other types of posts are photo, photosets, video, audio and quotes. After all, photos don’t have body text and audio doesn’t always need a title. This means that your HTML should be tailored to the type of post.
It is almost essential to visit the Tumblr custom theme documentation. Tumblr has posted all the variables and blocks you can use, including things we haven’t used yet in this tutorial.
Try to use the custom theme documentation and you’ll see that the system is very intuitive. The Tumblr team have posted a full examples of code for the different post types to use in the introduction if you are stuck.
