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:
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:
Coloque acima de </head> o script:
e também o estilo para os posts:
Procure por este trecho do código:
e cole ACIMA dele:
acrescente ainda os trechos em vermelho entre os seguintes códigos:
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:
No meu exemplo, criei duas imagens de tamanho 700x190px, hospedei no TinyPic e deixei assim o código:
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:
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:
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:
Leia Mais
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:
Quem quiser conferir no original, o post é esse: Jugando con los posts.<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('post-<data:post.id/>');</script></b:if></b:loop>.......
</b:includable>
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"'>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:<style></b:if>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>
<b:if cond='data:blog.pageType != "item"'><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'>E desloque ele para baixo de :
<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>
<div class='post-body entry-content' expr:id='"post-" + 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'/>No próximo artigo trarei novas sugestões para personalizar os posts.
<div class='post-body entry-content' expr:id='"post-" + 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 != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span id='showlink'><a expr:href='data:post.url'> [ ... ]</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
