23/10/2008

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.

Comentários
22 Comentários

22 Comentários:

brilhanteideia disse...

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.

Crinha Leite disse...

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

: Nome: SALVO PARA SERVIR disse...

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

estimulanet.com disse...

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.

Edu Personal Training disse...

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/

Edu Personal Training disse...

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 !

Pena Digital disse...

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?

Descharth disse...

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

Descharth disse...

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

Edu Personal Training disse...

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

Horácio Leal ° disse...

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?

Descharth disse...

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

Fernanda Maria disse...

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á

Edu Personal Training disse...

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

Edu Personal Training disse...

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

vlw !!!

Sonia Barros disse...

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

Kaju disse...

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!

Bruno Máximo disse...

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

Leonardo Paiva disse...

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!

Leonardo Paiva disse...

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!

Matheus Ribeiro disse...

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

Bia disse...

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

Postar um comentário

Descharth
-->

  ©Estimulanet.com - Todos os direitos reservados.

Template by Dicas Blogger | Topo