Postagens Tutoriais Blogger Vanessa S.
Aplicar estilos somente a página inicial do blog – personalizar a home
Para quem gosta de personalizar template, afim de deixá-lo com um estilo próprio, já deve ter notado em alguns blogs, que a página inicial é diferente das outras páginas (interna,marcadores e arquivo).
Só que a grande maioria, se depara com uma certa dificuldade, ou não sabem como fazer com que sua página inicial se apresente de forma diferente das demais páginas.
Hoje vou ensinar como definir estilos e personalizar os posts apenas na página inicial.
Para isto será necessário o uso e aplicação de condicionais e você poderá definir as classes(.) ou id(#) que deseja ocultar ou não na sua Home.
Você já conferiu as condicionais no artigo: Ocultar Elementos em Página Específica e já viu que é possível definir, através de uma condicional, em quais páginas os widgets/gadgets ou qualquer outro ítem apareçam e já conferiu também a condicional para aplicar estilos ás páginas estáticas.
Agora veremos como aplicar a condicional para a página inicial e nela definir o que ficará oculto, e quais os estilos que seus posts deverão apresentar.
[dica]Todos os estilos que serão demonstrados neste tutorial serão aplicados somente á pagina inicial, e sua utilização requer um conhecimento, no mínimo intermediário em html e css.[/dica]
Como existem muitas variações de estilos a serem aplicados á página inicial,e não há uma maneira de ensinar individualmente, até porque cada um tem um gosto diferenciado, o que farei aqui, é explicar a vocês cada elemento, para que vocês possam entender e escolher o que ficará oculto ou como seus posts deverão aparecer na página inicial do seu blog.
Portanto, vocês mesmos irão usar a criatividade e aplicar os estilos de acordo com o gosto de vocês.
Antes de continuar a leitura deste artigo, é necessário que você já esteja familiarizado com a área de postagem do seu blog, recomedo que leia:
Personalizando a área do Post – (Parte1)
A condicional para página inicial é esta:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
esta condicional deve ser fechada corretamente e a tag de fechamento dela é:
</b:if>
Portanto, tudo o que você incluir dentro desta condicional será mostrado apenas na página inicial do seu blog.
Entendendo os elementos do post:
Nos templates padrões antigos do Blogger (Minima) e na grande maioria dos templates a área de post está representada por estas tags abaixo:
.post { /* --espaço ocupado pela postagem--*/
.post-body { /*--corpo do post--*/
Existe uma pequena diferença no código da área de post nos novos templates designer de modelo, a tag que representa o espaço ocupado pela postagem se apresenta desta maneira:
.post-outer {/* --espaço ocupado pela postagem--*/
Neste elemento você pode definir cores, bordas, aplicar o efeito de Bordas arredondadas, efeito sombreado, e até mesmo colocar uma imagem de fundo (background) diferente para o espaço ocupado pela postagem apenas da página inicial.
Se caso você optar a inserir uma imagem de fundo para a área de postagem na página inicial, você deverá estipular a largura(width) e a altura(height) da imagem que for utilizar.
Uma dica:
Se, por exemplo, você vai utilizar uma imagem no tamanho 300×300, deverá incluir os valores referente a altura e largura da área de post, dentro da tag que representa o espaço ocupado pela postagem para que a imagem ocupe a área toda, desta forma:
background: url(ENDEREÇO-DA-IMAGEM) no-repeat; widht:300px; height:300px;
O titulo do post está representado por:
.post h3 –> templates antigos
ou
h3.post-title –> designer de modelo
Neste elemento você também pode acrescentar imagem, borda, tamanho da fonte, cor da fonte, alinhamento do texto etc.
Todos os estilos CSS que você definir dentro desta linhas de códigos, serão aplicados automaticamente a todos os posts no blog.
Mas se você incluir estilos a estes trechos dentro da condicional para a página inicial,eles serão aplicados somente na página inicial, diferenciando-se dos demais posts (páginas internas, marcadores e arquivo).
Tudo o que você quiser ocultar em sua página inicial, deverá estar contido no código, as classes(#) ou id(.) e sempre separarando os elementos por vírgulas.
O comando “display:none” serve para ocultarmos elementos.
Agora que você já entendeu, vou mostrar um exemplo do código dentro da condicional, para você ver como deverá aplicar no seu blog. Não vou aplicar estilos, apenas vou destacar cada elemento informando o que cada um representa. Os estilos deverão ser aplicados por você.
No painel do Blogger, acesse o menu “modelo ? editar html”,clique em ‘expandir modelo de widget’, e procure pela tag: ]]></b:skin>
A condicional para a home e o código CSS deverão ser colados logo ABAIXO dela, definindo os estilos á sua escolha para cada elemento contido no código:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post {
<!--coloque aqui os estilos que você quer que sejam aplicados ao espaço ocupado pelo post-->
}
.post-body {
<!--coloque aqui os estilos que você quer que sejam aplicados ao corpo do post-->
}
.post h3{
<!--coloque aqui os estilos que você quer que sejam aplicados ao titulo do post-->
}
.post h3 a, .post h3 a:visited, .post h3 strong{
<!--coloque aqui os estilos que você quer que sejam aplicados ao titulo do post como link ativo e visitado-->
}
.post-footer {
<!--coloque aqui os estilos que você quer que sejam aplicados ao rodapé do post-->
}
</style>
</b:if>
Se estiver usando o Designer de modelo:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post-outer {
<!--coloque aqui os estilos que você quer que sejam aplicados ao espaço ocupado pelo post-->
}
.post-body {
<!--coloque aqui os estilos que você quer que sejam aplicados ao corpo do post-->
}
h3.post-title{
<!--coloque aqui os estilos que você quer que sejam aplicados ao titulo do post-->
}
h3.post-title a, h3.post-title a:visited, h3.post-title strong{
<!--coloque aqui os estilos que você quer que sejam aplicados ao titulo do post como link ativo e visitado-->
}
.post-header {
<!--coloque aqui os estilos que você quer que sejam aplicados a linha abaixo do título do post-->
}
.post-footer {
<!--coloque aqui os estilos que você quer que sejam aplicados ao rodapé do post-->
}
</style>
</b:if>
Lembrando que se você quiser ocultar algum elemento em sua página inicial, deverá incluir no código, as classes(#) ou id(.) seguidos do comando “display:none”.
Veja exemplo:
Ocultar o rodapé do post:
.post-footer{display:none;}
Se você quiser que os estilos sejam aplicados não APENAS na Página Inicial, mas também na de Marcadores e de Arquivos, substitua:
<b:if cond='data:blog.url == data:blog.homepageUrl'>por:
<b:if cond='data:blog.pageType != "item"'>
Desta forma os estilos definido por você aparecerão também quando o leitor clicar nas páginas dos marcadores e de arquivo.
Olá!! Excelente postagem!
Mas fiquei com uma dúvida:
Para que os estilos sejam aplicados não APENAS na Página Inicial, mas também na de Marcadores e de Arquivos, substitua: por
Funcionou direitinho. As páginas de Marcadores e Arquivos passaram a ter os estilos da Inicial. Só que quando clico no título da postagem, o meu Header perde os estilos.
Há alguma outra frase de código para aplicar os estilos à TODAS as páginas e postagens do blog?
Muito obrigado, Marcelo.
Vc deve ter feito algo errado, e infelizmente, não tenho como saber e nm como ajudar.
Olá, gostaria de saber como faz pra aplicar estilos em uma pagina de marcador especifico, já tentei em varios tutoriais e não consegui aplicar em um marcador apenas!
Olá tudo bem Vanessa. Nossa eu só queria lhe dar os parabéns. Este blog é o melhor que eu já tive a oportunidade de ler. Tudo o que eu precisei eu encontrei aqui. Parabéns você faz um excelente trabalho, continue assim. Bjos
Não entendi nada
Olá, estou com um problema aqui no meu blog, tipo:
as postagens da pagina inicial ficam sem formatação, eu qeria saber como faço pra deixar normal.
OBS: Estou usando o template “GameFusion”
Help me, pls!
Por favor, peço que leia os Termos de Uso do Blog.
Obrigada!
Li este post mas creio que ele não se aplica ao que eu preciso.
Gostaria de fazer com algumas postagens não aparecesse na página inicial. No blog icebreaker tem um post onde se propõe a fazer isto, mas não consegui fazer e em praticamente todos os comentários os pessoal reclama que também não conseguiu.
Sei que tem o "método" de se colocar uma data antiga, mas eu gostaria de fazer isso como postagens com datas recentes.
Download No Stress
Lamento, mas eu não tenho como te ajudar, pois deve ser algo relacionado ao seu template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.
Show as dica e essa dica é quase o que eu procurava.
Pode me ajudar na seguinte dúvida:
Estou fazendo o menu do blog usando os marcadores, mas toda postagem que eu faço em um determinado marcador, está indo também para a página inicial. Eu não quero que apareça nenhum post de marcador na página inicial, pois quero colocar uma introdução em flash ou banner, etc..
Então lendo esse post, tentei fazer por analogia, para não mostrar os marcadores na página inicíal que foi a seguinte
.labels{display:none;}
Mas
1)Não sei onde colocar essa condicional, testei depois da tag que abre a home, tag "a", exemplo mas nao deu certo
2)Além de não saber onde colocar a condicional para que não apareça as postagens dos marcadores na pag inícial, eu tb não tenho certeza se esta correto o código pra ocultar os marcadores na home, que foi .labels{display:none;}
Pode me ajudar?? como e onde coloco a condicional para ocultar as postagens dos marcadores da página inicial ?????
Obrigado!
Video Galeria X
Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.
Esqueci de dizer que o modelo é o ( Espetacular. lmt )
olá Cláu estou com problemas com um slide que apliquei ao meu blog coloquei a condicional e o fechamento no local exato ela não funcionou depois tentei a msm condicional escrita de forma diferente mais com o msm
efeito não funcionou voltei para essa ai funcionou por 3 dias mais ou menos achei que estava resolvido que nada estava colocando botão de próximo e anterior e não deu certo e eu voltei para o modelo que eu avia salvo a condicional já não estava funcionado mais pois o slide agora aparece na homepage e nas páginas de postagens.Fiz um teste agora enquanto estava escrevendo minha duvida, isso esta igual para postagens populares mais pra marcadores esta perfeito.
veja o local onde apliquei os códigos:
depois de:
antes de antes de:
muito obrigado por ler minha duvida!
gostaria que vc me ajudasse, não tenho a menor idéia do que esta acontecendo.
Sensacionais as suas explicações.
Está de parabéns por tudo, principalmente pelo jeito tão fácil que nos passa essas informações tão complicadas.
Grande abraço,
Bruno.
ZMH
Isto não é efeito, é imagem mesmo.
Oi Clau,
Antes de tudo, dou-lhe os meus parabéns pelo seu excelente e sempre útil blog.
Sou blogueiro há 4 anos e este ano decidi iniciar um projecto com um templete personalizado.
O seu blog tem sido muito útil nesta fase de construção do meu blog (http://www.novaditadura.blogspot.com)
Gosto imenso do efeito "bordas folhadas" da sua página inicial. Gostaria, por isso, de saber se é possível dar-me uma dica de como deixar a minha página inicial com esse adorável efeito? Como faço? quais são os códigos?
Obrigado pela amável disponibilidade e tudo de bom pra vc, porque bem merece!
bjs
Vanity Fair
Vc pode alterar na hora que vai publicar diretamente no editor de postagem do Blogger. É só vc escolher o tamanho que quer a imagem (pequena, média ou grande)
Se não der certo, tenta verificar se existe algum valor de width e height no trecho CSS, em:
.post img{
se tiver, apaga!
Clau, eu amo seus templates, dicas, tudo que tenho no meu blog foi graças a sua ajuda, porém como o meu site hospeda muitas imagens e vídeos(vídeos muitos são do youtube), queria saber em que área posso alterar o tamanho da imagem que fica nas postagens, acho muito pequena, eu já fiz algumas modificações mas essa parte aonde fica isso eu não encontrei! me ajude por favor!
Bjos!
Olha o meu blog: http://www.mortesemassacres.com
Lukas
Procure pelo tutorial: Hack Leia Mais Resumo de Postagem Automática com imagens.
E se quiser aplicar estilos á página inicial, neste post acima já está explicando como fazer.
Clau,tô com um probleminha na home.
O estilo que os posts aparecem ocupa a home toda tô dizendo que na home os posts se apresentam por inteiro e os demais tambèm,eu queria aprender a deixar a home com o estilo igual o do seu blog,aparecendo somente o trecho e não o post inteiro,você entende? Serà que tem algum tutorial com relação a isso? obg!
Olá Clau, primeoro gostaria de parabenizar você pelo tutorial, agora … Eu estava analizando que na sua página inicial todas as postagens são do mesmo tamanho, eu tentei adicionar uma imagem no meu blog mais as postagens são cada uma de um tamanho diferente e aí as imagens ficam disproporcionais, teria como você me falar se existe algum código ou truque para deixar todas as miniaturas de post do mesmo tamanho ?
OBS: Eu utilizo o código para ocultar o post, o "leia mais" …
Gosto muito das suas dicas aproveito sempre que preciso de uma parabens e continuem sempre nos deliciando com o seu conhecimento !
[]´s
Olá Clau, belo post, bastante funcional. Tenho uma pergunta que talvéz não se encaixe nesse post mas tem haver com customização css, gostaria muito de aprender como aplicar estilos nas bordas dos vídeos do youtube, se for possível, seria legal por uma borda de cor diferente ou até outro tipo de borda, que combinasse com o site ou blog, sei lá! Obrigado por todas as dicas do seu blog.
alinestar.com:
Obrigada! Fico feliz que tenha gostado 😀
Muito legal Clau,amei o tutorial!
Arrasou como sempre!
Beijos