Twitter Delicious Facebook Digg Stumbleupon Favorites More

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.

Agora vamos por a mão na massa. 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. Dúvidas? Pergunte nos comentários.

9 comentários:

Pé de Chinelo disse...

Olá, Boa Tarde!
Parabéns, seu blog é bastante útil.

Preciso de sua ajuda, se possível, estou tentando configurar o Athemia no meu blog e não consigo, o título do meu não aparece e etc... http://www.jornalgiramundo.blogspot.com
Pra te dizer a verdade, não entendo nada de blog, nem sei se estou teclando de forma q vc entenda.

Anônimo disse...

Valeu a dica, acabei de seguir suas instruções e consegui-formato de revista.
Muito obrigado.

estudiodicas disse...

Muito boa sua dica, e gostei muito do seu blog parabéns.

Carla disse...

não consegui, fia como vc ensinou e sempre dá erro: diz que a formatação é inadequada, me ajudem Please.......

mja disse...

Boas, vi o seu blog, gostei e achei bastante útil, parabens e até à proxima.

Vera Regina disse...

Estou recebendo, em minha cx de correios do Gmail, comentários que deveriam estar somente aqui - não são relacionados ao meu blog. O último que recebi foi:
mja disse...
Boas, vi o seu blog, gostei e achei bastante útil, parabéns e até a proxima. 30 de agosto 2009 08:02

Sani Hadek disse...

William,
Bendito sejam voce e o seu blog!!! Estou iniciando meu segundo site, mas com um template mais moderno, e eu quebrei a cabeca, procurei nos sites em ingles, no criador do template (o que eu uso eh uma versao do wordpress para o blogger) e nada. Ja tava aqui injuriada! Achei sua dica, testei meio com medo, mas afinal se desse errado era so eliminar o widget. Deu certo! Estou nas nuvens!
Agora, so uma coisa: da um trabalhao, hein??? Preciso fazer esse processo para cada nova postagem, se eu quiser que as atuais fiquem em destaque na pagina principal????
Valeu!
Abracos
Sani

PRÓ-SAÚDE UFRGS disse...

no meu não aparece as imagens..

Anônimo disse...

Olá essas digas me ajudaram muito.. mais eu não consigo achar o HTML/JAVAscript no Gadget...Por favor me ajudem, onde acho isso??
obrigada

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates