4 Temas Gratuitos para Tumblr

Olá de novo pessoal, como sabem ter um bom layout é muito importante é por isso que hoje vou dar a conhecer-vos 4 temas para tumblr grátis muito bem estruturados e elegantes. Pois a plataforma está a crescer imenso e com ela novos temas são divulgados todos os dias, os que vos vou apresentar são da autoria de rickerlr.

Não sabe como instala-los Veja este artigo:

Como Instalar Temas Tumblr em HTML

LIGHTGLASS 5

Algumas características:

Infinite scroll

5 colunas

Banner personalizavel no header

6 links personalizados

Cores personalizaveis

Efeito hover nas fotos

Mostrar ou não a descrição

Preview | Código para Instalar em baixo

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- 
********************************
Theme by: rickerlr.tumblr.com
Name: Light Glass 5 columns
Year: 2011
********************************
-->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="color:Text" content="#777777"/>
<meta name="color:Title" content="#444444"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Link hover" content="#444444"/>
<meta name="color:Link active" content="#222222"/>
<meta name="color:Link menu" content="#888888"/>
<meta name="color:Background" content="#eeeeee"/>
<meta name="color:Opacity Color Photo Effect" content="#000000"/>
<meta name="color:Notes" content="#999999"/>
<meta name="color:Post Background" content="#fdfdfd"/>
<meta name="color:Box Shadow Color" content="#dddddd"/>
<meta name="color:Border Note Permalinks" content="#f5f5f5"/>

<meta name="image:Background image" content="" />
<meta name="image:header image" content="" />

<meta name="if:Container FadeIn" content="0"/>
<meta name="if:Infinite Scroll" content="1"/>
<meta name="if:Show Captions" content="0"/>
<meta name="if:Border Rounded" content="0"/>
<meta name="if:Post Padding" content="0"/>
<meta name="if:Box Shadow" content="1"/>
<meta name="if:Show Social" content="1"/>
<meta name="if:Hide Description" content="0"/>
<meta name="if:Tumblr Buttons Opacity" content="0"/>
<meta name="if:Tumblr Buttons Fixed" content="0"/>


