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
<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>
Indo no seu layout, você poder ver as novas Widgets criadas com alternâncias entre 2 colunas e uma coluna.- 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.
- 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.
- Procure no Html de seu blog o seguinte código ( com Ctrl + F fica mais fácil achar )
<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;
- 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.
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>></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.
22 Comentários
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.
ResponderExcluirMuita coisa para eu conseguir fazer sozinha. Você sabe né? Bonitinha, mas uma ameba para determinadas coisas... Hahahahahahahahaha!
ResponderExcluirAgora vem cá: Por que meu blog não tá aqui no seu?
Humpf, tô de olho, hein?!
Beijocas! *
me ajude a colocar um formulario de contato no meu blog, por favor.
ResponderExcluirSALVO PARA SERVIR
ResponderExcluirOlha 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.
ola tudo bem ?
ResponderExcluirachei 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/
ja entendi tudo futuquei tudo até aprender !!!
ResponderExcluirmas agora falta uma coisinha :)
como eu coloco esse squema no post ?
seria um show postar com esse skema ! vlw !
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.)
ResponderExcluirtodo 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?
Pena digital,
ResponderExcluira parte do widgets do elemento de página onde se insere o código para colocar as notícias é a referente a HTML/JAVA
Edu, colocar esse esquema nos post é possível sim, em breve postarei aqui
ResponderExcluirhoje termino de fazer o blog mas queria postar !!! com esse skema que vc passo... tipo !
ResponderExcluirna 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 :)
olá boa noite! eu tb não entendi esSA PARTE...
ResponderExcluirVá 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?
Edu e Horácio fiz um update, explicando onde inserir o código.
ResponderExcluirVá em layout e adicione um novo elemento( Gadget) na widgets referente a HTML/JAVAscript
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....
ResponderExcluirFica 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á
gostaria tanto das minhas postagens nesso modo !!
ResponderExcluir:(
pagina inicial ta assim ja !
falta apenas redimencionar o blog para a tela inteira e as postagens no modo reportagens :)
Ai venho aprendendo muito coisa !!
ResponderExcluirmas gostaria de uma ajuda !
como coloca nesse esquema de resumo a quantidade de postages ?
vlw !!!
QUERIDO !
ResponderExcluirSOU 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
Ola!
ResponderExcluirAdorei 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!
Nuss manOOO =D
ResponderExcluireu 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
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.
ResponderExcluirCONFIRA: www.esteticaesaudemanaus.blogspot.com
Obrigado!
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.
ResponderExcluirCONFIRA: www.esteticaesaudemanaus.blogspot.com
Obrigado!
Como posso inserir mais colunas de Widgets? no seu modelo tem 2, gostaria de colocar 4 no meu template, tem como?
ResponderExcluirOlá, assim como o Matheus Ribeiro, gostaria de saber como configurar as colunas, tipo colocar 3 ou 4 ... :) Muito bom seu blog!
ResponderExcluirOs 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.