In this tutorial, I will show you how to make your own Tumblr Layouts.
First, you will need to know: CSS, HTML, and Tumblr Variables.
Let’s get started then. I will post the code and explain how the code works.
The basic html.
<html>
<head>
<title>{Title} - Tutorial by vernonvan</title>
<style type=”text/css”>
/*
DO NOT REMOVE
Tutorial by vernonvan
vernonvan.com
vernonvan.tumblr.com
tumblr-layouts.tumblr.com
DO NOT REMOVE
*/
body {
background-color: #000;
color: #ffffff;
}
p {
color: #ffff00;
}
</style>
</head>
<body>
<br>
TUMBLR VARIABLES, you might want to use table to display your posts.
</body>
</html>
That is the basic html that you will need to make a website. Now, let’s integrate tumblr’s variable to your code. I will post the code and explain what they do.
———————————————————————————————————————-
{block:Posts}
{block:Text}
<li class=”post text”>
{block:Title}
<h3><a href=”{Permalink}”>{Title}</a></h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<li class=”post photo”>
<img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>
{block:Caption}
<div class=”caption”>{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}
{block:Photoset}
<li class=”post photoset”>
{Photoset-500}
{block:Caption}
<div class=”caption”>{Caption}</div>
{/block:Caption}
</li>
{/block:Photoset}
{block:Quote}
<li class=”post quote”>
“{Quote}”
{block:Source}
<div class=”source”>{Source}</div>
{/block:Source}
</li>
{/block:Quote}
{block:Link}
<li class=”post link”>
<a href=”{URL}” class=”link” {Target}>{Name}</a>
{block:Description}
<div class=”description”>{Description}</div>
{/block:Description}
</li>
{/block:Link}
{block:Chat}
<li class=”post chat”>
{block:Title}
<h3><a href=”{Permalink}”>{Title}</a></h3>
{/block:Title}
<ul class=”chat”>
{block:Lines}
<li class=”{Alt} user_{UserNumber}”>
{block:Label}
<span class=”label”>{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<li class=”post video”>
{Video-500}
{block:Caption}
<div class=”caption”>{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
{block:Audio}
<li class=”post audio”>
{AudioPlayerBlack}
{block:Caption}
<div class=”caption”>{Caption}</div>
{/block:Caption}
</li>
{/block:Audio}
{/block:Posts}
———————————————————————————————————————-
Before you start entering the variable, you must add {block:Posts} and {/block:Posts}. What this do is they alert your code that you will be using tumblr’s variable, only if you have a post.
And in between the POST block, {block:Posts} and {/block:Posts}, that is where you will be posting the other variable.
—————————————-
We are ready for our Text Post to show up in our tumblr.
{block:Text}
{block:Title}
<h3><a href=”{Permalink}”>{Title}</a></h3>
{/block:Title}
{Body}
{/block:Text}
When you have a text post on your tumblr, this code will be activated to be shown on your tumblr.
The TEXT block, {block:Text} and {/block:Text}, is the one that activates when there is a text post on your tumblr.
When your text post have a title, you will need a TITLE block. TITLE block is needed if you want a title on your text post.
{block:Title}
<h3><a href=”{Permalink}”>{Title}</a></h3>
{/block:Title}
You might ask, why have {Title} inside the {block:Title} and {/block:Title} and why not just {Title}?
When you have {Title} only, you are calling the Title of your tumblr and not the title of the text post.
Now, you have a title let’s add the Body of the text.
Inside the TEXT block, you will need to add {Body}. The {Body} call the body of your text post.
There you have it, the text block.
————————————
For Photo Post.
{block:Photo}
<img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}
Again, you will need the PHOTO block. It is necessary to have {block:Photo} and {/block:Photo} on your code.
You can change the set image size of the photo post to {PhotoURL-500} for 500px, {PhotoURL-400} for 400px, {PhotoURL-250} for 250px, and {PhotoURL-100} for 100px.
The Caption block activates any captions that you have for the image.
This is the same for Photoset Post, except your change the image source to {Photoset-500}, {Photoset-400}, {Photoset-250}
————————————
There you have it for Text Post and Photo Post.
If you want to add Link Post. You will add {block:Link} {/block:Link}. You will then add some of the code inside the LINK block:
<a href=”{URL}”>{Name}</a><br>
{block:Description} {Description}{/block:Description}
———————————-
For Quote Post. You will need {block:Quote} and {/block:Quote}. You will then add this code between.
{Quote} - To show the quote post
{block:Source} {Source} {/block:Source} - To show the Source of the quote.
————————————
For Video Post. You will need {block:Video} and {/block:Video}. You will then add some of the code between the VIDEO block.
{Video-500} - to show the video with 500px
{block:Caption}{Caption}{/block:Caption} - to show video caption
————————————
For Audio Post. You will need {block:Audio} and {/block:Audio}. You will then add some of the code between the AUDIO block.
{AudioPlayer} - if you want the audio player to be the default color.
or
{AudioPlayerBlack} - if you want the audio player to be color black
or
{AudioPlayerWhite} - if you want the audio player to be color white
{PlayCount} - to show how many times your audio has been played
{FormattedPlayCount} - Show ‘1,234’
{PlayCountWithLabel} - show ‘1,234 plays’
{block:Artist} - If you have an artist on your audio, this will be showed on your tumblr
{Artist} - show the artist of the song
{/block:Artist}
There you have it, the basic tumblr code. You will need to add CSS and some HTML to make it better.
