Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

18 junho 2009

Como criar uma pagina de abertura para o Blogger

Muitas pessoas me perguntam como dar um estilo diferente para  a primeira página do blog ou mesmo para fazer com que uma determinada postagem seja sempre a primeira a ser vista, como um texto fixo de apresentação e boas-vindas. Para fazer com que um texto fique fixo na primeira página do blog, publique-o normalmente, depois entre na página de edição do texto e programe uma data para o futuro, como mostra a a imagem abaixo:


Jogue a data para 2019  por exemplo e este sempre será o primeiro post visível em seu blog, encabeçando todos os outros que publicar. Para que apareça apenas este post na primeira página, vá em Configurações ->Formatação e programe para aparecer apenas uma postagem:



Para dar a primeira página um estilo diferente das páginas internas do blog, acrescente após a tag ]]></b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

aqui os estilos para a primeira página

</style>
</b:if>

O que faço aqui é o uso de uma condicional (em negrito) que determina que o estilo se aplique apenas à Home do blog.

Vamos tomar por exemplo um Template Mínima do Blogger (faça sempre experiências com um blog de testes, nada de ir direto modificando seu blog oficial, ok?) que está neste blog de testes; note que a primeira página está com as cores modificadas, a largura de outer-wrapper é maior e eu inverti o posicionamento das colunas: passei a sidebar para a esquerda e a coluna do post para a direita. Clique no título do post para ver a página interna, onde aparece o template Mínima sem modificações.

Para isso eu acrescentei os seguintes códigos:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

body{background: #111;}
#header-wrapper{width: 100%;height:120px; background: #303030; border:none;}
#header{border:none}
#outer-wrapper{width: 900px}
#main-wrapper{float: right; width: 600px;background: #f5f5f5}
#sidebar-wrapper{float: left; width: 280px; background: #303030}

body#layout #header-wrapper, body#layout #sidebar-wrapper, body#layout #main-wrapper{background: none}

</style>
</b:if>

o que está em negrito é o estilo para o painel Layout, pois se não especificarmos que não há background, as cores ou imagens escolhidas para a primeira página aparecerão alí também.

Este é apenas um exemplo bastante simples para que entendam como diferenciar a home das outras páginas do blog. Existem muitas possibilidades e aí é que entra a criatividade de cada um :)

É possível criar outros estilos para as  diferentes  páginas do seu blog  e eu recomendo que leiam este post do Bloggersphera, onde tenho aprendido muito sobre o assunto.

Artigos Relacionados

32 comentários:

Robson Assis disse...

...e bem quando eu achei que vc não podia quebrar mais o Wordpress! :)

Parabéns pelo blog.
bjs

F3N1X disse...

Muito, Legal está dica vc sempre surpreende. Parabéns, continue fazendo esse ótimo trabalho!!!

@YanvVictor disse...

Estava querendo muito esse tutrial parabéns!!!
Seu blog é excelente continue assim :D.

Krizalid Dash disse...

Excelente blog! Acabei de mandar um e-mail p/ você não tenho certeza se foi pq meu navegador anda meio 'zuado', enfim tenho um problema no meu blog http://japanvisualkei.blogspot.com/, quando clico em uma postagem do mesmo, as colunas ficam abaixo da postagem! ): , Como arrumo isso? Quanto custa me informar isso? E tipo a data também não aparece regularmente, como por exemplo o Black layout que tem aqui! Ficarei muito grato se me ajudar nessa!

Unknown disse...

Muito legal Ariane!
Vo tenta faze aki depois ;D

Mudando um pokin de assunto, pod me tirar uma dúvida?

Na hora de editar os botões de postagem mais antigas e recentes lah, eu tento por ">>" e não vai, ele não reconheçe, mais eu ja vi em alguns blogs isso...

Como faço pra colocar?

Bjos ;)

Ariane disse...

coloca no lugar:

& g t ;

mas coloca tudo junto, eu separei aqui pra não ser interpretado pelo navegagor.

Krizalid Dash disse...

Por favor Ariane, não esqueça de me dar essa ajuda, agradeço muito!

Unknown disse...

eu inverti o posicionamento das colunas: passei a sidebar para a esquerda e a coluna do post para a direita.

Ariane, era exatamente isto que eu queria fazer no meu blog. Só que inverso: "passar a sidebar para a direita e a coluna do post para a direita" no meu template.

Existe a possibilidade de voc~e me ajudar nisso? por exemplo: me indicando onde mexer no template, e em que códigos, para eu fazer isso.

OBS. no entanto, sei que por você ser uma pessoa bastante ocupada, eu não quero que isso seja muito trabalho para você, só se realmente você puder, pode?

Desde já te agradeceria bastante.

Ao menos aguardo uma resposta - se sim ou não.
Abraços

Lucas Rezende disse...

boa dica, mas agora eu tneho uma coisa que muitos procuram( eu tambem) e seria bom, como colocar códigos HTML em uma postage, eu fiz isso que vc ensinou de deichar uma postagem omo home, mas eu gostaria de colocar um menu que fiz que ficou bem legal, sóq ue ele é HTML, e gostaria de colocalo dentro dessa postagem tem como?