<meta name="text:Footer Text" content="" />
<meta name="text:Link 1 title" content="" />
<meta name="text:Link 1 url" content="" />
<meta name="text:Link 2 title" content="" />
<meta name="text:Link 2 url" content="" />
<meta name="text:Link 3 title" content="" />
<meta name="text:Link 3 url" content="" />
<meta name="text:Link 4 title" content="" />
<meta name="text:Link 4 url" content="" />
<meta name="text:Link 5 title" content="" />
<meta name="text:Link 5 url" content="" />
<meta name="text:Link 6 title" content="" />
<meta name="text:Link 6 url" content="" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}{block:SearchPage}, {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<style type="text/css" media="screen">
/* CSS RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;list-style-type: none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}

*{
outline: none;
-moz-outline: none;
}
blockquote{
    padding-left:10px;
    border-left:3px solid {color:Border Note Permalinks};
    margin:5px 0px 5px 0px;
}
li{list-style-type: circle;margin-left: 15px;}
ul#titleLinks li, ul.chat li, .note, .like{list-style-type: none;margin:0px;}

.more_notes_link_container{padding:0px !important;}

.note, .like{float:left;margin:5px 5px -5px 0px;line-height: 16px;}
.action, .note blockquote, .like blockquote{display:none;}
.more_notes_link_container{padding:0px !important;}
.action a{color: #fff !important;}
.note, .like{z-index:10;}
.note:hover, .like:hover{position:relative;z-index:100;}         
.note:hover .action, .like:hover .action{
 display: block;
 position:absolute;
 float:left;
 white-space:nowrap;
 top:-2.2em;
 left:.5em;
 background:#000;
 color:#fff;
 padding: 1px 5px;
 z-index:10;
}

h1,h2,h3,h4,h5,h6{font-weight: bold;}
.right{float: right;} .left{float: left;} .clear {clear: both;}

a:link, a:visited{color:{color:Link};}
a{
 text-decoration:none;
 opacity: 1;
 filter:alpha(opacity=100);
 -webkit-transition: opacity 0.5s ease, color 0.5s ease;
 -moz-transition: opacity 0.5s ease, color 0.5s ease;
 transition: opacity 0.5s ease, color 0.5s ease;
 -o-transition: opacity 0.5s ease, color 0.5s ease;
}
a:hover {
 color:{color:Link hover};
 opacity: 0.75;
 filter:alpha(opacity=75);
}
a:active {color:{color:Link active};}

#tumblr_controls{
 {block:IfTumblrButtonsFixed}
  position:fixed !important;
 {/block:IfTumblrButtonsFixed}
 
 {block:IfTumblrButtonsOpacity}
  opacity: 0.3;
  filter:alpha(opacity=30);
 {/block:IfTumblrButtonsOpacity}
 
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease-out;
 transition: all 0.5s ease-out;
 -o-transition: all 0.5s ease-out;
}

{block:IfTumblrButtonsOpacity}
 #tumblr_controls:hover{
  opacity: 1;
  filter:alpha(opacity=100);
 }
{/block:IfTumblrButtonsOpacity}

body{
 font-size:100%;
 color: {color:Text};
 font-family: 'Open Sans', sans-serif;
 text-align: center;
 word-wrap: break-word;
 background-color: {color:Background};
 background-image: url({image:Background image});
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: top left;
}
#container{
 position: relative;
 text-align: left;
 width: 1250px;
 height: 100%;
 margin: 0px auto;
 z-index:0;
 {block:IfContainerFadeIn}
  display:none;
 {/block:IfContainerFadeIn}
 {block:IfInfiniteScroll}
  {block:IndexPage}
   min-height: 1000px;
   height: auto !important;
   height: 1000px;
  {/block:IndexPage}
 {/block:IfInfiniteScroll}
}

#header{
 text-align:center;
 width: 940px;
 margin: 0px auto;
}

#header h1{
 margin-top:20px;
 font-size: 2em;
 text-align:center;
 font-family: 'Oswald', sans-serif;
 font-weight: normal !important;
    {block:IfHideDescription}
    cursor:pointer;
    {/block:IfHideDescription}
}
#header h1 a{text-decoration: none;}

#head_description{
 font-size:0.7em;
 margin: 5px 0 10px;
 {block:IfHideDescription}
  display:none;
 {/block:IfHideDescription}
}

#imagetitle{
 margin-top:10px;
 max-width:800px;
 width:auto !important;
 width:800px;
}

#content{
 max-width:1250px;
 width:expression(document.body.clientWidth > 1250? "1250px": "auto" );
 {block:PermalinkPage}
  max-width: 860px;
        width:expression(document.body.clientWidth > 860? "860px": "auto" );
 {/block:PermalinkPage}
 margin:0px auto;
 position:relative;
 padding-bottom:20px;
}

ul#titleLinks{
 margin:10px 0px;
 font-size: 0.7em;
 text-transform: uppercase;
}
ul#titleLinks li{display: inline;margin-left: 25px;}
ul#titleLinks li:first-child{margin-left: 0px;}
ul#titleLinks a{
 color:{color:Link menu};
 text-decoration:none;
}

.posts{
 overflow: hidden;
 position:relative;
 margin: 10px 5px 0px;
 background-color: {color:Post Background};
 z-index:9000;
 
 {block:PermalinkPage}
  width: 520px;
  float:left;
 {/block:PermalinkPage}
 {block:IndexPage}
  width: 240px;
  float: left;
 {/block:IndexPage}
 {block:IfBoxShadow}
  box-shadow: 0px 0px 2px {color:Box Shadow Color};
 {/block:IfBoxShadow}
}

{block:IfBorderRounded}
 .posts, img.photo, .opacityColorPhotoEffect, .albumArt_img_index, .odd{
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
 }
{/block:IfBorderRounded}

{block:IndexPage}
 img.photo{
     {block:IfPostPadding}
     width:220px;
     margin-bottom: -5px !important;
     {block:IfPostPadding}
     {block:IfNotPostPadding}
     margin-top: -10px;
     margin-left: -10px;
     {/block:IfNotPostPadding}
     {block:IfShowCaptions}
     margin-bottom: -5px;
     {/block:IfShowCaptions}
     {block:IfNotShowCaptions}
     margin-bottom: -15px;
     {/block:IfNotShowCaptions}
 }
{/block:IndexPage}

.videoPost, .photosetPost{
 margin-top: -10px;
 text-align:center;
 margin-left:-15px;
}

#footer{
 font-size: 0.6em;
 margin: 10px auto 50px;
 padding-top: 5px;
 width: 500px;
 border-top: 1px solid {color:Border Note Permalinks};
}
#footer a{text-decoration: none;}

.chat li.odd, .chat li.even{padding:5px;line-height:1em;}
.chat li.odd{color:{color:Title};background-color:{color:Border Note Permalinks};}
.chat li.even{color:{color:Link};margin:5px 0px}
.title{font-size:0.9em;color:{color:Title};}
.title a{color:{color:Title};text-decoration:none;}
.caption{font-size:0.7em;margin-left:3px;line-height:1.3em;margin-top:5px;}
.caption ul{margin-top: 5px;}
.label{font-weight:bold;font-size:1em}
.asker{color:{color:Link};font-weight:bold;text-decoration:none;}
.quest{
 font-size:0.7em;
 {block:PermalinkPage}
 width:360px;
 {/block:PermalinkPage}
 {block:IndexPage}
 width:180px;
 {block:IndexPage}
}
.askAnswer , .answer_form_container{margin-top:10px;}
.album_art{height:283px;width: 283px;background: #000;margin-right: 10px;position: relative;} 
.audiotrack li{margin: 5px 0px 0px;font-size: 0.7em;list-style-type: none;}
.audiotrack li:first-child{margin-top: 0px;}
.audioplayercontainer, .albumArt_img_index{
    {block:IfNotPostPadding}
    margin:-10px 0px 0px -10px;
    width:240px;
    {/block:IfNotPostPadding}
     {block:IfPostPadding}
    width:220px;
    {/block:IfPostPadding}
}
.audioplayercontainer{
    position:relative;
    z-index:1;
    background:#000;
}

.link{text-decoration:underline !important;}

#postnotesdiv{
 font-size:0.7em;
 text-align:center;
 padding: 10px;
}

.countNote_pagePosts{
 margin: 5px 0px;
 border-bottom: 1px solid {color:Border Note Permalinks};
 padding: 5px 0px;
}

{block:IfInfiniteScroll}
 #pagination{display:none;margin-top: 30px;}
{/block:IfInfiniteScroll}

#pagination li{
    display: inline-block;
    font-size: 0.7em;
    line-height: 35px;
    background-color: {color:Post Background};
    margin-left:10px;
    {block:IfBoxShadow}
        box-shadow: 0px 0px 2px {color:Box Shadow Color};
    {/block:IfBoxShadow}
}
#pagination li:first-child{margin-left: 0px;}

#pagination a{text-decoration:none;color: {color:Link};padding: 1px 15px;}
.current_page{color: {color:Text}}
.current_page{padding: 1px 15px;}

.sociallike{
 margin-top:10px;
 padding-top: 10px;
 border-top:1px solid {color:Border Note Permalinks};
}

.install:hover , .preview:hover{
    opacity:0.7;
    filter:alpha(opacity=70);
}

.opacityColorPhotoEffect{
 position:absolute;
 height:100%;
 width: 240px;
 background: {color:Opacity Color Photo Effect};
 top:0px;
 left:0px;
 z-index: 9998;
 opacity:0;
 filter:alpha(opacity=0);
 
 -webkit-transition: opacity 0.3s ease;
 -moz-transition: opacity 0.3s ease;
 transition: opacity 0.3s ease;
 -o-transition: opacity 0.3s ease;
}

.descriprion_icons{
 position: absolute;
 display: block;
 width: 25px;
 height: 25px;
 left: 50%;
 top: 70%;
 margin-top: -12px;
 background: url(http://static.tumblr.com/dbek3sy/ZQDlsyx5t/icons.png) no-repeat;
 opacity:0;
 filter:alpha(opacity=0);
 z-index: 9999;
}
.reblog_icon{
 background-position: 0px 0px;margin-left: -30px;
 -webkit-transition: all 0.25s ease;
 -moz-transition: all 0.25s ease;
 transition: all 0.25s ease;
 -o-transition: all 0.25s ease;
}
.permalink_icon{
 background-position: -25px 0px;margin-left: 5px;
 -webkit-transition: all 0.45s ease;
 -moz-transition: all 0.45s ease;
 transition: all 0.45s ease;
 -o-transition: all 0.45s ease;
}
.posts:hover .opacityColorPhotoEffect{opacity:0.4;filter:alpha(opacity=40);}
.posts:hover .descriprion_icons{top: 50%;opacity:1;filter:alpha(opacity=100);}

.description_posts{
 margin-top: 10px;
 font-size:0.6em;
 border-top: 1px solid {color:Border Note Permalinks};
 padding-top: 5px;text-align:center;
}

.description_posts a{text-decoration: none;color: {color:Notes};margin-left:10px;}
.description_posts a:hover{color: {color:Link};}
.description_posts a:first-child{margin-left: 0px;}

#postPageUl{
 text-align:left;
}
#postPageUl li{
 margin-left: 0px;
 list-style-type: none;
 margin-bottom: 5px;
}

#infscr-loading{
 bottom: -55px;
 position: absolute;
 left: 50%;
 margin-left:-8px;
 width:16px;
 height:20px;
 overflow:hidden;
 margin-bottom: 50px;
}

{CustomCSS}
</style>


<meta http-equiv="x-dns-prefetch-control" content="off"/><meta http-equiv="x-dns-prefetch-control" content="off"/><meta http-equiv="x-dns-prefetch-control" content="off"/></head>
<body>


<div style="position:fixed;right:2px;top:25px;z-index:9999;">
<a href="http://rickerlrthemes.tumblr.com/lightglass5/" target="_blank">
<img class="normal" src="http://static.tumblr.com/dbek3sy/zESllc4x6/install_theme.png" alt="install theme" />
</a>
</div>


<div id="container">
<div id="header">

 <div id="nameBlog">
  {block:IfHeaderImageImage}
   <img id="imagetitle" src="{image:header image}">
  {/block:IfHeaderImageImage}
  
  {block:IfNotHeaderImageImage}
   <h1 class="title">{Title}</h1>
  {/block:IfNotHeaderImageImage}
 </div>
 
 <div id="head_description">{Description}</div>
 
 
 <ul id="titleLinks">
  <li><a href="/">Home</a></li>
  <li><a href="http://rickerlrthemes.tumblr.com/lightglass5/">Theme</a></li>
  {block:AskEnabled}
   <li><a href="/ask" >{AskLabel}</a></li>
  {/block:AskEnabled}
  {block:IfLink1title}
   <li><a href="{text:Link 1 url}" >{text:Link 1 title} </a></li>
  {/block:IfLink1title}
  {block:IfLink2title}
   <li><a href="{text:Link 2 url}" >{text:Link 2 title} </a></li>
  {/block:IfLink2title}
  {block:IfLink3title}
   <li><a href="{text:Link 3 url}" >{text:Link 3 title} </a></li>
  {/block:IfLink3title}
  {block:IfLink4title}
   <li><a href="{text:Link 4 url}" >{text:Link 4 title} </a></li>
  {/block:IfLink4title}
  {block:IfLink5title}
   <li><a href="{text:Link 5 url}" >{text:Link 5 title} </a></li>
  {/block:IfLink5title}
  {block:IfLink6title}
   <li><a href="{text:Link 6 url}" >{text:Link 6 title} </a></li>
  {/block:IfLink6title}
  {block:HasPages} 
   {block:Pages} 
    <li><a href="{URL}" >{Label} </a></li>
   {/block:Pages}
  {/block:HasPages}
 </ul>

</div>



<div id="content">
{block:Posts}
<div class="posts">
<div style="padding:10px;">


{block:Text}
 {block:Title}
  <h3 class="title">{Title}</h3>
 {/block:Title}
 <div class="caption">{Body}</div>
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Text}


{block:Link}
 <h3 class="title"><a href="{URL}" class="link title" {Target}>{Name}</a></h3>
 {block:Description}
  <div class="caption">{Description}</div>
 {/block:Description}
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{block:Link}


{block:Photo} 
 {block:IndexPage}
  <img class="photo" src="{PhotoURL-250}" alt="{PhotoAlt}" width="240"/>
  {block:IfShowCaptions}
   {block:Caption}
    <div class="caption">{Caption}</div>
   {/block:Caption}
   {block:Date}
    <div class="description_posts">
     <a href="{Permalink}">{TimeAgo}</a>
     <a href="{Permalink}">{NoteCountWithLabel}</a>
     <a href="{ReblogURL}" target="_blank">Reblog</a>
    </div>
   {/block:Date}
  {/block:IfShowCaptions}
  {block:IfNotShowCaptions}
   <a href="{Permalink}" class="descriprion_icons permalink_icon"></a>
   <a href="{ReblogURL}" target="_blank" class="descriprion_icons reblog_icon"></a>
   <div class="opacityColorPhotoEffect"></div>
  {/block:IfNotShowCaptions}
 {/block:IndexPage}
 {block:PermalinkPage}
  <img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500" style="margin-bottom:-5px;"/>
  {block:Caption}
   <div class="caption">{Caption}</div>
  {/block:Caption}
 {/block:PermalinkPage}
{/block:Photo}


{block:Photoset}
 {block:PermalinkPage}
  <div style="text-align:center;">{Photoset-500}</div>
 {/block:PermalinkPage}
 {block:IndexPage}
  <div class="photosetPost">{Photoset-250}</div>
    {/block:IndexPage}
    {block:Caption}
     <div class="caption">{Caption}</div>
 {/block:Caption}
    {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Photoset}


{block:Answer}
 <img class="left" style="margin-right:10px;" width="30px" src="{AskerPortraitURL-30}"/>
 <div class="left quest">
  <b>{Asker}</b>:<br>
  {Question}
 </div>
 <div class="clear"></div>
 <div class="askAnswer">
  <img class="left" style="margin-right:10px;" width="30px" src="{PortraitURL-30}"/>
  <div class="left quest">
   <b>Me</b>:<br> 
   <i>{Answer}</i>
  </div>
  <div class="clear"></div>
 </div>
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Answer}


{block:Quote}
 <h3 class="title">"{Quote}"</h3>
 {block:Source}
  <div class="caption" style="text-align:right;">- {Source}</div>
 {/block:Source}
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Quote}


{block:Chat}
 {block:Title}
  <h3 class="title">{Title}</h3>
 {/block:Title}
  <ul class="chat">
   {block:Lines}
    <li class="{Alt} user_{UserNumber}">
     {block:Label}
      <span class="label">{Label}</span>
     {/block:Label}
     <span class="caption">{Line}</span>
    </li>
   {/block:Lines}
  </ul>
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Chat}

{block:Audio}
 {block:PermalinkPage}
  {block:AlbumArt}
   <img class="album_art left" width="283" src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" style="margin-bottom:10px;" />
  {/block:AlbumArt}
  <ul class="audiotrack left">
   {block:Artist}<li><b>{Artist}</b></li>{/block:Artist}
   {block:TrackName}<li>{TrackName}</li>{/block:TrackName}
   {block:Album}<li>{Album}</li>{/block:Album}
   <li>{FormattedPlayCount} plays {block:ExternalAudio}// <a href="{ExternalAudioURL}">Download</a>{/block:ExternalAudio}</li>
   <li>{AudioPlayerBlack}</li>
  </ul>
  <div class="clear"></div>
 {/block:PermalinkPage}
 {block:IndexPage}
  {block:AlbumArt}
   <img class="albumArt_img_index" src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}"/>
  {/block:AlbumArt}
  <div class="audioplayercontainer">{AudioPlayerBlack}</div>
 {/block:IndexPage}
    {block:Caption}
        <div class="caption">{Caption}</div>
 {/block:Caption}
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Audio}

{block:Video}
 {block:PermalinkPage}
  <div style="text-align:center">{Video-500}</div>
 {/block:PermalinkPage}
 {block:IndexPage}
  <div class="videoPost">{Video-250}</div>
    {/block:IndexPage}
    {block:Caption}
        <div class="caption">{Caption}</div>
    {/block:Caption}
    {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Video}

{block:PermalinkPage}
 {block:IfShowSocial}
  {block:Date}
   <div class="sociallike" >
    <div style="display:inline-block;"><g:plusone annotation="none" size="medium" href="{Permalink}"></g:plusone></div>
    <span style="margin-left:5px;"><a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></span>
    <span style="margin-left:4px;"><iframe id="facebookiframe" src="http://www.facebook.com/plugins/like.php?locale=en_US&href={Permalink}&width=45&colorscheme=light&layout=button_count" scrolling="no" frameborder='0' style="border:none; overflow:hidden; width:50px; height:20px;"></iframe></span>
   </div>
  {/block:Date}
 {/block:IfShowSocial}
{/block:PermalinkPage}
</div>
</div><!-- .posts -->

{block:PermalinkPage}
{block:Date}
<div class="posts" style="width:320px;overflow: visible;">
 <div id="postnotesdiv">
  <ul id="postPageUl">
   <li>
    On <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{DayOfMonthWithZero} {ShortMonth} {Year}</a><br>
   </li>
   <li>
    {TimeAgo} | {12HourWithZero}:{Minutes}{AmPm}
   </li>
   {block:RebloggedFrom}
    <li>
     Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>
    </li>
    <li>
     Posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>
    </li>
   {/block:RebloggedFrom}
   {block:HasTags}
    <li style="margin:10px 0px 15px;">
     {block:Tags}<a class="atag" href="{TagURL}">#{Tag} </a>{/block:Tags}
    </li>
   {/block:HasTags}
  </ul>
 
  <div class="countNote_pagePosts">
   <div class="left">
    {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
   </div>
   {block:PermalinkPagination}
    <div id="paginationPost" class="right">
     {block:NextPost}<a id="paginationPost_prev" href="{NextPost}">« Prev </a>{/block:NextPost}
     {block:PreviousPost}<a id="paginationPost_next" href="{PreviousPost}"> Next »</a>{/block:PreviousPost}
    </div>
   {/block:PermalinkPagination}
   <div class="clear"></div>
  </div>
  
  {block:PostNotes}
   {PostNotes}
  {/block:PostNotes}
  <div class="clear"></div>
 </div>
</div><!-- .posts -->
{/block:Date}
{/block:PermalinkPage}

{/block:Posts}
<div class="clear"></div>
</div><!-- content -->

<div class="clear"></div>
</div><!-- container -->

{block:IndexPage}
 {block:Pagination}
  <ul id="pagination">
   {block:PreviousPage}
    <li><a href="{PreviousPage}">«</a></li>
   {/block:PreviousPage}
   {block:JumpPagination length="5"}
   {block:CurrentPage}
    <li><span class="current_page numbersNav"><strong>{PageNumber}</strong></span></li>
   {/block:CurrentPage}
   {block:JumpPage}
    <li><a class="jump_page numbersNav" href="{URL}">{PageNumber}</a></li>
   {/block:JumpPage}
   {/block:JumpPagination}
   {block:NextPage}
    <li><a id="nextPage" href="{NextPage}">»</a></li>
   {/block:NextPage}
  </ul>
 {/block:Pagination}
{/block:IndexPage}

<div id="footer">
 {block:IffooterText}
  {text:footerText}
  <br>
 {/block:IffooterText}
 theme <a href="http://rickerlrthemes.tumblr.com/lightglass5/" target="_blank">LightGlass 5 columns</a> by <a rel="author" href="http://rickerlr.tumblr.com/" target="_blank">rickerlr</a>
 <br>
 <a href="http://rickerlrthemes.tumblr.com/" target="_blank">rickerlrthemes</a>
</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
{block:IfHideDescription}
<script type="text/javascript">
 $(function(){
  $("#nameBlog").click(function(){
   $("#head_description").fadeToggle(500);
  });
 });
</script>
{/block:IfHideDescription}
{block:IndexPage}
<script type="text/javascript"  src="http://static.tumblr.com/dbek3sy/4IKlvmzup/jquery.masonry.min.js"></script>
{block:IfInfiniteScroll}
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
{/block:IfInfiniteScroll}
<script type="text/javascript">
$(window).load(function () {
var $content = $('#content');
$content.masonry({
    itemSelector: '.posts',
    isAnimated: true
    }),
$content.infinitescroll({
     navSelector    : '#pagination',  
      nextSelector   : '#pagination a#nextPage', 
      itemSelector   : '.posts',
      loading: {
          finishedMsg: '',
          img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
      },
      bufferPx       : 200,
      debug          : false,
},
// call masonry as a callback.
function( newElements ) {
 var $newElems = $( newElements );
  $newElems.hide();
 // ensure that images load before adding to masonry layout
 $newElems.imagesLoaded(function(){
  $content.masonry( 'appended', 
        $newElems, true,
        function(){$newElems.fadeIn(300);} 
    );

  
 });
});
});
</script>
{/block:IndexPage}
{block:IfContainerFadeIn}
<script type="text/javascript">
 $(function(){
  $("#container").fadeIn(500);
 });
</script>
{/block:IfContainerFadeIn}

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</body>
</html>

LIGHTGLASS 2

Algumas características:

Infinite scroll

2 colunas

Banner personalizavel no header

5 links personalizados

Personalizar as cores

Efeito hover nas fotos

Mostrar ou não a descrição

Preview | Código para Instalar em baixo

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- 
********************************
Theme by: rickerlr.tumblr.com
Name: Light Glass 2 columns
Year: 2011
********************************
-->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="color:Text" content="#777777"/>
<meta name="color:Text Description" content="#777777"/>
<meta name="color:Title" content="#444444"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Link hover" content="#444444"/>
<meta name="color:Link active" content="#222222"/>
<meta name="color:Link menu" content="#888888"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Opacity Color Photo Effect" content="#000000"/>
<meta name="color:Notes" content="#999999"/>
<meta name="color:Post Background" content="#f9f9f9"/>
<meta name="color:Box Shadow Color" content="#999999"/>
<meta name="color:Border Note Permalinks" content="#eeeeee"/>

<meta name="image:Background image" content="" />
<meta name="image:header image" content="" />

<meta name="if:Container FadeIn" content="0"/>
<meta name="if:Infinite Scroll" content="1"/>
<meta name="if:Show Captions" content="0"/>
<meta name="if:Border Rounded" content="0"/>
<meta name="if:Post Padding" content="0"/>
<meta name="if:Box Shadow" content="1"/>
<meta name="if:Show Social" content="1"/>
<meta name="if:Hide Description" content="0"/>
<meta name="if:Show Notes Permalink" content="0"/>
<meta name="if:Tumblr Buttons Opacity" content="0"/>
<meta name="if:Tumblr Buttons Fixed" content="0"/>


<meta name="text:Footer Text" content="" />
<meta name="text:Page Text" content="Pages" />
<meta name="text:Link 1 title" content="" />
<meta name="text:Link 1 url" content="" />
<meta name="text:Link 2 title" content="" />
<meta name="text:Link 2 url" content="" />
<meta name="text:Link 3 title" content="" />
<meta name="text:Link 3 url" content="" />
<meta name="text:Link 4 title" content="" />
<meta name="text:Link 4 url" content="" />
<meta name="text:Link 5 title" content="" />
<meta name="text:Link 5 url" content="" />
<meta name="text:Link 6 title" content="" />
<meta name="text:Link 6 url" content="" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}{block:SearchPage}, {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<style type="text/css" media="screen">
/* CSS RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;list-style-type: none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}

*{
outline: none;
-moz-outline: none;
}

blockquote{    padding-left:10px;border-left:3px solid {color:Border Note Permalinks};margin:5px 0px 5px 0px;}
li{list-style-type: circle;margin-left: 15px;}
ul.titleLinks li, ul.chat li, .note, .like{list-style-type: none;margin:0px;}
ol.notes{text-align: left;}
.note, .like{
 {block:IfNotShowNotesPermalink}margin: 5px 0px;{/block:IfNotShowNotesPermalink}
 {block:IfShowNotesPermalink}margin: 10px 0px;{/block:IfShowNotesPermalink}
}
ol.notes li .avatar {
 width:18px;
 height:18px;
 vertical-align: middle;
 {block:IfShowNotesPermalink}margin-right: 10px;{/block:IfShowNotesPermalink}
}

{block:IfNotShowNotesPermalink}
.note, .like{float:left;margin:5px 5px 0px 0px;line-height: 16px;}
.action, .note blockquote, .like blockquote{display:none;}
.more_notes_link_container{padding:0px !important;}
.action a{color: #fff !important;}
.note, .like{z-index:10;}
.note:hover, .like:hover{position:relative;z-index:100;}      
.note:hover .action, .like:hover .action{
 display: block;
 position:absolute;
 float:left;
 white-space:nowrap;
 top:-2.2em;
 left:.5em;
 background:#000;
 color:#fff;
 padding: 1px 5px;
 z-index:10;
}
{/block:IfNotShowNotesPermalink}

h1,h2,h3,h4,h5,h6{font-weight: bold;}
.right{float: right;} .left{float: left;} .clear {clear: both;}

a:link, a:visited{color:{color:Link};}
a{
 text-decoration:none;
 opacity: 1;
 filter:alpha(opacity=100);
 -webkit-transition: opacity 0.5s ease, color 0.5s ease;
 -moz-transition: opacity 0.5s ease, color 0.5s ease;
 transition: opacity 0.5s ease, color 0.5s ease;
 -o-transition: opacity 0.5s ease, color 0.5s ease;
}
a:hover {
 color:{color:Link hover};
 opacity: 0.75;
 filter:alpha(opacity=75);
}
a:active {color:{color:Link active};}

#tumblr_controls{
 {block:IfTumblrButtonsFixed}
  position:fixed !important;
 {/block:IfTumblrButtonsFixed}
 
 {block:IfTumblrButtonsOpacity}
  opacity: 0.3;
  filter:alpha(opacity=30);
 {/block:IfTumblrButtonsOpacity}
 
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease-out;
 transition: all 0.5s ease-out;
 -o-transition: all 0.5s ease-out;
}

{block:IfTumblrButtonsOpacity}
 #tumblr_controls:hover{
  opacity: 1;
  filter:alpha(opacity=100);
 }
{/block:IfTumblrButtonsOpacity}

body{
 font-size:100%;
 color: {color:Text};
 font-family: 'Open Sans', sans-serif;
 text-align: center;
 word-wrap: break-word;
 background-color: {color:Background};
 background-image: url({image:Background image});
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: top left;
}
#container{
 position: relative;
 text-align: left;
 height: 100%;
 margin: 0px auto;
 z-index:0;
 {block:IfContainerFadeIn}
  display:none;
 {/block:IfContainerFadeIn}
 {block:IfInfiniteScroll}
  {block:IndexPage}
   min-height: 800px;
   height: auto !important;
   height: 800px;
  {/block:IndexPage}
 {/block:IfInfiniteScroll}
}

#header{
 text-align:center;
 width: 1040px;
 margin: 0px auto;
}

#header h1{
 margin-top:20px;
 font-size: 2em;
 text-align:center;
 font-family: 'Oswald', sans-serif;
 font-weight: normal !important;
 cursor: pointer;
}
#header h1 a{text-decoration: none;}

#head_description{
 font-size:0.7em;
 margin: 4px 0 10px;
    color:{color:Text Description};
 {block:IfHideDescription}
  display:none;
 {/block:IfHideDescription}
}
#head_description a{color:{color:Link menu};}

#imagetitle{
 margin-top:10px;
 max-width:1040px;
 width:expression(document.body.clientWidth > 1040? "1040px": "auto" );
   cursor: pointer;
}

#content{
 {block:IndexPage}
  max-width:1040px;
  width:expression(document.body.clientWidth > 1040? "1040px": "auto" );
 {/block:IndexPage}
 {block:PermalinkPage}
  {block:IfNotShowNotesPermalink}width: 860px;{/block:IfNotShowNotesPermalink}
  {block:IfShowNotesPermalink}width: 520px;{/block:IfShowNotesPermalink}
 {/block:PermalinkPage}
 margin:-10px auto;
 position:relative;
 padding-bottom:20px;
}

ul#titlePages{display:none}

ul.titleLinks{
 margin:10px 0px;
 font-size: 0.7em;
 text-transform: uppercase;
}
ul.titleLinks li{display: inline;margin-left: 25px;}
ul.titleLinks li:first-child{margin-left: 0px;}
ul.titleLinks a{
 color:{color:Link menu};
 text-decoration:none;
}

.posts{
 overflow: hidden;
 position:relative;
 margin-top: 20px;
 background-color: {color:Post Background};
 z-index:9000;
 
 {block:PermalinkPage}
  margin-right: 10px;
  width: 520px;
  float:left;
 {/block:PermalinkPage}
 {block:IndexPage}
  margin-right: 20px;
  width: 500px;
  float: left;
 {/block:IndexPage}
 {block:IfBoxShadow}
  box-shadow: 0px 0px 5px {color:Box Shadow Color};
 {/block:IfBoxShadow}
}

{block:IfBorderRounded}
 .posts, img.photo, .opacityColorPhotoEffect, .albumArt_img_index, .odd{
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
 }
{/block:IfBorderRounded}

img.photo{
 {block:IndexPage}
  {block:IfPostPadding}
   width:480px;
   margin-bottom: -5px !important;
  {block:IfPostPadding}
  {block:IfNotPostPadding}
   margin-top: -10px;
   margin-left: -10px;
  {/block:IfNotPostPadding}
  {block:IfShowCaptions}
   margin-bottom: -5px;
  {/block:IfShowCaptions}
  {block:IfNotShowCaptions}
   margin-bottom: -15px;
  {/block:IfNotShowCaptions}
 {/block:IndexPage}
 {block:PermalinkPage}
  margin-bottom: -5px;
 {/block:PermalinkPage}
}


.photosetPost{
 text-align:center;
 {block:IndexPage}
  margin-top: -10px;
  margin-left:-10px;
 {/block:IndexPage}
}


.videoPost iframe{
 {block:IfPostPadding}width: 480px;{block:IfPostPadding}
 min-height: 300px;
 height: auto !important;
 height: 300px; 
 {block:IndexPage}
 {block:IfNotPostPadding}
 margin-top: -10px;
 margin-left:-10px;
 {block:IfNotPostPadding}
 {block:IndexPage}
}

#footer{
 font-size: 0.6em;
 {block:IfInfiniteScroll}margin: 20px auto 50px;{block:IfInfiniteScroll}
 {block:IfNotInfiniteScroll}margin: 10px auto 50px;{block:IfNotInfiniteScroll}
 padding-top: 5px;
 width: 500px;
 border-top: 1px solid {color:Border Note Permalinks};
   color:{color:Text Description};
}
#footer a{text-decoration: none;color:{color:Link menu};}

.chat li.odd, .chat li.even{padding:5px;line-height:1em;}
.chat li.odd{color:{color:Title};background-color:{color:Border Note Permalinks};}
.chat li.even{color:{color:Link};margin:5px 0px}
.title{font-size:0.9em;color:{color:Title};}
.title a{color:{color:Title};text-decoration:none;}
.caption{font-size:0.7em;margin-left:3px;line-height:1.3em;margin-top:5px;text-align:left;}
.caption ul{margin-top: 5px;}
.label{font-weight:bold;font-size:1em}
.asker{color:{color:Link};font-weight:bold;text-decoration:none;}
.quest{
 font-size:0.7em;
 {block:PermalinkPage}
 width:460px;
 {/block:PermalinkPage}
 {block:IndexPage}
 width:440px;
 {block:IndexPage}
}
.askAnswer , .answer_form_container{margin-top:10px;}
.audiotrack{width: 207px;}
.audiotrack li{margin: 5px 0px 0px;font-size: 0.7em;list-style-type: none;}
.audiotrack li:first-child{margin-top: 0px;}

.album_art{
    width:230px;
    float: left;
    margin-right: 10px;
}

.link{text-decoration:underline !important;}

#postnotesdiv{
 font-size:0.7em;
 text-align:center;
 padding: 10px;
}

.countNote_pagePosts{
 margin: 5px 0px;
 border-bottom: 1px solid {color:Border Note Permalinks};
 padding: 5px 0px;
}


#pagination{
 {block:IfInfiniteScroll}
 display:none;
 {/block:IfInfiniteScroll}
 margin-top:20px;
}


#pagination li{
    display: inline-block;
    font-size: 0.7em;
    line-height: 35px;
    background-color: {color:Post Background};
    margin-left:10px;
    {block:IfBoxShadow}
        box-shadow: 0px 0px 2px {color:Box Shadow Color};
    {/block:IfBoxShadow}
}
#pagination li:first-child{margin-left: 0px;}

#pagination a{text-decoration:none;color: {color:Link};padding: 1px 15px;}
.current_page{color: {color:Text}}
.current_page{padding: 1px 15px;}

.sociallike{
 margin-top:10px;
 padding-top: 10px;
 border-top:1px solid {color:Border Note Permalinks};
}

.install:hover , .preview:hover{
    opacity:0.7;
    filter:alpha(opacity=70);
}

.opacityColorPhotoEffect{
 position:absolute;
 height:100%;
 width: 500px;
 background: {color:Opacity Color Photo Effect};
 top:0px;
 left:0px;
 z-index: 9998;
 opacity:0;
 filter:alpha(opacity=0);
 
 -webkit-transition: opacity 0.3s ease;
 -moz-transition: opacity 0.3s ease;
 transition: opacity 0.3s ease;
 -o-transition: opacity 0.3s ease;
}

.descriprion_icons{
 position: absolute;
 display: block;
 width: 25px;
 height: 25px;
 left: 50%;
 top: 70%;
 margin-top: -12px;
 background: url(http://static.tumblr.com/dbek3sy/ZQDlsyx5t/icons.png) no-repeat;
 opacity:0;
 filter:alpha(opacity=0);
 z-index: 9999;
}
.reblog_icon{
 background-position: 0px 0px;margin-left: -30px;
 -webkit-transition: all 0.25s ease;
 -moz-transition: all 0.25s ease;
 transition: all 0.25s ease;
 -o-transition: all 0.25s ease;
}
.permalink_icon{
 background-position: -25px 0px;margin-left: 5px;
 -webkit-transition: all 0.45s ease;
 -moz-transition: all 0.45s ease;
 transition: all 0.45s ease;
 -o-transition: all 0.45s ease;
}
.posts:hover .opacityColorPhotoEffect{opacity:0.4;filter:alpha(opacity=40);}
.posts:hover .descriprion_icons{top: 50%;opacity:1;filter:alpha(opacity=100);}

.description_posts{
 margin-top: 10px;
 font-size:0.6em;
 border-top: 1px solid {color:Border Note Permalinks};
 padding-top: 5px;text-align:center;
}

.description_posts a{text-decoration: none;color: {color:Notes};margin-left:10px;}
.description_posts a:hover{color: {color:Link};}
.description_posts a:first-child{margin-left: 0px;}

#postPageUl{
 {block:IfNotShowNotesPermalink}text-align:left;{/block:IfNotShowNotesPermalink}
 {block:IfShowNotesPermalink}text-align:center;{/block:IfShowNotesPermalink}
}
#postPageUl li{
 margin-left: 0px;
 list-style-type: none;
 margin-bottom: 5px;
}

#infscr-loading{
 bottom: -55px;
 position: absolute;
 left: 50%;
 margin-left:-8px;
 width:16px;
 height:20px;
 overflow:hidden;
 margin-bottom: 50px;
}

{CustomCSS}
</style>


<meta http-equiv="x-dns-prefetch-control" content="off"/><meta http-equiv="x-dns-prefetch-control" content="off"/><meta http-equiv="x-dns-prefetch-control" content="off"/></head>
<body>


<div style="position:fixed;right:2px;top:25px;z-index:9999;">
<a href="http://rickerlrthemes.tumblr.com/lightglass2/" target="_blank">
<img class="normal" src="http://static.tumblr.com/dbek3sy/zESllc4x6/install_theme.png" alt="install theme" />
</a>
</div>


<div id="container">
<div id="header">

 <div id="nameBlog">
  {block:IfHeaderImageImage}
   <img id="imagetitle" src="{image:header image}">
  {/block:IfHeaderImageImage}
  
  {block:IfNotHeaderImageImage}
   <h1 class="title">{Title}</h1>
  {/block:IfNotHeaderImageImage}
 </div>

 <div id="head_description">{Description}</div>
 
 
 <ul class="titleLinks">
  <li><a href="/">Home</a></li>
  <li><a href="http://rickerlrthemes.tumblr.com/lightglass2/">Theme</a></li>
  {block:AskEnabled}
   <li><a href="/ask" >{AskLabel}</a></li>
  {/block:AskEnabled}
  {block:IfLink1title}
   <li><a href="{text:Link 1 url}" >{text:Link 1 title}</a></li>
  {/block:IfLink1title}
  {block:IfLink2title}
   <li><a href="{text:Link 2 url}" >{text:Link 2 title}</a></li>
  {/block:IfLink2title}
  {block:IfLink3title}
   <li><a href="{text:Link 3 url}" >{text:Link 3 title}</a></li>
  {/block:IfLink3title}
  {block:IfLink4title}
   <li><a href="{text:Link 4 url}" >{text:Link 4 title}</a></li>
  {/block:IfLink4title}
  {block:IfLink5title}
   <li><a href="{text:Link 5 url}" >{text:Link 5 title}</a></li>
  {/block:IfLink5title}
  {block:IfLink6title}
   <li><a href="{text:Link 6 url}" >{text:Link 6 title}</a></li>
  {/block:IfLink6title}
        {block:HasPages} 
           <li><a id="pageLink" href="javascript:void(0)">{text:Page Text}</a></li>
        {/block:HasPages}
 </ul>
    <ul id="titlePages" class="titleLinks">
        {block:HasPages} 
      {block:Pages} 
    <li><a href="{URL}" >{Label}</a></li>
   {/block:Pages}
  {/block:HasPages}
    </ul>

</div>



<div id="content">
{block:Posts}
<div class="posts">
<div style="padding:10px;">


{block:Text}
 {block:Title}
  <h3 class="title">{Title}</h3>
 {/block:Title}
 <div class="caption">{Body}</div>
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Text}


{block:Link}
 <h3 class="title"><a href="{URL}" class="link title" {Target}>{Name}</a></h3>
 {block:Description}
  <div class="caption">{Description}</div>
 {/block:Description}
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{block:Link}


{block:Photo}
 <img class="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" width="500"/>
 {block:IndexPage}
  {block:IfShowCaptions}
   {block:Caption}
    <div class="caption">{Caption}</div>
   {/block:Caption}
   {block:Date}
    <div class="description_posts">
     <a href="{Permalink}">{TimeAgo}</a>
     <a href="{Permalink}">{NoteCountWithLabel}</a>
     <a href="{ReblogURL}" target="_blank">Reblog</a>
    </div>
   {/block:Date}
  {/block:IfShowCaptions}
  {block:IfNotShowCaptions}
   <a href="{Permalink}" class="descriprion_icons permalink_icon"></a>
   <a href="{ReblogURL}" target="_blank" class="descriprion_icons reblog_icon"></a>
   <div class="opacityColorPhotoEffect"></div>
  {/block:IfNotShowCaptions}
 {/block:IndexPage}
 {block:PermalinkPage}
  {block:Caption}
   <div class="caption">{Caption}</div>
  {/block:Caption}
 {/block:PermalinkPage}
{/block:Photo}


{block:Photoset}
 <div class="photosetPost">{Photoset-500}</div>
 {block:Caption}
  <div class="caption">{Caption}</div>
 {/block:Caption}
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Photoset}


{block:Answer}
 <img class="left" style="margin-right:10px;" width="30px" src="{AskerPortraitURL-30}"/>
 <div class="left quest">
  <b>{Asker}</b>:<br>
  {Question}
 </div>
 <div class="clear"></div>
 <div class="askAnswer">
  <img class="left" style="margin-right:10px;" width="30px" src="{PortraitURL-30}"/>
  <div class="left quest">
   <b>Me</b>:<br> 
   <i>{Answer}</i>
  </div>
  <div class="clear"></div>
 </div>
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Answer}


{block:Quote}
 <h3 class="title">"{Quote}"</h3>
 {block:Source}
  <div class="caption" style="text-align:right;">- {Source}</div>
 {/block:Source}
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Quote}


{block:Chat}
 {block:Title}
  <h3 class="title">{Title}</h3>
 {/block:Title}
  <ul class="chat">
   {block:Lines}
    <li class="{Alt} user_{UserNumber}">
     {block:Label}
      <span class="label">{Label}</span>
     {/block:Label}
     <span class="caption">{Line}</span>
    </li>
   {/block:Lines}
  </ul>
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Chat}

{block:Audio}
 {block:AlbumArt}
  <img class="album_art left" src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" style="margin-bottom:10px;" />
 {/block:AlbumArt}
 <ul class="audiotrack left">
  {block:Artist}<li><b>{Artist}</b></li>{/block:Artist}
  {block:TrackName}<li>{TrackName}</li>{/block:TrackName}
  {block:Album}<li>{Album}</li>{/block:Album}
  <li>{FormattedPlayCount} plays {block:ExternalAudio}// <a href="{ExternalAudioURL}">Download</a>{/block:ExternalAudio}</li>
  <li>{AudioPlayerBlack}</li>
 </ul>
 <div class="clear"></div>
 {block:Caption}
  <div class="caption">{Caption}</div>
 {/block:Caption}
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
 
{/block:Audio}

{block:Video}
 <div class="videoPost">{Video-500}</div>
 {block:Caption}
 <div class="caption">{Caption}</div>
 {/block:Caption}
 {block:IndexPage}
  {block:Date}
   <div class="description_posts">
    <a href="{Permalink}">{TimeAgo}</a>
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    <a href="{ReblogURL}" target="_blank">Reblog</a>
   </div>
  {/block:Date}
 {/block:IndexPage}
{/block:Video}

{block:PermalinkPage}
 {block:IfShowSocial}
  {block:Date}
   <div class="sociallike" style="text-align: center;">
    <div style="display:inline-block;margin-left:20px;"><g:plusone annotation="none" size="medium" href="{Permalink}"></g:plusone></div>
    <span style="margin-left:20px;"><a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></span>
    <span style="margin-left:20px;"><iframe id="facebookiframe" src="http://www.facebook.com/plugins/like.php?locale=en_US&href={Permalink}&width=45&colorscheme=light&layout=button_count" scrolling="no" frameborder='0' style="border:none; overflow:hidden; width:50px; height:21px;"></iframe></span>
   </div>
  {/block:Date}
 {/block:IfShowSocial}
{/block:PermalinkPage}
</div>
</div><!-- .posts -->

{block:PermalinkPage}
{block:Date}
<div class="posts" style="{block:IfNotShowNotesPermalink}width:320px;{/block:IfNotShowNotesPermalink}overflow: visible;">
 <div id="postnotesdiv">
  <ul id="postPageUl">
   <li>
    On <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{DayOfMonthWithZero} {ShortMonth} {Year}</a><br>
   </li>
   <li>
    {TimeAgo} | {12HourWithZero}:{Minutes}{AmPm}
   </li>
   {block:RebloggedFrom}
    <li>
     Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>
    </li>
    <li>
     Posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>
    </li>
   {/block:RebloggedFrom}
   {block:HasTags}
    <li style="margin:10px 0px 15px;">
     {block:Tags}<a class="atag" href="{TagURL}">#{Tag} </a>{/block:Tags}
    </li>
   {/block:HasTags}
  </ul>
 
  <div class="countNote_pagePosts">
   <div class="left">
    {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
   </div>
   {block:PermalinkPagination}
    <div id="paginationPost" class="right">
     {block:NextPost}<a id="paginationPost_prev" href="{NextPost}">« Prev </a>{/block:NextPost}
     {block:PreviousPost}<a id="paginationPost_next" href="{PreviousPost}"> Next »</a>{/block:PreviousPost}
    </div>
   {/block:PermalinkPagination}
   <div class="clear"></div>
  </div>
  
  {block:PostNotes}
   {PostNotes}
  {/block:PostNotes}
  <div class="clear"></div>
 </div>
</div><!-- .posts -->
{/block:Date}
{/block:PermalinkPage}

{/block:Posts}
<div class="clear"></div>
</div><!-- content -->

<div class="clear"></div>
</div><!-- container -->

{block:IndexPage}
 {block:Pagination}
  <ul id="pagination">
   {block:PreviousPage}
    <li><a href="{PreviousPage}">«</a></li>
   {/block:PreviousPage}
   {block:JumpPagination length="5"}
   {block:CurrentPage}
    <li><span class="current_page numbersNav"><strong>{PageNumber}</strong></span></li>
   {/block:CurrentPage}
   {block:JumpPage}
    <li><a class="jump_page numbersNav" href="{URL}">{PageNumber}</a></li>
   {/block:JumpPage}
   {/block:JumpPagination}
   {block:NextPage}
    <li><a id="nextPage" href="{NextPage}">»</a></li>
   {/block:NextPage}
  </ul>
 {/block:Pagination}
{/block:IndexPage}

<div id="footer">
 {block:IfFooterText}
  {text:Footer Text}
  <br>
 {/block:IfFooterText}
 theme <a href="http://rickerlrthemes.tumblr.com/lightglass2/" target="_blank">LightGlass 2 columns</a> by <a rel="author" href="http://rickerlr.tumblr.com/" target="_blank">rickerlr</a>
 <br>
 <a href="http://rickerlrthemes.tumblr.com/" target="_blank">rickerlrthemes</a>
</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     $("#pageLink").click(function(){
   $("#titlePages").fadeToggle(500);
  });
 });
</script>
{block:IfHideDescription}
<script type="text/javascript">
 $(function(){
  $("#nameBlog").click(function(){
   $("#head_description").fadeToggle(500);
  });
 });
</script>
{/block:IfHideDescription}
{block:IndexPage}
<script type="text/javascript"  src="http://static.tumblr.com/dbek3sy/4IKlvmzup/jquery.masonry.min.js"></script>
{block:IfInfiniteScroll}
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
{/block:IfInfiniteScroll}
<script type="text/javascript">
$(window).load(function () {
var $content = $('#content');
$content.masonry({
    itemSelector: '.posts',
    isAnimated: true
    }),
$content.infinitescroll({
     navSelector    : '#pagination',  
      nextSelector   : '#pagination a#nextPage', 
      itemSelector   : '.posts',
      loading: {
          finishedMsg: '',
          img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
      },
      bufferPx       : 200,
      debug          : false,
},
// call masonry as a callback.
function( newElements ) {
 var $newElems = $( newElements );
  $newElems.hide();
 // ensure that images load before adding to masonry layout
 $newElems.imagesLoaded(function(){
  $content.masonry( 'appended', 
        $newElems, true,
        function(){$newElems.fadeIn(300);} 
    );

  
 });
});
});
</script>
{/block:IndexPage}
{block:IfContainerFadeIn}
<script type="text/javascript">
 $(function(){
  $("#container").fadeIn(500);
 });
</script>
{/block:IfContainerFadeIn}

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

</body>
</html>

Gridwings

Algumas características:

Infinite scroll

4 colunas

3 links personalizados

Personalizar as cores

Preview | Código para Instalar em baixo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- 
********************************
Theme by: rickerlr.tumblr.com
Name: Grid Wings 
Version: 1.0
Year: 2011
********************************
-->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- colors, images -->
<meta name="color:text" content="#777777"/>
<meta name="color:menuLink" content="#404040"/>
<meta name="color:link" content="#404040"/>
<meta name="color:postTitles" content="#404040"/>
<meta name="color:postBackground" content="#dddddd"/>
<meta name="color:background" content="#ffffff"/>

<meta name="image:Background" content="" />

<meta name="if:Infinite Scroll" content="0"/>
<meta name="if:Hide Description" content="1"/>
<meta name="if:Hide Title Header" content="1"/>

<meta name="text:Link 1 title" content="" />
<meta name="text:Link 1 url" content="" />
<meta name="text:Link 2 title" content="" />
<meta name="text:Link 2 url" content="" />
<meta name="text:Link 3 title" content="" />
<meta name="text:Link 3 url" content="" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}{block:SearchPage}, {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<style type="text/css" media="screen">
/* CSS RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;list-style-type: none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}

*{
outline: none;
-moz-outline: none;
}
blockquote{padding-left:10px;border-left:3px solid {color:Border permalinks};margin:5px 0px 5px 10px;}
li{list-style-type: circle;margin-left: 30px;}
ul#textLinks li, ul.chat li, .note, .like{list-style-type: none;margin:0px;}
.note, .like{padding-left:5px;}
ol.notes li .avatar {position: absolute;left: 0px;top: 6px;}
ol.notes li{padding: 5px 0px 5px 25px;position:relative;}

h1,h2,h3,h4,h5,h6{font-weight: bold;}
.right{float: right;} .left{float: left;} .clear {clear: both;}
a, .socialButton{
opacity: 1;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
filter:alpha(opacity=100);
}
a:hover, .socialButton:hover{
opacity: 0.75;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-o-transition: all 0.5s ease-out;
filter:alpha(opacity=75);
}
body{
font-size:100%;
color:{color:text};
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
word-wrap: break-word;
background: {color:background} url('{image:Background}')fixed top left repeat;
}
a {color:{color:link};text-decoration: none;}
#container{
position: relative;
width: 930px;
text-align:left;
margin: 0px auto;

{block:IfInfiniteScroll}
min-height: 1000px;
height:auto !important;
height: 1000px;
{/block:IfInfiniteScroll}
}

#content{
position:relative;
width:760px;
margin:0px auto;
z-index:2;
{block:PermalinkPage}
width:540px;
text-align:center;
{/block:PermalinkPage}
display:none;
}

#header{text-align:center;}
.pichead{
-webkit-border-radius: 64px;
-moz-border-radius: 64px;
border-radius: 64px;
}

ul#textLink{padding:10px 0px;margin-bottom:10px;border-bottom:5px solid #404040;font-family: georgia, serif, arial, verdana;}
ul#textLink li {display: inline;margin-left:30px;}
ul#textLink li:first-child {display: inline;margin-left:0px;}

#descriptionHead{
    font-size: 0.7em;
    {block:IfHideDescription}
    display:none;
    {/block:IfHideDescription}
    margin-top:3px;
    color:#888888;
}
{block:IndexPage}
.indexposts{padding:5px;background-color:{color:postBackground};}
{/block:IndexPage}
.titlePost{color:{color:postTitles} !important;}
.chat{font-size:0.7em;}
.chat li.odd, .chat li.even{padding:3px;}
.chat li.even{color:{color:link};}
.link{text-decoration:underline;}
.caption{font-size:0.7em;margin-top:3px;margin-left:3px;text-align:left;}
.noteCount{font-size:0.6em;text-align:right;margin:10px 0px;padding-top:3px;border-top:1px dashed #cccccc;}
.noteCount a{text-decoration:none;}
.label{font-weight:bold;}
.reblogColor{color:{color:link};font-weight:bold;}
.albumImage{position:relative;height: 75px;width: 75px;}
.albumImage img{height: 75px;width: 75px;}
.photoPost{margin-bottom: -5px;} 
.audioplayerout{
position: absolute;
background-color: #fff;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: -30px;
opacity:0.75;
filter:alpha(opacity=75);
}
.audioplayerinto{
width: 20px;
height: 30px;
margin: 17px 24px 13px 16px;
overflow:hidden;
}

.posts{
{block:IndexPage}
float:left;
z-index:9000;
width:180px;
margin:0px 10px 10px 0px;
overflow: hidden;
{/block:IndexPage}
{block:PermalinkPage}
width:540px;
{/block:PermalinkPage}
}
.description {
position:absolute;
width:190px;
bottom: 25px;
z-index:9001;
background: #000000;
color:#ffffff;
font-size:0.75em;
text-align:center;
opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;

}
.description a{color:#ffffff !important;text-decoration:none;}
.description span{margin:0px 5px;}
.description span:first-child{margin-left:0px;}
.posts:hover .description{
opacity: 0.85;
filter:alpha(opacity=85);
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
}

#footerpost{
 padding:2px 5px;
 background-color: #404040;
 font-size:0.7em;
 color:#ffffff;
 font-weight: normal;
 text-align: left;
}
#footerpost a{color:#cccccc;}
#postnotes{text-align:left;margin-top:10px;font-size:0.75em;}

#pagination{
    {block:IfInfiniteScroll}
    display:none;
    {/block:IfInfiniteScroll}
}
#prevPage, #nextPage{
 position:absolute;
 top:200px;
 font-size:3em;
}

#prevPage{left:-50px;}
#nextPage{right:-50px;}

#footer{padding:3px;margin:20px 0px 10px;font-size:0.7em;text-align:center;}

#infscr-loading{
bottom: -70px;
position: absolute;
left: 50%;
margin-left:-8px;
width:16px;
height:20px;
overflow:hidden;
margin-bottom: 50px;
}

{CustomCSS}
</style>
<meta http-equiv="x-dns-prefetch-control" content="off"/></head>
<body>
<div style="position:fixed;right:0px;top:25px;">
<a href="http://rickerlrthemes.tumblr.com/gridwings" target="_blank">
<img class="normal" src="http://static.tumblr.com/dbek3sy/zESllc4x6/install_theme.png" alt="install theme" />
</a>
</div>
<div id="container">
<div id="header">
<div style="padding:10px;">
<div>
<a href="/"><img  class="pichead" src="{PortraitURL-128}"></a>
</div>
{block:IfNotHideTitleHeader}
<h3><a href="/" style="text-decoration:none;">{Title}</a></h3>
{/block:IfNotHideTitleHeader}

{block:Description}
<div id="descriptionHead">
{Description}
</div>
{/block:Description}

<ul id="textLink">
<li><a href="/ask" >Ask</a></li>
<li><a href="/archive" >Archive</a></li>
<li><a href="/random" >Random</a></li>
<li><a href="/rss" >RSS</a></li>
{block:IfLink1title}
<li><a href="{text:Link 1 url}" >{text:Link 1 title}</a></li>
{/block:IfLink1title}
{block:IfLink2title}
<li><a href="{text:Link 2 url}" >{text:Link 2 title}</a></li>
{/block:IfLink2title}
{block:IfLink3title}
<li><a href="{text:Link 3 url}" >{text:Link 3 title}</a></li>
{/block:IfLink3title}
{block:HasPages} 
{block:Pages} 
<li><a href="{URL}" >{Label}</a></li>
{/block:Pages}
{/block:HasPages}
</ul>


</div><!-- sidebar padding -->
</div><!-- header -->

<div id="content">
{block:Posts}
<div class="posts">
{block:PermalinkPage}
<div style="padding:0px 20px 10px;">
{/block:PermalinkPage}

{block:IndexPage}
<div class="description">
<div style="padding:5px;">
{block:Date}
<span><a href="{Permalink}">▲ {block:NoteCount}{NoteCount}{/block:NoteCount}</a></span>
<span><a href="{ReblogURL}" target="_blank"><img class="normal" style="vertical-align:middle;" src="http://static.tumblr.com/y8elocf/wu3llfukf/reblog.png" alt="Reblog"></a></span>
{/block:Date}
</div>
</div>
{/block:IndexPage} 

{block:Text}
<div class="indexposts">
{block:Title}
<h3 class="titlePost"><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<div class="caption">{Body}</div>
</div>
{/block:Text}

{block:Link}
<div class="indexposts">
<h3 class="titlePost"><a href="{URL}" class="link" {Target}>{Name}</a></h3>
{block:Description}
<div class="caption">{Description}</div>
{/block:Description}
</div>
{block:Link}

{block:Photo}
{block:IndexPage}       
<img class="photoPost" src="{PhotoURL-250}" width="180"/>
{/block:IndexPage}
{block:PermalinkPage}
<a href="{Permalink}">          
<img class="photo" src="{PhotoURL-500}" />
</a>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
<div style="text-align:center;" class="photoPost" >{Photoset-250}</div>
{/block:IndexPage}
{block:PermalinkPage}
<div style="text-align:center;">{Photoset-500}</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:PermalinkPage}
{/block:Photoset}

{block:Answer}
<div class="indexposts">
<div class="left" style="font-size:0.7em;">
<div style="padding-bottom: 5px; margin-bottom: 3px;{block:PermalinkPage}width: 440px;{/block:PermalinkPage}">
<div style="font-weight:bold;color:{color:link}">{Asker} asked: <span>{Question}</span></div>
</div>
<div style="color:{color:text};">{Answer}</div>
</div>
<div class="clear"></div>
</div>
{/block:Answer}

{block:Quote}
<div class="indexposts">
<h3 class="titlePost">"{Quote}"</h3>
{block:Source}
<div class="caption">- {Source}</div>
{/block:Source}
</div>
{/block:Quote}

{block:Chat}
<div class="indexposts">
{block:Title}
<h3 class="titlePost">{Title}</h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
<span>{Line}</span>
</li>
{/block:Lines}
</ul>
</div>
{/block:Chat}

{block:Audio}
<div class="indexposts">
<div class="albumImage left">
<img src="{block:AlbumArt}{AlbumArtURL}{/block:AlbumArt}" />
<div class="audioplayerout">
<div class="audioplayerinto">{AudioPlayerWhite}</div>
</div>
</div>
<div {block:IndexPage}class="right"{/block:IndexPage} style="{block:IndexPage}width:90px;{/block:IndexPage}text-align:left;font-size:0.7em;{block:PermalinkPage}margin-left:10px;{/block:PermalinkPage}">
{block:Artist}<b>{Artist}</b>{/block:Artist}<br>
{block:TrackName}{TrackName}{/block:TrackName}<br>
</div>
<div class="clear"></div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}

{block:Video}
{block:IndexPage}
<div style="text-align:center;" class="photoPost" >{Video-250}</div>
{/block:IndexPage}
{block:PermalinkPage}
<div style="text-align:center;">{Video-500}</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:PermalinkPage}
{/block:Video}

{block:PermalinkPage}
</div><!-- padding -->
{/block:PermalinkPage}

{block:PermalinkPage}
<div id="footerpost">
{block:NoteCount}<span>{NoteCountWithLabel} |</span>{/block:NoteCount}
{block:HasTags}<span>Tags: {block:Tags}<a href="{TagURL}">{Tag}.</a> {/block:Tags}</span>{/block:HasTags}
</div>
{/block:PermalinkPage}
{block:PostNotes}
<div style="text-align:right;">
{block:RebloggedFrom}
<div style="font-size:0.75em;margin-top:10px;">
(reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>)
(posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>)
</div>
{/block:RebloggedFrom}
</div>
<div id="postnotes">{PostNotes}</div>
{/block:PostNotes}

</div>
{/block:Posts}


{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:PreviousPage}<div id="prevPage"><a href="{PreviousPage}">«</a></div>{/block:PreviousPage}
{block:NextPage}<div id="nextPage"><a href="{NextPage}">»</a></div>{/block:NextPage}
</div>
{/block:Pagination}
{/block:IndexPage}

</div><!-- content -->


<div id="footer">Theme by <a href="http://rickerlr.tumblr.com/" target="_blank">rickerlr</a>, design by <a href="http://pillecotta.tumblr.com/" target="_blank">pillecotta</a>.</div>

</div><!-- container -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript"  src="http://static.tumblr.com/dbek3sy/4IKlvmzup/jquery.masonry.min.js"></script>
{block:IndexPage}
{block:IfInfiniteScroll}
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
{/block:IfInfiniteScroll}
<script type="text/javascript">
$(window).load(function () {
var $content = $('#content');
$content.masonry({
    itemSelector: '.posts',
    columnWidth: 190,
    isAnimated: true
    }),
$content.infinitescroll({
      navSelector    : 'div#pagination',  
      nextSelector   : 'div#pagination div#nextPage a', 
      itemSelector   : '.posts',
      loading: {
          finishedMsg: '',
          img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
      },
      bufferPx       : 250,
      debug          : false,
},
// call masonry as a callback.
function( newElements ) {
 var $newElems = $( newElements );
  $newElems.hide();
 // ensure that images load before adding to masonry layout
 $newElems.imagesLoaded(function(){
  $content.masonry( 'appended', 
        $newElems, true,
        function(){$newElems.fadeIn(300);} 
    );

 });
});
});
</script>
{/block:IndexPage}
<script type="text/javascript">
$(function(){
$("#content").fadeIn(500);
});
</script>

</body>
</html>

Luxury

Algumas características:

3 colunas

3 links personalizados

Personalizar as cores

Scroll personalizado

Preview | Instalar

Espero que tenham gostado e até ao próximo artigo!