Template Estilo Revista para Blogger Blogspot

Quem andou acessando o Estimulanet notou uma mudança drástica na Home (Pagina Inicial). Estamos com o Layout em formato de revista.
Muitos sonham com um layout desse formato e poucos sabem que ele é simples de ser feito e pode ser colocado em qualquer template.



Bem, chega de delongas e vamos ao que interessa: O Tutorial foi baseado na tradução do tutorial do Blogger Buster que achei no Louco de Bom ( O Link do louco de bom é um cache do Google, para depois ele não dizer que o copiei ) e modificado por mim 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.




Template para novo Blogger Blogspot em formato de revista

  • Antes de editar o modelo, é recomendável salvar uma cópia do mesmo, para isso entre no Painel do Blogger vá em Layout > Editar Html > Baixar modelo completo que fica logo acima da caixa de Upload. Dessa forma caso as alterações não te agradem ou não funcionem, você pode restaurar o seu modelo antigo.
  1. Agora vamos ao Template Revista, Entre no Painel do Blogger vá em Layout > Editar Html . Certifique-se que a caixa Expandir modelo de Widgest está desmarcada.
  2. Procure no Html de seu blog o seguinte código ( com Ctrl + F fica mais fácil achar )
<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'>)

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>
  • Agora 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;



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




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



Calma que ainda não acabou. falta ainda aprender a como 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>


ATENÇÃO PARA ESSAS DICAS : Algumas imagens podem não aparecer. Isso normalmente ocorre se você usa o endereço de imagem hospedada no próprio blogger e ela for muito grande. A melhor solução é hospedar a imagem fora do blogger em um host que possibilite redimenciona-la. Tipo o Photobucket.

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.
Por exemplo usar uma width="410" em uma widget de 405px fatalmente fará a imagem ficar fora do box, o que no Firefox pode ser as vezes imperceptível, mas que no Internet Explorer certamente irá desconfigurar seu template totalmente


Pronto seu layout está em formato de revista. Vale lembrar que você deve sempre editar a página inicial pois ela não é automática.

Postar um comentário

