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

30 julho 2009

isFirstPost - um estilo diferente para o primeiro post


Uma nova condicional do Blogger chamou minha atenção dois meses atrás, mas só agora tive tempo de fazer alguns testes com ela: a condicional isFirstPost.

A tag <b:if cond='data:post.isFirstPost'> é uma condição para o primeiro post visível de uma página, seja a página inicial ou de arquivos/marcadores. Percebendo isso, vislumbrei a possíbilidade de destacar o primeiro post da home (coisa que queria muito  há bastante tempo, o que me levou a fazer as experiências mais escabrosas com o pobre Mínima antes da nova tag :D ), diferenciando-o dos demais.
Para que vocês possam entender logo do que estou falando, segue 3 exemplos com os testes que fiz nos últimos dias:

Exemplo 1
Exemplo 2
Exemplo 3

Vou ensinar primeiro o método mais simples para destacar o primeiro post. Quero lembrar antes que qualquer experiência deve ser feita sempre em um blog de testes, nunca faça nenhuma modificação diretamente em seu blog oficial.

Vá em Editar HTML e clique em Expandir Modelo de Widget. Procure pelo seguinte trecho do código:

<b:include data='post' name='post'/>

Substitua o trecho pelo seguinte código:
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<div id='first'>

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

<div class='first-body'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>

<b:else/>
<b:include data='post' name='post'/>
</b:if>

<b:else/>
<b:include data='post' name='post'/>
</b:if>

O que eu fiz foi criar uma nova div (#first) e colocá-la sob duas condicionais, isFirstPost e homepageUrl, ou seja, ela só é válida para o primeiro post da home page. Dentro da div First inseri o título e o link para os comentários.
Fora das condições especificadas, os posts devem aparecer normalmente.

Para dar estilo a First, acrescente no CSS (acima da tag ]]></b:skin>):

#first{ /* aqui especificações para a div first */
margin: 0px 0px 10px 0px;
padding:0px;
float:left;
background: #111;
border: 1px solid #1b1b1b;
}

.first-body{/* Aqui especificações para o text do post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align:justify;
color:#ccc;
}

#first h3{ /* Aqui estilo para o título do post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 19px;
padding: 0px 0px 4px 0px;
font-family: 'Palatino Linotype';
text-align:center;
line-height:1.4em;
color: #f5f5f5 }

#first h3 a, #first h3 a:visited{color:#fff} /* cor do título */
#first h3 a:hover{color:#fff} /* cor do título no estado hover */

.first-body img{ /* estilo para as imagens */
padding:10px;
background:#fff;
border: 1px solid #333}

#first .comment-link{ /* estilo para o link comentários */
float:right;
padding: 0px 5px 15px 0px}

Este é o procedimento básico e o resultado é este: Exemplo Básico.

Partindo do princípio básico, mostrarei como conseguir o efeito dos 3 exemplos que coloquei no início do post:

Exemplo 1

Obs: Para este exemplo trabalhei com as seguintes medidas:
#Outer-wrapper width:990px;
#main-wrapper width: 780px;
#sidebar-wrapper width: 200px;

No exemplo 1, apliquei o hack de resumo automático de postagens, menos no primeiro post. Para conseguir este efeito é preciso que primeiro você aplique o código para os resumos automáticos, que você encontra neste post do BloggerSphera. O arquivo JavaScript que deve ser hospedado, pode ser colocado diretamente no código do template da seguinte maneira:

<script type='text/javascript'>
//<![CDATA[
// <!-- Summary Posts with thumbnails for Blogger/Blogspot version 3.0 (C)2008 by Anhvo -->
// <!-- http://www.vietwebguide.com/ -->
// <!-- See the tutorial (in portuguese) to install on http://bloggersphera.blogspot.com -->
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Feita a instalação do hack de resumos automáticos, vá em Editar HTML, clique em Expandir Modelo de Widget e faça os passos para o Exemplo Básico e salve as modificações. Agora coloque os estilos para os resumos na página inicial, abaixo de ]]></b:skin>:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>

