Sendo o estilo magazine, ou estilo revista, um dos modelos preferidos para os templates do Blogger, o design ou layout da página inicial do blog diferente das páginas internas dos posts, cai como uma luva. Seria complicado eu montar um tutorial do tipo passo a passo para mostrar como fazer isso, pois as variações são tantas (1 sidebar, 2 sidebars, header em colunas, footer em colunas, com "leia mais", sem "leia mais"), que eu passaria um mês só escrevendo tutoriais nesse sentido.
O mais importante, portanto, é entender (e é muito fácil) como usar as condicionais e onde colocar os estilos. Vou usar um exemplo, mas não se prenda a ele. Seja criativo para deixar o blogger com seu jeito.
A) Antes de mais nada, uma pitadinha básica de HTML e tags do Blogger
Para escrever uma folha de estilos, você precisa dizer ao navegador que aquilo é... uma folha de estilos (CSS). O navegador vai entender isso quando você inicia sua CSS com a tag
<style type="text/css">e fecha com a tag
</style>.Agora veja o código fonte de seu blog (Ctrl U ou Exibir - Código Fonte). Depois das meta content, link rel, title, etc e antes de Blogger Template Style, você verá uma linha assim:
<style id='page-skin-1' type='text/css'><!--
E lááá no final dos estilos (depois dos estilos do footer e antes de
</head>) tem uma linha:
--></style>
É o mesmo código que mencionei acima, mas o Blogger identifica essa folha de estilos com uma id='page-skin-1'.
No código (aba "Editar HTML") de seu template você não consegue enxergar, porque está escrito de outra maneira. Vamos lá ver como está a abertura da tag style antes de Blogger Template Style:
<b:skin><![CDATA[
e o fechamento antes de
</head>:
]]></b:skin>
Então, estamos entendidos? Tudo o que estiver entre
<b:skin> e</b:skin> será a mesma coisa que estivesse entre <style type="text/css"> e </style>, e só deverá conter códigos CSS. Se você for colocar tag HTML b:if aí dentro, não vai dar certo.Para poder usar as tags condicionais (aprenda sobre elas lendo Widgets diferentes para cada página), vamos criar novas folhas de estilo com as tags
<style type="text/css"> e </style>.B) Códigos CSS (estilos) que devem ficar entre <b:skin> e
</b:skin>
Teoria legalzinha, mas como eu faço páginas diferentes? - você deve estar perguntando...
Simples assim:
- Estilos para todas as páginas dentro das tags
<b:skin>e
</b:skin>do Blogger; - Condicional b:if (SE) indicando que você quer os estilos a seguir em todas as páginas menos as internas dos posts;
- Estilos para as páginas - menos as internas dos posts - entre as tags
<style type="text/css">e</style>; - Tag b:else (SENÃO) indicando que os estilos a seguir deverão ser aplicados quando não obedecerem a condicional anterior;
- Estilos para as páginas internas dos posts entre as tags
<style type="text/css">e</style>; - Fechamento da tag b:if.
Primeiro vamos definir quais serão os estilos que deverão continuar entre as tags
<b:skin> e </b:skin>.O exemplo que vamos usar é um bem simples, para você começar a treinar. Depois você poderá ficar mais atrevido e variar os estilos da maneira que desejar.
Faça um Blog de Testes com o Template Mínima com as medidas principais ampliadas para 860px (Header, Outer-Wrapper e Footer). O Header será simples e igual em todas as páginas, o Outer-Wrapper com mesmas medidas em todas as páginas e Footer simples em todas as páginas.
Na página inicial e nas outras páginas index (categorias e arquivos) o Main-Wrapper fica à esquerda com 410px e Sidebar-Wrapper à direita com duas sidebars de 210px cada.
Na página dos posts, tem apenas o main-wrapper com 840px, sem sidebar.
Começando a mexer no Blog de Testes:
- Depois de criar o blog de testes, escrever um ou dois posts, alguns comentários e acrescentar alguns widgets na sidebar, altere as medidas principais como mencionei acima: Header, Outer-Wrapper e Footer para 860px;
- Apague as medidas do Main-Wrapper e da Sidebar-Wrapper e deixe o restante, ficando assim:
/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 860px; margin: 0 auto; padding: 10px; text-align: $startSide; font: $bodyfont; } #main-wrapper { float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } - Agora vamos criar uma sidebar extra no código do template, não precisa marcar a caixa "Expandir Modelos de Widgets". Localize o código da Sidebar-Wrapper e deixe da seguinte maneira, colocando um número para a primeira sidebar e acrescentando o código para a segunda sidebar:
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar1' preferred='yes'> <b:widget id='Label1' locked='false' title='Marcadores' type='Label'/> <b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/> <b:widget id='Image1' locked='false' title='Imagem' type='Image'/> <b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/> </b:section> <b:section class='sidebar' id='sidebar2' preferred='yes'/> </div>
- Visualize o template para ver se está tudo ok com os códigos.
C) Códigos (condicional e estilos) para as páginas index
Depois de adicionada a segunda sidebar, vamos colocar os estilos para a página inicial, de categorias e arquivos, ou seja todas as páginas, menos as internas dos posts.
- Abaixo de
]]></b:skin>, acrescentamos a condicional, que traduzida é algo como Se o tipo de página for diferente da página interna dos posts:
<b:if cond='data:blog.pageType != "item"'> - Em seguida colocamos a tag
<style>e os estilos:
<style type='text/css'>
#main-wrapper {
width: 410px;
}
#sidebar1 {
width: 210px;
float: left;
}
#sidebar2 {
width: 210px;
float: right;
}
</style>
D) Código (continuação da condicional e estilos) para as páginas internas dos posts
Não podemos continuar sem fechar a tag
</style> porque precisamos colocar uma nova tag HTML (b:else - SENÃO) que não pode ficar dentro da CSS.Após fechar a folha de estilos para a página inicial, colocamos a continuação da condicional:
<b:else/> e abrimos mais uma folha de estilos para as páginas internas:<b:else/>
<style type='text/css'>
#main-wrapper {
width: 840px;
}
</style>
</b:if>
Fechamos a folha de estilos com
</style> e a condicional com </b:if>.O código completo fica assim:
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#main-wrapper {
width: 410px;
}
#sidebar1 {
width: 210px;
float: left;
}
#sidebar2 {
width: 210px;
float: right;
}
</style>
<b:else/>
<style type='text/css'>
#main-wrapper {
width: 840px;
}
</style>
</b:if>
Condicional no conteúdo
Definimos portanto, com esses procedimentos, quais estilos desejamos para as páginas index e quais serão para as páginas internas.
Agora precisamos informar ao navegador, também usando as condicionais, sobre o conteúdo.
O único conteúdo nesse nosso exemplo que não se repetirá em todas as páginas é o das sidebars.
Localizamos então o código de nossa Sidebar-Wrapper e colocamos a condicional:
<b:if cond='data:blog.pageType != "item"'> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar1' preferred='yes'> <b:widget id='Label1' locked='false' title='Marcadores' type='Label'/> <b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/> <b:widget id='Image1' locked='false' title='Imagem' type='Image'/> <b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/> </b:section> <b:section class='sidebar' id='sidebar2' preferred='yes'/> </div> </b:if>
Fácil, não é?
- Se você quiser colocar vários blocos de sidebars em um tipo de página e um bloco só em outro, mantenha todas as sidebars dentro de um único container e distribua os blocos dentros das "section". Isso reduz código e dá menos problema na hora de usar este hack;
- Caso você deseje colocar as sidebars flutuando de um lado em um tipo de página e mudar a flutuação em outro, coloque os códigos de float nos estilos dentro das condicionais. Só é necessário colocar a flutuação dentro de skin se você não usar sidebar nas páginas internas, ou a(s) sidebar(s) irão escorregar para debaixo da área de postagens;
- Neste exemplo, como não há sidebar nas páginas internas, a condicional no conteúdo foi colocada para todo o container da sidebar (antes de div id='sidebar-wrapper). Altere o local, dependendo do que será mostrado nas index e nas iternas;
Dúvidas? Claro.. hehe
Fique à vontade para perguntar!
Comentários: 19
Boa tava esperando essa dica, valeu mesmo Rô ;D
ja li ta bem didatico quando tiver tempo e a preguiça me larga eu faço =D
Obrigado Rô, bjs!!
existe tags do blogger que ao aceitas dentro do CSS , eu ja testei
:**
Realmente Rô só falta desenhar! Descobri hoje seu blog e seus tutoriais são muito bem explicados e fáceis de acompanhar.
Assim qualquer um pode ser blogueiro mesmo!
Parabéns pelo trabalho e continue assim.
Muito Bom post
Segui o tuto direitinho, mas as "side" tem ficado abaixo da main
http: //testeindex.blogspot.com/
Fabio: Vi seu blog de testes mais cedo e prá mim estava certinho! Agora não sei se depois que você postou o comentário conseguiu acertar as sidebars ou se é problema de navegador. Qualquer dúvide, me fala de novo!
jogoscelular: Bem-vindo e obrigada! Eu tento.. :) Às vezes tenho a sensação de que escrevo demais... hehe
Gama: As tags são aceitas. Nem sempre funcionam como devem.. hehe
Thiago: Este post foi especialmente prá você e agora vai ficar com preguiça?? :P Bom, minha listinha de dívidas está diminuindo.. :)
Abração, meninos!
Será que dou conta de fazer isso... Eu sempre falo que vou sossegar e acabo mexendo no layout do blog. Bem, passei apenas pra agradecer pelos tutoriais bem escritos e explicativos. Beijos, moça!
Rô, você não pensa em disponibilizar esses templates de teste para download. Creio que seja uma excelente forma de divulgação. Você pega o Mínima, customiza e posta para os preguiçosos baixarem...rs.
Bauru: Pois é, está na minha lista de dívidas disponibilizar um template desses, estilo revista. Só está faltando tempo. Mas você sabe que a Rô tarda mas não falha... ahahaha
Obrigada e beijão!
Rô,tem como fazer com que as postagens recentes não estejam na página inicial?Eu queria fazer uma página inicial estática onde não se mostraria postagens diretas como no UOL,G1 e demais.Assim as postagenas só apareceriam quando solicitadas pelos respectivos links.Obrigado desde já!
Santos: Esse é o projeto da nova versão do Coralina.
Tenho recebido muitas mensagens com essa mesma dúvida, então, nada melhor que demonstrar, né?
Abração!
Essa é a próxima dica que irei testar no meu "supertemplate" personalizado usando as dicas dos meus "amigos" e de minha amiga RÔ.
Rogério: Já fui fuçar! :)
Eu gosto do Mínima. Conheço ótimos blogs que usam o Mínima e são um sucesso. Vou citar 2 exemplos: Hoje vou assim e Hoje vou assim off.
O Google adora templates limpinhos... hehe
Beijão!
Buenas, Rô:
Instalei o template Coralina I e adorei. Só gostaria de saber se há uma maneira de reduzir a quantidade de elementos na sidebar quanto abrir uma página interna? Agradeço tua atenção. O blog é http://paineldosconcursos.blogas.com.br/ e o navegador em que testei foi o Firefox.
Oi Leandro!
Veja este post: Widgets diferentes em cada páginaUse as condicionais para determinar quais widgets você quer em cada página.
Veja na Categoria Condicionais outras dicas úteis a respeito.
Abraços!
Olá,visito o seu blog para aprender um pouco.Criei um blog:ateliedataika.blogspot.com.Consegui fazer meu próprio back e tentei inserir um menu horizontal.Até aí consegui.Ainda que tenha modificado e feito uma pequena bagunça.Enfim...O problema é que não cosngio fazer com que os links funcionem.Por favor,poderia me ajudar?Quero começar a postar e dependo disso,já que desejo que fique tudo organizado.Desde já agradeço.
Ana Cristina
oi tudo bom...primeiro parabéns pela postam,você é genio mesmo...
é super fácil (espero que eu feito certo)eu sempre faço tudo no meio da fogueira msmo online sem medo de errar pq tenho poucos leitores...
quem aprende usar as tags condicionais ñ terão dificuldade alguma de aplicar os estilos...pocha vida é muito divertido meu blog tá o Ó DO BOROGODÓ tá parecendo um softwere(rs)...eu tiro meu chapeu pra qualquer um mais Essa Rô é sem palavras... vô continua acompanhando ai ,já dei um gourmet na nova tag e parece deliciosa(RS)..brigadão ñ vô me esquece de vc quando me perguntarem como persolizar o blog e encontra bons lay... a melhor do blogger "sem duvidas"vlw bjs
Ola, amigo.
Meus parabens pelo teu trabalho.
Não endendi nada, mas já é um começo.
Gostaria de saber como fazer um blogue de teste.
Tenho procurado e não encontro.
É preciso começar a entender.
Um abraço.
Jader Resende
oi Rô montei minha pagina assim oh:
esse fraguemento de codigo está embaixo de b:skin...ficou ótimo c/ eu disse vc é a melhor msm...só que tenho umproblema c/ ie 8 que ñ consigo resolver sozinho ...é o seguinte(quando abro a pgn do post q tem a medida de 849 ela desse uns px e ñ alinha c/ a barrinha lateral e o header...isso ocorre somente nas pgns internas mais largas...qual sera o erro hein pode me dar uma luz???
b:if cond='data:blog.homepageUrl != data:blog.url'
style type='text/css'
#main-wrap1 {width:849px;float:$startSide; margin:0px 0 0;padding:0px 0 0 0px ;
color:$mainTextColor;font-size:97%;line-height:1.5em;
}
#main-wrap2 { float:$startSide;width:849px;padding-top: 0px!important ;
}
#main { width:849px;padding-top:30px;
}
.main .Blog {margin: 5px ;padding:0px;width: 98%;background:#eff7ff;
}
.post-body {margin:0px;background:#eff7ff;
}
.titulos {display:block;width: 100%; font-size:1.0em;padding:12px 0 0 0px;
margin:0px ;list-style:none;font-style:bold;padding-$startSide:0px;
background:#eff7ff!important;border-top:1px solid #ffffff;
}
/style
b:else/
style type='text/css'
#main-wrap1 {width:552px;float:$startSide;margin:0px 0 0;padding:0 0 0px ;
color:$mainTextColor;font-size:97%;line-height:1.5em;
}
#main-wrap2 { float:$startSide;width:552px;padding-top: 0px ;
}
.main .Blog {margin: 5px ; padding:0px;width: 97%;background:#ddeeff;
}
.post-body { margin:1px;background:#ddeeff;
}
/style
/b:if
b:if cond='data:blog.pageType == "archive"'
style type='text/css'
#main-wrap1 { width:552px;float:$startSide;margin:0px 0 0;padding:0 0 0px ;color:$mainTextColor;font-size:97%;line-height:1.5em;
}
#main-wrap2 { float:$startSide;width:552px;
padding-top: 0px ;
}
#mainsidebarbig-wrap1 {width:552px;float:$startSide ;margin:0px 0 0 ;padding:0 0 0 px;margin-left:150px ;color:$mainTextColor;font-size:97%;line-height:1.5em;
}
#mainsidebarnew-wrap1 {width:552px;float:$startSide ;margin:0px 0 0 ;padding:0 0 0 px;margin-left:150px;color:$mainTextColor;font-size:97%;line-height:1.5em;
}
#main { background: url("") repeat-y ;padding-top:30px;width:552px;
}
.main .Blog {margin: 5px ; padding:0px;width: 97%;background:#ffffff;
}
.post-body {margin:5px;background:#ffffff;
}
.titulos {display:block;width: 100%; font-size:1.0em;padding:12px 0 0 0px;
margin:0px ;list-style:none;font-style:bold;padding-$startSide:0px;
background:#ffffff!important;border-top:1px solid #d9e6f7;
}
/style
/b:if
b:if cond='data:blog.url == "http://wwwskate4fun.blogspot.com/search?max-results=200"'
style type='text/css'
#main-wrap1 {width:849px;float:$startSide;margin:0px 0 0;padding:0 0 0px ;
color:$mainTextColor;font-size:97%;line-height:1.5em;
}
#main-wrap2 { float:$startSide;width:849px; padding-top: 0px ;
}
#main { width:849px;padding-top:30px ;
}
.main .Blog {margin: 5px ;padding:0px;width: 98%;
background:#ffffff ;
}
.post-body {margin:5px;background:#ffffff ;
}
.titulos {display:block;width: 100%; font-size:1.0em;padding:12px 0 0 0px;margin:0px ;list-style:none;font-style:bold;padding-$startSide:0px;background:#ffffff!important;border-top:1px solid #d9e6f7;
}
/style
/b:if
consegui resolver o alinhamento das divs ...a pgn mas larga usei a codicional exibir somente n pgn de postagen somente sem o else (sem a seguência para outra pgn)...
Então ficou assim...paginas mais largas editadas separadamente...
segunda chamada para a condiconal e inclui o display none para banir a sidebar de ves na pgn larga que tava matendo a distâcia teimozamente .
é c/ vc disse tem que ir experimentado ai vai ficando mais ousado heheh...
bom acho q fiz um reboliço mas consertando os erros imagino q deve ter fikado tudo certo...
Ae Rô seus comentaristas também ajuadam bastante espero q os meus coments ñ tenham efeito contrário
valeu ai hein é muito divertido este hack (muahahahahah!!!!)
Postar um comentário
Para deixar o link da sua última postagem coloque este código:
Feed dos Comentários<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu-link-do-último-post">Título do Post</a></em>
Quando você estiver testando algum hack e tiver dúvidas sobre ele, informe:
1 - O endereço do blog onde você está testando (ou instalando o hack);
2 - O navegador que você está usando (Firefox, Opera, IExplorer, etc).
Leia sobre a política de Comentários!
Eu gosto de conhecer meus leitores! Se você usar OpenId ou perfil fechado, assine o comentário com seu nome e me deixará muito contente!
Bem-vindos e obrigada pela visita!
Blog This!