22 Comentários

  1. brilhanteideia - estimulanet.com - parabéns pelo belissímo post e iniciativa, conte com meu apoio pra divulgar suas idéias. um brilhante abraço e Sucesso.

    ResponderExcluir
  2. Muita coisa para eu conseguir fazer sozinha. Você sabe né? Bonitinha, mas uma ameba para determinadas coisas... Hahahahahahahahaha!

    Agora vem cá: Por que meu blog não tá aqui no seu?

    Humpf, tô de olho, hein?!

    Beijocas! *

    ResponderExcluir
  3. me ajude a colocar um formulario de contato no meu blog, por favor.

    ResponderExcluir
  4. SALVO PARA SERVIR

    Olha o melhor formulário de contato que conheço é o do http://kontactr.com bastante fácil de usar. Basta se cadastrar e pegar o código.

    Vale lembrar que ele disponibiliza e tipos de códigos.

    o primeiro Embed Widget que eu não Recomendo

    O segundo Embed Widget - AJAX - Que é o recomendávável e você ainda pode customizar as cores.

    E o terceiro: Buttons , que são os banners simples que direcionam para o formulário.

    ResponderExcluir
  5. ola tudo bem ?
    achei super legal esse post !
    mas to com um problema !

    não vou mecher no blog até solucionar !

    baixei um template da internet fiz up dele !

    e agora é só adicionar os menus e pronto !

    meu problema é !!!

    no firefox os menus aparecem de forma normal !

    mas no internet explorer ficar mo zoniado quando aparece !!!

    como posso resolver isso ??
    vlw !
    http://edupersonaltraining.blogspot.com/

    ResponderExcluir
  6. ja entendi tudo futuquei tudo até aprender !!!

    mas agora falta uma coisinha :)

    como eu coloco esse squema no post ?

    seria um show postar com esse skema ! vlw !

    ResponderExcluir
  7. Cara, não consegui entender a última parte (Calma que ainda não acabou. falta ainda aprender a como editar as notícias nas Widgets.)
    todo esse último parágrafo eu nao entendi, não sei onde vou para inserir sua dica (Vá em layout e adicione um novo elemento. Nele você coloca a seguinte código que você tem que preencher na parte em negrito e respeite as aspas ( ""))
    Poderia me explicar mais detalhadamente?

    ResponderExcluir
  8. Pena digital,

    a parte do widgets do elemento de página onde se insere o código para colocar as notícias é a referente a HTML/JAVA

    ResponderExcluir
  9. Edu, colocar esse esquema nos post é possível sim, em breve postarei aqui

    ResponderExcluir
  10. hoje termino de fazer o blog mas queria postar !!! com esse skema que vc passo... tipo !

    na pagina principal eu coloco esse skema. fica blz ! eu vou usar como tema sabe !
    tipo uma breve noticia ai coloco um saiba mais e o cara vai clicar e ir pro post !!!
    e la no post eu gostaria de mudar, de vez ficar akela telinha de postagem eu postar igual a tela principal saco ?
    pra mim isso ia ficar um show e meu problema resolvido :)

    ResponderExcluir
  11. olá boa noite! eu tb não entendi esSA PARTE...

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

    pODERIA ME EXPLICAR?

    ResponderExcluir
  12. Edu e Horácio fiz um update, explicando onde inserir o código.

    Vá em layout e adicione um novo elemento( Gadget) na widgets referente a HTML/JAVAscript

    ResponderExcluir
  13. Ola..tenho uma pergunta que acho meio importante, pode ser que eu esteja fazendo algo errado ou tenha me escapado algo, mas ja li e reli varias vezes....
    Fica tudo certo mas o problema é que ao clocar lá em quantos posts deve aparecer dai coloco 0 como você fala mas aparece a mensagem "Nenhuma Postagem Correspondente a Sua Pesquisa-Mostrar todas as postagens"
    Como eu tiro isso? como faço pra que não apareça?
    Espero que possa me ajudar.
    obrigada desde já

    ResponderExcluir
  14. gostaria tanto das minhas postagens nesso modo !!
    :(
    pagina inicial ta assim ja !
    falta apenas redimencionar o blog para a tela inteira e as postagens no modo reportagens :)

    ResponderExcluir
  15. Ai venho aprendendo muito coisa !!
    mas gostaria de uma ajuda !
    como coloca nesse esquema de resumo a quantidade de postages ?

    vlw !!!

    ResponderExcluir
  16. QUERIDO !

    SOU NOVATA EM TERMO DE BLOG, GOSTARIA DE SABER COMO FAÇO PARA ADD. CALENDÁRIO, CONTADORES ESSAS COISINHAS BONITINHAS QUE NÃO CONSIGO, GOSTARIA TB. DE SABER COMO É QUE POSSO POSTAR REVISTAS, E COLOCAR POSTAGENS DO LADO DIREITO DA TELA, POIS AS MINHAS FICAM DO LADO ESQUERDO E QUERIA UTILIZAR OS DOIS E TB MUDAR A SETINHA PARA OUTROS MODELOS.

    DESDE JÁ AGRADEÇO E AGUARDO SUA RESPOSTA.

    ABRAÇOS,

    SBARROS

    DESDE JÁ AGRADEÇO E AGUARDO SUA RESPOSTA.

    SONIA BARROS

    ResponderExcluir
  17. Ola!

    Adorei as dicas para o blogger em formato revista. Mas não consegui fazer com que o meu blogger ocupe a tela inteira. Poderia me ajudar?

    Obrigada!!!
    Abraço!

    ResponderExcluir
  18. Nuss manOOO =D
    eu tava loko pa coloca mais coisa no meu blog mas não tava querendo muda o Template..
    vc salvo minha vidaa \o/
    ahAUHAUAHUAh

    Abraaço e Parabens pelo Blog

    ResponderExcluir
  19. Olá parabens pelo site e excelente tutorial, vou incrementar o meu . Aproveito para informar que tem o template clinic diponivel na net que faz isso automaticamente, porem mesmo assim vou fazer essa melhoria , afim de ficar ainda mais dinamico.

    CONFIRA: www.esteticaesaudemanaus.blogspot.com

    Obrigado!

    ResponderExcluir
  20. Olá parabens pelo site e excelente tutorial, vou incrementar o meu . Aproveito para informar que tem o template clinic diponivel na net que faz isso automaticamente, porem mesmo assim vou fazer essa melhoria , afim de ficar ainda mais dinamico.

    CONFIRA: www.esteticaesaudemanaus.blogspot.com

    Obrigado!

    ResponderExcluir
  21. Como posso inserir mais colunas de Widgets? no seu modelo tem 2, gostaria de colocar 4 no meu template, tem como?

    ResponderExcluir
  22. Olá, assim como o Matheus Ribeiro, gostaria de saber como configurar as colunas, tipo colocar 3 ou 4 ... :) Muito bom seu blog!

    ResponderExcluir

Os comentários são moderados, isso significa que ao clicar em enviar, eles não são publicados imediatamente, e sim após serem analisados.