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

06 março 2009

Resumo na página inicial com posts de cores diferentes

O título é grande mas o procedimento é até simples. O resultado é este: Post 01

Antes de tudo, vai o conselho amigo da titia:
Não faça experiências com seu blog oficial! Crie um blog de testes, coloque nele uns quatro posts Lorem Ipsum (uma encheção de linguiça que soa latim), uma imagem em cada post (acima dos textos) e brinque à vontade.
Primeiro vamos mudar as medidas do template (use o Mínima). Procure por #Outer-wrapper e mude o width para: 990px; Mude #header-wrapper width:100%.Mude ainda #main-wrapper width: 700px;

Agora vamos ao hack que alterna as cores/background dos posts. Este hack foi criado por JMiur e é uma variação do hack que faz uma contagem dos comentários.Procure por este trecho do código e insira o que está em vermelho:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Coloque acima de </head> o script:
<script type='text/javascript'>
//<![CDATA[
function ContarP(cual) {
var resto;
resto = contadorPosts % 2;
if (resto == 0)
document.getElementById(cual).className='entradaPar';
else
document.getElementById(cual).className='entradaImpar';
}
//]]>
</script>

e também o estilo para os posts:
<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>

Procure por este trecho do código:
<b:loop values='data:posts' var='post'>

e cole ACIMA dele:
<script type='text/javascript'>var contadorPosts=0;</script> <!-- contador a cero -->

