Tutorial: Estilo Revista para o Blogger

Vamos fazer uma modificação no código HTML do Template para o Blogger de modo a deixá-lo no famoso e tão desejado formato de revista.

Esse tutorial é baseado na tradução do tutorial do Blogger Buster que achei no Louco de Bom  e modificado por estimulanet.com para caber 2 colunas de Widgets ocupando 45% cada uma do box da postagem e + 1 coluna ocupando 100% do box da postagem, de forma que você pode alternar o tamanhos das apresentações e quebrar a monotonia do layout.

Antes de editar o modelo, é recomendável salvar uma cópia do mesmo. Para isso entre no Painel do Blogger clique em Layout > Editar Html > Baixar modelo completo que fica logo acima da caixa de Upload. Dessa forma caso as alterações não te agradarem ou não funcionarem, você pode restaurar o seu modelo antigo.

 

..."   Entre no Painel do Blogger vá em Layout > Editar Html . Certifique-se que a caixa "   Expandir modelo de Widget"   está desmarcada.

1 - Procure no Html de seu blog o seguinte código (Ctrl + F)

<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>

(Caso não esteja exatamente dessa forma, procure por algo semelhante. Procure pela pela

</b:section> que esteja dentro da <div id='main-wrapper'>)


2 - Após localizar o código cole o próximo código logo após </b:section> e antes de </div>

<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>

<b:section class='sidebar' id='magazine-center' showaddelement='yes' >
<b:widget id='Text53' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-left2' showaddelement='yes' >
<b:widget id='Text54' locked='false' title='Test Title 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='magazine-right2' showaddelement='yes' >
<b:widget id='Text55' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-center2' showaddelement='yes' >
<b:widget id='Text56' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-left3' showaddelement='yes' >
<b:widget id='Text57' locked='false' title='Test Title 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='magazine-right3' showaddelement='yes' >
<b:widget id='Text58' locked='false' title='Test Title 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>

3 - Agora vamos inserir o código CSS (visual) da nossa homepage revista. 


  Localize a tag </b:skin> e cole logo acima dela o seguinte código:

#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}
#magazine-center {
width: 100%;
float: left;
}
#magazine-left2 {
width: 45%;
float: left;
}
#magazine-right2 {
width: 45%;
float: right;
}
#magazine-center2 {
width: 100%;
float: left;
}
#magazine-left3 {
width: 45%;
float: left;
}
#magazine-right3 {
width: 45%;
float: right;

4 - Indo no seu layout, você poder ver as novas Widgets criadas com alternâncias entre 2 colunas e uma coluna.





4 - Pronto , agora salve seu modelo, mas ainda não terminamos. É preciso aprender a editar as manchetes e a home do blog. Deve ter ficado com novas widgets como mostra a foto

Como configurar o Layout Revista

Bem, agora vamos colocar a quantidade de postagens na página Inicial. Devemos lembrar sempre que as postagens que estiverem na home do blog sempre vão ficar acima das Novas Widgets criadas. Caso queira ter postagens na página inicial, surgiro que use os Posts resumidos.


"  Mude a quantidade de postagem da página inicial em Painel > Configurações > Fomatações e mude . No meu caso eu coloquei em zero, dessa forma a minha home só possui as widgets das notícias."






"  Ainda não acabou. Falta editar as notícias nas Widgets.


Vá em layout e adicione um novo elemento( Gadget)  na widgets referente a HTML/JAVAscript. Nele você coloca a seguinte código que você tem que preencher na parte em negrito e respeite as aspas ( ""   ) 

<a href="LINK DA SUA POSTAGEM">_TÍTULO DA SUA POSTAGEM</a>
<p></p>
<p><a href="_LINK DA SUA POSTAGEM"><img border="0" style="border: 0px none ;" alt="" width="85" src="_LINK DA SUA IMAGEM" height="85" align="left"/></a></p>_RESUMO do TEXTO [...]
<p><a href="LINK DA SUA POSTAGEM">Leia Mais&gt;&gt;</a></p>
<p></p>

width="   85"   

e 

height="  85"  

são atributos de largura e altura respectivamente, podem ser mudados esses valores para aumentar a foto ou diminui-la. Mas deve-se ficar atento para que o tamanho da width (largura) não exceda o box do post.

"   Pronto seu layout está em formato de revista."