brenda mello disse...

Eu gostaria de saber como faz aquele quadro para aparecer uma mensagem logo quando abre o blog, mas que dá pra fechar T_T

Planet Motors disse...

Oi Ariane eu procurei no seu blog mais não encontrei nada sobre I-frames. Eu queria que você me ajudasse pq não tem ninguem melhor do que você quando o assunto e html blogger e etc.

Eu queria colocar um i-frames.

mais aonde eu coloco o codigo.

http://limine.net/deeply/goddies/i-frames

testes disse...

Oi Ariane tem como vc me ajudar com I-frame?

Eu preciso da sua ajuda para colocar iframe apenas para as postagem.

Eu tava vendo esse tutorial mais ele não está explicando detalhadamente.

Tem como você me ajudar?

Por exemplo aonde eu coloco os codigos do inframe.
Como deletar as tags de postagem.

Eu tava vendo esse tutorial nesse link

http://limine.net/deeply./goodies/i-frames/

mais está dificil de entender. Mais como eu aprendi muitas coisa com o seu blogger eu queria a sua ajuda.
Por favor!

Washington - PC e Consoles disse...

No meu blog aparece
"Sua postagem será automaticamente publicada em 27/06/16 às 06:22."
e não aparece na primeira pagina

Ariane disse...

Washington, bem observado, esqueci de colocar uma orientação: é preciso primeiro publicar o post normalmente, depois entrar na página de edição e ai alterar a data, ok? Vou acrescentar no tutorial, obrigada.

Luiz Otávio disse...

Novamente, muito obrigado, seu blog já me tirou milhares de dúvidas, parabéns, seu blog é o melhor.. abraço

None disse...

Muito criativa a idéia, como ninguém nunca pensou nisso antes?

Anônimo disse...

muito boa dica!

valeu pela idéia!

abraços.

Licca disse...

quando eu coloquei a data para 2019 apareceu lá no meu blog tb como se eu tivesse publicado o texto em: Sábado, 17 de Agosto de 2019
como fazer pra ficar a data atual?

GILSON DE MOURA disse...

Olá Ariane, vou testar a dica.

Mas, no meu caso, a data da postagem aparece na página.

Como contornar isso?

GILSON DE MOURA disse...

Olá Ariane, eu de novo

No caso, a postagem que sempre aparecerá deveria vir sempre com "data de hoje", ou seja, a data atual, a cada acesso.

É possível?

Anônimo disse...

Washington, bem observado, esqueci de colocar uma orientação: é preciso primeiro publicar o post normalmente, depois entrar na página de edição e ai alterar a data, ok? Vou acrescentar no tutorial, obrigada.

---------------------------------

AGORA QUE EU FUI LER ISSO! ^^
ESQUECE O PRIMEIRO COMENTARIO! OBG ARIANE VOCÊ É 10

Anônimo disse...

EU QUERIA SABER ISSO FAIZ MUITO TEMPO
AUSHUASUHSAUH
+ NUNCA AXEI COMO
PARABÉNS ARIANE
VLWWW

.Brainiac - www.brainiac.comule.com disse...

Great.

Muito Bom.
Congrats.

Raphael disse...

Boa dica, mas no meu blog nao seria interessante usá-la.

Fabiana disse...

o que seria "aqui o estilo para a primeira pagina" ??
Agradeço desde já a sua resposta.
Parabéns pelo blog [2]

Anônimo disse...

Olha, o pessoal destes blogs de dicas para blogs estão de parabéns. O que eu tenho aprendido com vocês...

Esta dica então. Dei um estilo bacana ao blog da empresa que criei.

Obrigado pessoal por compartilhar suas sabedorias conosco.

Estão todos de parabéns.

jorge disse...

Seu Blog é muito bom. Parabéns

jorge disse...

Parabens Ariane. Seu site é muito bom.Para quem está começando como eu, tem muitas dicas boas

Anya disse...

Ariane,
Antes de mais nada, parabens pelo blog e pela consideração que você demonstra ter para com seus leitores.
Meu comentário não tem exatamente a ver com o teor de seu artigo (pelo qual agradeço, assim como por todos os outros que tenho lido), mas creio ser de interesse para quem usa a internet, 'blogando' ou não. Ao terminar a postagem, você indica um site que, ao acessar, constatei ter sido avaliado como sendo de "má reputação", por parte do complemento WOT (Web of Trust) que instalei recentemente em meu PC. Você saberia alguma coisa a este respeito? Não me consta que eu tenha tido problemas acessando este site...
Bem, obrigada mais uma vez, e um abraço
Angela

Ariane disse...

Anya obrigada pelo aviso. Na verdade o bloggersphera mudou de endereço, agora é : http://www.bloggersphera.com.br/2009/03/bif-belse-blogger-condicionais.html

Já alterei no post, obrigada :)

Anônimo disse...

Como editar o titulo de um blog?

Rubens (Adesivax) disse...

Nossa muito bom isso... Agora só falta minha criatividade para fazer o tal post de abertura rsrsrsrsr

Postar um comentário

Os comentários são moderados.