Advanced tips to boost your Tumblr design

When I read about Tumblr as a publishing platform, one of the main critics that is often mentioned is the lack of flexibility. Some say that compared to Blogger of Wordpress, Tumblr does not provide enough customization tools.
However if the Tumblr staff does want to provide a simple tool, you’ll nonetheless find great hidden tips. Here are just five of them.
I could assume that if you read this piece then you are familiar with XHTML and CSS, but i found that a lot of people are actually learning those web technologies by tweaking their Tumblr. So forgive me if I go back to the boring basics sometimes.

1- CSS block customization

Background:

The Tumblr code architecture is divided into blocks Those are specified into {}. For example your posts will be placed into the two blocks {block:Posts} and {/block:Posts}. Inside those blocks you’ll find your texts, links, videos, photo…inside their respective blocks that is {block:Text} {/block:Text}, {block:Photo} {/block:Photo}, {block:Link} {/block:Link}… 


Now Tumblr provide other kinds of blocks that you may want to use to tweak your template. Those are :

{block:IndexPage} {/block:IndexPage}

=> In this one you will specify the content that should be shown on the homepage of your tumblog (typically your latest entries) as well as the navigation links to go the previous pages (listing your oldest entries)

{block:PermalinkPage} {/block:PermalinkPage} 

=> The permalink page is the page of a particular entry. This could be a blog post, a video, a link… 

{block:SearchPage} {/block:SearchPage}

=> Whenever someone search your Tumblog for a keyword it will automatically generate a search page listing all occurrences of this keyword (provided you do return some results!)

{block:NoSearchResults}{/block:NoSearchResults}

When someone does a search on your weblog, they may find no result. By default you get a message like “Sorry, no search result for your query”. You may use those two variables to return a custom message or even place a photo or a video. Those elements should usually be placed just before the opening {block:Post} variable. Here is an example for a search query which has no result over here

{block:TagPage} {/block:TagPage}

=> Whenever someone click on one of your tag that you added to your entry, it will generate a tag page listing all your entries filed under this tag.

The nice thing is that you can customize the appearance of your tumblog for those five types of pages. Typically, if you have a sidebar on your main page - {block:IndexPage} then you may choose to hide it on your permalink page - {block:PermalinkPage} - to give the text more space and make it easier to read for your readers. But then given the flexibility of the architecture, you may also specify a bigger font size or choose to add some extra links.

You would do this by tweaking then your css code, usually located between the two markups <style></style> at the top of the page.Here is an example : 

 body { font-size:1em; {block:PermalinkPage} font-size:1.5em; {/block:PermalinkPage} }

#sidebar { float:right; width:250px; etc… {block:PermalinkPage} display:none; {/block:PermalinkPage} }

In this example we chose to make the font bigger on the permalink page and to hide the sidebar

You may also specify the content that you want to appear directly into the HTML code. Here is for example what I am using on my Tumblog : 

{block:IndexPage}<h2>Here are my latest entries</h2>{/block:IndexPage}

=> This will only appear on the main page

{block:SearchPage}<h2>Here are the search result for you query</h2>{/block:SearchPage}

=> This will only appear on the search page

{block:TagPage}<h2>Those are the entries tagged with…</h2> {/block:TagPage}

=> This will only appear on the tag page


So as you can see Tumblr is pretty flexible when you learn such tips and some great designers have taken advantages of it to make awesome templates. That’s one of their secrets ;)

2 - Search engines optimization

Background:

Some search engines like Google or Yahoo analyze the HTML code of your web pages. The better you describe them, the more chances you have to be highly ranked in their engine Therefore you may get more traffic over time.

Search engines are looking for the markups <title> and the <meta name=”title”, <meta name=”description”, <meta name=”keywords”. I borrowed this tips from tumblelog.jauderho.com.

To optimize them you will once again play with the blocks as follow : 

<title>{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title> <meta name=”title” content=”{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}” /> 

<meta name=”description” content=”{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title} - {Description}” /> 

<meta name=”keywords” content=”{block:Permalink}{block:Posts}{block:Tags}{Tag}, {/block:Tags}{/block:Posts}{/block:Permalink}” />

3 - Enable custom forms for your users

Enabling cutomization for users is actually quite simple. Basically this will add new empty text forms inside the user dashboard. They will be able to add any text they want to show up on their weblog

Let’s say you want them to be able to add a baseline under their website title.

in the head section of your template you will place the variable :

<meta name=”text:YouGiveAName” content=”“/>

Then, in the body section of your HTML you would add :

{block:IfYouGiveAName}{text:YouGiveAName}{/block:ifYouGiveAName}

In this case you’d want to place this below the {Title} element usually wrapped between some H1 tag. Whatever they added in their dashboard will then show up. Of course you can go a step further and place this with a specific <div> to customize its appearance. The central element can also be a link so you’d use this feature to point to their social profile :

<meta name=”text:YourTwitterUsername” content=”“/>

(…)

{block:IfYourTwitterUsername}<a href=”http://twitter.com/{text:YourTwitterUsername}”>Follow @{text:YourTwitterUsername}</a>{/block:ifYourTwitterUsername}</p>

4 - Defy Linearity

You may not necessary want to display a full list of your latest entries. Maybe you would like to place an advert after the fith post. Or maybe you just want to place some extra content right in the middle of the page.

For this you can modify the {block:Post} block and use:  {block:Post4} — your content — {/block:Post4}… This means that you content will appear just before the fourth entries 

5 - A personal iPhone template

By default, when someone goes to your Tumblog from an iPhone, Tumblr will automatically generate an iPhone optimized template. This is really convenient but maybe you would like to create your own. I actually just did that yesterday myself.

For this you will need to create a new page and choose the option Customize Layout. In order to overwrite the existing iPhone template provided by Tumblr you will need to call you page “iphone-theme”. Whatever appear on yourtumblog.tumblr.com/iphone-theme will be automatically shown on an iphone user reaching yourtumblog.tumblr.com. And don’t be afraid to mess it up. If you want to revert back all you need to do is to delete this page !

Now how can you proceed to create your personal iPhone theme ? I myself went to CreateFreeiPhoneApps.com. It requires to make at least three pages and allow you to download the full code. You’ll need to put everything together on one page and patch altogether the HMTL and the CSS.

6 - A custom Tumblr JavaScript

In the Goodies section of Tumblr, at the bottom, you will find a JavaScript code. It looks like : 

<script type=”text/javascript” src=”http://yourtumblog.tumblr.com/js”></script>

If you place it into a HTML page it will retrieve your latest entries. Not only can you customize its appearance via CSS, you may also modify the JavaScript so that it returns…

- only your text entries : …com/js?&type=text 

- only your photo entries : …com/js?&type=photo 

- only your link entries : …com/js?&type=link 

- only 5 posts : …com/js?num=5

- only the 5 last links : /js?num=5&type=link


This may be useful if you have more than one Tumblr or if you want display a photo gallery of a photoblog built on Tumblr. You may also want to use this Javascript for your customized iPhone template

Those are just six tips among many others that exist out there. I hope you found this helpful and don’t hesitate to show me you like this post :)

Article updated on May 30th 2013

©Guillaume Belfiore - 2005-2014 - guillaumeb.com | streamlog.net