Tumblr Template Tutorial: How to Create Tumblr Templates
Tumblr only uses one HTML page and has the CSS
along with the scripts within the head code at the top of the HTML
page/code/file. That is all you will need. There are two principle ways of
making a simple HTML page look like a firecracker of a Tumblr blog. The two
principles are called blocks and variables.
With variables the data is inserted into it
dynamically. They’re place holder tags that are more often used for information
that changes, such as a clock or calendar, but can also be used for your
titles, etc.
As a place holder they
will be encased with curly brackets: {Here are some words}
Blocks are the next
progression from variables and are often used to insert larger chunks of text
and HTML code and can also hold variables too. You can for example use a block
to put in a Tumblr post. You can also use the blocks to put in page links, 1 2
3 4 5 , or “previous” and “next” links. Blocks also have curly braces/brackets
like the variables do, and look like this:
{block:post}….{block:post}
If you put together your
variables and your blocks inside your HTML code on your page then you will have
your own theme; albeit a basic one.
The HTML’s head
Below I have given the
code for the head, for your reference, but I will explain their functions
first. There are a few variables you can use within a Tumblr Theme. Below is
the code and definitions for what you should put in them.
<head>
<title>{Title}</title>
<link
rel="shortcut icon" href="{Favicon}">
rss+xml" href="{RSS}">
<meta
name="description" content="{MetaDescription}" />
</head>
{Title} – Name your
post/blog with this.
{Favicon} – Place in your
favicon, dynamically generated url.
{RSS} – Pop your Tumblr
blog RSS feeds URL
{Meta Description} – Pop
a description of your post or blog using this meta tag.
Before we post a few
blogs there are things that you may wish to display. These you will probably want to put in your
headers, so here is the code you can add into it if you wish and its definitions.
<div
id="header">
<h1>{Title}</h1>
<p>{Description}</p>
<img
alt="{ImageTitle}" src="/{PortraitURL-64}"
/>
</div>
{Title} – Again this is
just the title that appears on the blog
{Description} – Describe
your blog in a SEO friendly way
{PortraitURL-64} - Pop in
the URL of your portrait image and then give it a size. I have sized this one at 64, but the
available sizes are 16 or 24 or 30 or 40 or 48 or 64 or 96 or 128.
Displaying Posts on your
HTML
This is done using both
variable(s) and block(s). The post block should be placed within the space on
which your various posts are going to be shown. Below is the code showing how
the {block:post} works. Below that are the various tools/definitions for your
use.
{block:Posts}
{block:Text}
<div>
{block:Title}
<h2><a
href="{Permalink}">{Title}</a></h2>
{/block:Title}
<div>
{Body}
</div>
</div>
{/block:Text}
{/block:Posts}
{block:Text} Enter Here
{/block:Text} – Will show/display posted text
{block:Photo} Enter Here
{/block:Photo} – Will show/display posted photo
{block:Photoset} Enter
Here {/block:Photoset} – Will show/display posted photoset
{block:Quote} Enter Here
{/block:Quote} – Will show/display posted quote
{block:Link} Enter Here
{/block:Link} - Will show/display posted link
{block:Chat} Enter Here
{/block:Chat} – Will show/display posted chat
{block:Audio} Enter Here
{/block:Audio} – Will show/display posted audio
{block:Video} Enter Here
{/block:Video} – Will show/display posted video
{block:Answer}Enter Here
{/block:Answer} – Will show/display posted answer
Some variables will be
utilised within most posts, just like the ones below.
{Permalink} – Put in the
url for one post
{ShortURL} – Put in share-friendly
shortened url for one post
{PostID} – Put in the
numerical post ID used for just one post
Now that you have the
bare minimum basics, it is up to you to look up the great many other things you
can do with your HTML Tumblr blog. It is
truly up to you.
