Saiba Como:...é feito..." Estilo Revista para o Blogger"

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  "



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

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,   

...e, 

faz necessário , também,

preencher na parte em negrito 

e respeite as aspas ( "" ) 

o  seguinte código :

<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 diminuí-la. 

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

fonte e créditos:

dicasplugins