acrescente ainda os trechos em vermelho entre os seguintes códigos:
<b:loop values='data:posts' var='post'>
.......
<b:if cond='data:blog.pageType != "item"'>
<!-- no ejecutamos la función en las páginas individuales -->
<script type='text/javascript'>
contadorPosts=contadorPosts+1;
ContarP(&#39;post-<data:post.id/>&#39;);
</script>
</b:if>
</b:loop>
.......
</b:includable>
Quem quiser conferir no original, o post é esse: Jugando con los posts.

Visualize: se os posts aparecerem em cores diferentes (branco e preto), você fez tudo corretamente. Salve.
Bem, agora vá até o blog da Rô e leia este post onde ela ensina a colocar um hack de resumo automático de posts, com miniaturas das imagens utilizadas. Eu realmente adorei este hack e foi o mesmo que usei no Clean Magazine. Para hospedar o script, a própria Rô mostra alternativas e dentre elas, estou usando o Dropbox e até agora não tenho do que me queixar.

Só para constar, no hack para o resumo dos posts, no meu exemplo, usei estes valores:
summary_noimg = 450;
summary_img = 400;

Não se esqueça: quando colocar o hack para resumo dos posts, mantenha a configuração para os posts pares e ímpares, que passei acima:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

Muito bem, depois de instalar o resumo automático, vamos dar estilo aos posts.O trecho que nos interessa para determinar as cores e/ou imagens que usaremos, é este:
<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>

No meu exemplo, criei duas imagens de tamanho 700x190px, hospedei no TinyPic e deixei assim o código:
.entradaImpar {height:190px;background: url(http://i41.tinypic.com/2im64m.jpg) no-repeat top left; padding: 20px 35px;}
.entradaPar {height:190px;background: url(http://i40.tinypic.com/1z1rcqh.jpg) no-repeat top left; padding: 20px 35px;}

Note que além de acrescentar o link das imagens, estabeleci uma altura fixa para os resumos (height:190px) e um afastamento do texto para a borda da imagem de 20px para o topo e base e 35px para as laterais.

Mas podemos ir além disso. Podemos acrescentar outros estilos para os nossos resumos e para tanto é preciso acrescentar o seguinte código em vermelho:
<b:if cond='data:blog.pageType != "item"'>
<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>
</b:if>
Tudo o que for colocado entre as linhas em vermelho aparecera apenas na página inicial, não afetando em nada as páginas individuais. Sendo assim, deixei o meu código desta maneira:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.entradaImpar {height:190px;background: url(http://i41.tinypic.com/2im64m.jpg) no-repeat top left; padding: 20px 35px;}
.entradaPar {height:190px;background: url(http://i40.tinypic.com/1z1rcqh.jpg) no-repeat top left; padding: 20px 35px;}
.post-footer{display:none}
.post{margin: 0 auto; padding: 0; text-align:justify}
h2.date-header {display:none}
</style>
</b:if>

Em roxo: determinei que todo o conteúdo de footer não apareça na página inicial;
Em verde: eliminei o estilo para margin e padding que existe no template Mínima para os posts, aproximando-os e eliminando a borda da base. Justifiquei o texto;
Em azul: determinei que a data não apareça na página inicial.

Para terminar, eu queria que o título do blog ficasse dentro da moldura que criei para os posts e não fora dela, como naturalmente deve ficar. Para alterar a posição do título, procure este trecho:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
E desloque ele para baixo de :
<div class='post-body entry-content' expr:id='&quot;post-&quot; + data:post.id'>

Lembre-se:

Estas modificações afetarão apenas a página inicial. Para criar estilos para as páginas individuais, é preciso modificar os códigos .post e .post-body do Mínima.

Quando for acrescentar o hack para resumos automáticos, não se esqueça de manter o hack para posts pares e ímpares, que passei primeiro. O código completo, com os dois hacks, e o deslocamento do título, deve ficar assim:
<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id='showlink'><a expr:href='data:post.url'> [ ... ]</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
No próximo artigo trarei novas sugestões para personalizar os posts.

Artigos Relacionados

31 comentários:

OCP disse...

Excelente! :D

Era mesmo o que eu estava procurando para o meu blogue que estou alterando o template.

Mais uma vez, Obrigado. :)

J. Neto disse...

Mais um excelente hack! Gostei!

Particularmente, tenho algumas dificuldades em fazer mudanças no meu blog, pois entendo pouco de htmls, xmls e afins (e nem tenho tanto tempo assim como gostaria para aprender, pois trabalho muito na minha 'real life') mas, para não chatear ninguem, pois sei que nem todos os blogueiros também tem tempo para nos ajudar (e concordo também quando dizem que eles não tem obrigação de fazer isso), eu procuro aprender tudo na marra mesmo.

Um dia eu faço um blog como quero e chego lá. Afinal, vocês não conseguiram, né! :)

Ariane, um forte abraço e, novamente, muito obrigado pelas dicas! Nem preciso repetir que considero o seu blog "o melhor" blog de toda a blogosfera nacional.

:)

Ariane disse...

OCP, fico contente em poder ajudar, mesmo.

J.Neto, eu é que só tenho a te agradecer, pois seus comentários são sempre muito generosos e positivos e me dão uma alegria enorme. Abraços!

R.Wesley disse...

oi ariane dis oque tu acho do meu blog

visaodatv disse...

amo esse blog toda vez que meu template da problema em que blog eu penso? templatesparanovoblogger.
se prescizo de um template em que blog eu penso?
templatesparanovoblogger
se quero personalizar meu blog em que blog eu penso?
templatesparanovoblogger.
Parabens pelo seu blog. O melhor de todos

planos de saude disse...

Obrigada !!!!!!

♫Luana♪ disse...

Olá, Ariane.
estou aqui quebrando a cabeça com essa código (que parece fácil) criei um blog de testes e estou usando a template minima, consegui fazer quase tudo, mas as cores dos posts não mudam de jeito nenhum...

Anônimo disse...

Ariane,
eu inseri um cabeçalho no formato gif, pela forma normal do blog. mas agora n consigo remover, qria saber se vc pode me ajudar?
Já tentei modificando o codigo, mas n resolveu.
grato, desde ja, pela resposta.

Alex

Zelia disse...

Oi ariane
estava no blog da Debora (Dicas para iniciantes...)e estava ensinando como bloquear uma foto, estou tentando mas nao estou conseguindo fazer fiz do jeito q ela explica mas não consegui, vc pode me ajudar?
obrigada
bjos
Zelia

D.Anselmo disse...

olá, tipo eu achei muito legal o codigo, e queria por no meu blog, porem deu uns pipino muito loco...

eu fiz nesta "copia" do meu blog http://dabliudabliudabliuponto.blogspot.com/

e deixo ele todo 'esquisitão'

o link real do meu blog é http://www.leiloeilolhe.blogspot.com/

saberia me dizer onde eu errei?
Obrigado.

R.Wesley disse...

Ariane praque serve esse blogroll

B1 Atual Caruaru disse...

Parabéns Garota,
Seu blog está simplismente demais,
Me ajudou muito na construção de varios Blogs.

Muito Obrigado.

Rita Pereira disse...

Antes de mais, parabéns pelo belo trabalho desenrolado aqui! Sou nova "nestas coisas" e as dicas que encontro aqui têm-me ajudado muito.

Este post foi realmente o que eu andava à procura. Mas tenho outra dúvida: como fazer scroll com as mensagens postadas?
Vi neste sítio -> http://marcosbessa.no.sapo.pt/
Não e' um blog, mas no hi5 tb da' para fazer (eu fiz isso no meu hi5 para encurtar a caixa dos comentários).
Sera' que da' para fazer com as mensagens postadas no blog?

Cumprimentos,
Rita Pereira

okaida disse...

Preciso de Ajuda, quando eu tentei fazer
as postagem se multiplica como arruma..

The Degeneration of Soul disse...

Olá, gostaria de saber se tem como restringir um post por senha.

Isabela Colucci disse...

Ariane,

Tô com um problema aparentemente bobo, mas acho que só a "Titia" pode me ajudar.

Preciso selecionar quais posts serão exibidos na Home. A ordem deles eu tô controlando pela data/hora de postagem, mas não consigo "ocultar" um post sem usar esse artifício.

Atualmente, na base do 'jeitinho brasileiro' eu puclico o post com uma data antiga e defino o número de posts exibidos na home de forma que só apareçam os que defini com data mais recente.

Acho que a solução não é nada elegante, além de dar um trabalho ferrado para manter a organização dessa 'zona'.
Penso que, assim como fazemos menu com os marcadores, deve haver alguma forma de definir quais posts aparecem na home (talvez até usando os próprios marcadores), mas como?


Ps.: Se realmente for fugir com o circo, me avisa que eu vou junto! ;-)

Ariane disse...

Isabela, se você quer mostrar um número x de posts que fiquem fixos na página inicial, basta determinar este número no painel e nestas 3 postagens colocar uma data bem para futuro, tipo 2030. As outras publicações não precisa alterar, pode publicar normalmente, já que não aparecerão na inicial mesmo. Deu pra entender?

qdo o circo passar por aqui te aviso :D

abraços!

disse...

Oi Ariane, que pena que só dá pra usar no mínima. Não tem como usar no Template Blue? Já mudei muitas vezes de template , não queria ter de mudar de novo.

Abraços e parabéns vc é a melhor no assunto.

disse...

Como colocar opção pra outras línguas, como vi que vc tem aqui no canto esquerdo superior.

Luís Alves disse...

Eu não encontro em nenhum lugar um código que aumente o número de caracteres dos títulos das postagens para blogger.

ALGUÉM PODE ME AJUDAR

Meu e-mail: xpluis@gmail.com

Luís Alves disse...

Como aumento o número de caracteres dos títulos das postagens??????

Anderson Jr disse...

Olá Ariane eu queria saber como botar esse hack num dos templates do Templates para VOCÊ o listen azul?

Aguardo respostas

Taillard disse...

Ariane
Rainha meu menu simplesmente sumiu e levou junto dos postes.
Nao sei mais o que fazer com aquele template que eu amo muito do www.vivasualoucura.com
Por favor me de uma luz rainha!
Beijos

Ariane disse...

Tilard, você fez alguma modificação recente e depois dela os posts sumiram? Fico aguardando

CAFFE DO LIVRO disse...

Ariane
Não sei rainha o que fiz a verdade é que sumiram todos e a galera esta desesperada,e me deixando maluca querendo lerem as postagens.
Tem o topico de exercicios de 21 dias que ta todo mundo doido!
Por favor rainha ajude-me !
Eu proponho-me a pagar sem problemas porque sei que é problema com conflitos de scripts ou eu mesma que errei em tudo.
Abraços e grata mais uma vez querida é que amo aquele template que você,me fez na medida certinha.

Ariane disse...

Taillard, me envia um convite pra entrar no blog, vou tentar descobrir o que aconteceu

Taillard disse...

Jura?
Nossa amiga valeu mesmo!

Juniper Goblinglitter disse...

Ola Ariane, tudo bem?
Conheci um blog em que o restante da URL era .net e nao .blogspot.com com fazer isso?
beijos

Anônimo disse...

> coloque nele uns quatro posts Lorem Ipsum
> (uma encheção de linguiça que soa latim),

Esta site é a melhor, ele suporta várias línguas e codificaçãos de caracteres: Lorem Ipsum

Carol disse...

Pode me dar uma ajuda? A primeira, nao consegui fazer, nao consigo usar o leia mais, nao deu certo, e o link que esta na sua postagem nao funciona. A segunda, e que a data do meu template (e uma agenda) nao aparece, fica aparecendo no lugar undefined. Obrigada!

Marcos Bicalho disse...

Olá Ariane
Eu uso um template seu, se não me engano o OGGI
e ultimamente eu percebi que a medida que vou colocando novos posts, ele vai reduzindo os resumos na página principal
Eu queria que ficasse por padrão 9 resumos ou 12 na página inicial. Como faço isso?
Se possível, dá uma olhada e me ajude.
http://marcosbicalho.blogspot.com/

Postar um comentário

Os comentários são moderados.