Home











Tumblr Template Tutorial: How to Create Tumblr Templates
A tutorial on how to create awesome Tumblr templates.

Tumblr Template Tutorial




search engine marketing services

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.

Add Brandon to Your Circles on Google Plus

Go here for more social media articles and infographics.

Internet Marketing Company in Houston Texas
   
 
Copyright © ByReputation.com is an internet marketing services company located at 4501 Magnolia Cove Drive Suite #201, Houston, Texas 77345
Built with Volusion | Privacy Policy Terms & Conditions