.post{
width:185px;
height:240px;
margin:0px 10px 23px 0px;
float:left;
overflow:hidden;
padding:10px;
line-height:1.4em;
font-size:13px;
color: $textcolor;
background: url(http://i31.tinypic.com/2llg4jr.jpg) no-repeat top left;}

.post h3{
margin:0px;
padding:0px 0 5px 0px;
line-height:1.4em;
color:$titlecolor;
letter-spacing:1px;
border:none;
font-size: 15px;
background: url(http://i25.tinypic.com/ra2lub.jpg) repeat-x bottom left }

.post h3 a, .post h3 a:visited, .post h3 strong{
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
border:none; padding:0 0 0}

.date-header{display:none}

.post img{ border:none}

.post-body{padding: 0px; margin:0px;line-height:1.4em;}

#showlink{padding: 5px 10px 0 0; float:right;}

</style>
</b:if>

Não se esqueça de especificar um número baixo de caracteres para os resumos, ou o texto sairá do espaço. Neste exemplo eu usei a seguinte numeração:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 220;
summary_img = 120;
img_thumb_height = 100;
img_thumb_width = 100;
</script>


Agora, acima da tag ]]></b:skin> coloque o estilo para o FirstPost, como no Exemplo Básico, mas com width:540px;

#first{
width: 540px;
margin: 0px 15px 10px 0px;
padding:0px;
float:left;
background: #111;
border: 1px solid #1b1b1b;
clear:both
}

Agora, para que o post-footer (tudo o que vai no rodapé do post, como nome do autor, marcadores, etc) não apareça nos resumos, procure o seguinte trecho:

<div class='post-footer'>

e acrescente logo abaixo dele:
<b:if cond='data:blog.pageType == &quot;item&quot;'>

e para fechar a condicional, procure por este trecho e acrescente o que está em vermelho:

<div class='post-footer-line post-footer-line-3'>    
........

</div>
</b:if>
</div>
</div>
Para que as datas só apareçam nas páginas internas e não interfiram com os resumos, busque por este trecho e acrescente o que está em vermelho:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>

Neste Exemplo 1 os posts aparecerão resumidos na Home Page, na lista de Marcadores e na lista de Arquivos.


Para que este post não se estenda demais, amanhã explicarei como proceder para obter o efeito do Exemplo 2 e Exemplo 3.

Artigos Relacionados

29 comentários:

Bruno Rocha disse...

Excelênte dica Ariane! Sempre trazendo conteúdos interessantes para os úsuarios do blogger. Adoro o seu blog parabéns.;)

Raiana Reis disse...

Olá Ariane! Gostaria de saber se esse modelo de template black q postou como exemplo e foto do post é um dos seus modelos disponíveis, pois procurei e não encontrei, mas achei lindo. Beijos

Áurea disse...

Olá Ariane,

Muito legal esta opção do firt post né. Tenho estudado uma forma de aplicá-lo em algum template novo.
Valeu pela dica. Agora fica bem mais fácil.
Mudando um pouco de assunto.
Gostaria de saber uma coisa. O que você acha dos botões social bookmarks? Acha que são úteis e necessários aos posts? Estou fazendo um post sobre o assunto e vi que você não os tem aqui, por exemplo. Apenas o Twitter e o Feed. Acha os 2 suficientes?
Bjks

Ariane disse...

Bruno, que bom que gostou, eu mesma achei a idéia muito boa.

Raiana fiz o template apenas para servir de modelo, ainda não está terminado. Vou terminar ele primeiro e depois coloco para download.

Áurea, nunca achei estes botões úteis, talvez até sejam, mas nunca me fizeram falta. Acho que o post fica enfeitado demais e o retorno não é significativo.

windsurfmexico.com disse...

hola Ariane
excelente e interesante post muchas felicidades por tu blog y gracias por tu ayuda siempre.

Rafael Silveira disse...

Ai ai ai...
caraca, gamei!!!!!
Vou fazer aqui, aguarde informações...
XD

Rafael Silveira disse...

Ariane, olha só....
http://blogdetestesdorafa.blogspot.com/
s´palda´sldoakskdkaposlda
Não consegui obter muito sucesso. Não tenho muita sorte com isso não...
Parece que o resmo automático nao está funcionando. Além de a letra do Título estar grande demais..
XD
Não aprove o comentário por favor...
Obrigado e até mais, a experiência foi boa...
=D

♫Luana♪ disse...

Olá, Ariane!
resolvi fazer uma perguntinha aqui... não, eu não estou desesperada, apenas em dúvida...
Estou usando a sua template Beauty no mey blog fechando a boca de vez (caso vc vá olhar) e toda vez que eu entro no blog ele abre uma popup com um endereço tipo este aqui:

amigos.com/search (foi o último que abriu),
ontem abriu um de putaria e ainda por cima travou meu firefox a ponto de ter que reiniciar o Ubuntu... :(

enfim, eu sei que provavelmente não tem nada a ver com a template, mas queria saber se você colocou no código dela algo do tipo adsense, porque esse problema começou assim que mudei a template... e neste blog eu não coloquei anúncios do google e nem pretendo colocar.
De um jeito ou de outro, agradeço pela bela template!!!

bjin

mafia171.com.br disse...

Ariane me interesei muito pelo segundo exemplo, estou aguardando pelo tutorial dele pois axei bastante interesante ter um 1° post em descate e os outros menores =)

Ariane disse...

Luana não há absolutamente nenhum código que eu tenha colocado no template. O único link que coloquei foi do meu próprio blog, nos créditos. Você baixou o template aqui mesmo? Pois outros blogs acabam redistribuindo sem autorização e podem mexer nos códigos. Já os widgets do adsense (que uso no demo e pode acabar indo junto com o template) normalmente são descartados na troca do template, não ficam no blog.

♫Luana♪ disse...

