Template revista para o Blogger – blogspot ( Parte 1)

Você já deve ter se perguntado como é que eu fiz para transformar o layout do “Louco de Bom” num estilo revista. Se você quer ter um layout como este, siga este tutorial. Mas antes, veja algumas vantagens de ter um Template revista:

• A página carrega rapidamente, pois os posts recentes ocupam menos espaço; 
• O post mais recente ganha destaque;
• Todos os espaços são preenchidos, não ficando aquele “vazio”.

Antes de qualquer coisa, é importante que você tenha instalado o hack que resume os posts. Eu conheço dois hacks que cumprem essa função, um postado pelo Compulsivo e o outro pela Nospheratt.

Essa primeira parte é apenas uma tradução do tutorial da Amanda do Blogger Buster.

Antes de fazer as alterações, clique em “Baixar modelo completo”.

No painel do Blogger clique em Layout>Editar HTML  e verifique  se a caixa “expandir modelos e widgets” está ativada. Procure pelo seguinte código:

    <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
      </div>

Pode ser que o código do seu template seja um pouco diferente. Procure pela primeira linha, se você não achar procure a segunda e assim por diante.

Depois de </b:section> e antes de </div> adicione o seguinte código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes' >
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='magazine-right' showaddelement='yes' >
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>

Deve ficar assim:

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes' >
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='magazine-right' showaddelement='yes' >
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>
      </div>

Copie e cole antes da linha </b:skin>  o seguinte código:

#magazine-left {
  width: 45%;
  float: left;
}
#magazine-right {
  width: 45%;
  float: right;
}

Clique em visualizar, se estiver tudo certo, clique em salvar.

Pronto! Agora o layout tem as duas colunas que aparecerão apenas na home do seu blog.

No próximo post você vai aprender a mostrar os artigos recentes com o início do texto e a imagem ou apenas os títulos linkando os respectivos textos. Muito útil para quem posta as Playboy mais recentes. ;-)