Olá, Ariane, obrigada por ter respondido, olha, eu baixei a template daqui mesmo, um pouquinho depois que vc postou (foi amor ao primeiro click rs) como seus templates são sempre certinhos, nem olhei o código, só se foi algum desses widgets mesmo (numa espécie de assombração, porque realmente os links somem quando trocamos ou instalamos templates)...sei lá... não consigo entender o porque daquela pop up...
de um jeito ou de outro agradeço novamente e vou tentar descobrir o que acontece.

bjs

♫Luana♪ disse...

ignore o comentário anterior, consegui achar o problema (pelo menos eu acho)
e já fica aí a dica pra quem tb tem conta no 4 shared.
quando eu troquei a template, também instalei um link para a minha pasta de músicas no 4 shared, hoje quando vi sua resposta, olhei o blog todo, fucei no html dele procurando qualquer coisa que pudesse estar acontecendo, algum link estranho ou coisa do tipo e não achei, e toda vez que carregava o blog, lá estava a maldita pop up... excluí o código do 4shared e voilá... sumiu a pop up. :D

Valeu, querida!! (e desculpe qualquer incômodo)

bjs

Pizcos disse...

Muy bueno Ariane ☺☺☺

estudiodicas disse...

Muito bom Ariane!

Estou mesmo precisand de uma dica dessas, pois estarei montando meu novo blog esses dias e suas dicas são sempre muito preciosas.

Abraço

alexandre disse...

UP! UP! UP!


Está a ficar lindo num template que estou a criar do zero :)

Muito obrigado Ariane!

alexandre disse...

Ariane, estou de volta do codigo da div first 1º exemplo, porque tambem pretendo que a data apareça no 1º post da home page.

Tem alguma dica que me possa ajudar?

Elke di Barros disse...

M O R R I ! ! !

Invibol disse...

Um problema eu testei e não fico bom para blog que tenha video =/.

milerfreitas.com disse...

Ariane, vlw!

Muito bom, quebrei um pouquinho a cabeça, mas consegui, ficou ótimo.

Sem querer abusar da boa vontade, mas na primeira postagem o título ficou sublinhado, se por acaso vc souber como faz para mudar isso poderia responder? Mas, só se for fácil, do contrário, não precisa esquentar a cabeça não, pois ficou tão bom que isso é "galho fraco".

Fique com Deus!

expertinho disse...

Desde que comecei a ter um blog, eu sempre visitei seu site e encontrei novidades, utilidades, dicas... ou seja, coisas importante para nossos mundo 'BLOG'. Agradeço muito a VocÊ, por nos propiciar essas informações agradavéis. Um Grande Abraço.

Shacly disse...

Ariane,gostei muito de suas dicas,mais gostaria de saber qual o template que você usou no blog de exemplo!

Abraços Shacly

Patriarca disse...

Ops..rsrsr mais uma duvida como eu faço para as postagens se alinharem da mas antiga para a mais recente...
eu qero q a mais antiga apareça na pagina inicial, será que é possível?

Lucas Pacheco disse...

oi ariane!
sempre venho ao seu blog ou ao bloggersphera, em busca de soluções para meus problemas nos templates!
segue:
estou tentando fazer um tentando fazer um template estilo revista!
preciso esconder a exibição do post-footer(só na home page)!
tentei usar o truque que você mencionou neste tutorial, mas não funcionou!
adicionei isso:
b:if cond='data:blog.pageType == "item"'
....
....
/b:if
_____________________________________________________________
(no comentário eu retirei os sinais de "maior que" e "menor que" ...)

disse...

Eii, moça! Quanto tempo...

Adorei essa dica, vou tentar coloca-la em um blog de trabalho de faculdade! Mas pelo que estou vendo é daquelas que merecem uma madrugada inteira! rsrs

bjss

Seu peso ideal disse...

Shoooowwww essa dica...embora não vá aplicá-la de imediato, pois ainda não sei mexer muito bem em blogs (iniciante...rsss).

Mas gostaria de aproveitar a oportunidade e fazer uma pergunata: estou tentando colocar uma imagem (foto) no post do blogger e está dando isso: Seu HTML não pode ser aceito: Tag is not allowed

Porque acontece isso??? Tem como corrigir???

Desde já muito obrigada.

Rodrigo Andrade disse...

Não consigo encontrar aquele trecho para substituir;...
aluém me ajuda a encontra-lo?

Barcelos disse...

Alô ROdrigo

Porventura usou o "find"? (Ctrl + f) Surge a barra de pesuisa ao pé da página. Copie e cole a linha de código. Selecione o código a substituir e cole. Tá feito.

Barcelos

Elke di Barros disse...

Oi Ariane, acabei de testar esse hack e ele pode ser feito no novo Blogger. Mas veja, as imagens que vc hospedou no tynipic sumiram. Beijos.

Ariane disse...

Elke, de que imagens você fala? dos blogs onde fiz os testes?

Postar um comentário

Os comentários são moderados.