isFirstPost - Exemplo 2

Continuando o post anterior, explicarei aqui como deixar o seu blog como o Exemplo 2. Neste exemplo, os posts aparecem resumidos na página inicial e em formato de lista nos marcadores e arquivos (como uso aqui no meu blog). Além disso, usei jQuery no primeiro post, que esconde e revela parte do conteúdo sem sair da página.

Como lembrar nunca é demais, lá vai o conselho da titia: Nunca faça modificações diretamente no seu blog 'oficial'. Crie um blog de  testes para isso, evitando desesperos e dores de cabeça.

Atenção: se você seguiu o tutorial anterior e colocou os códigos para o Exemplo 1, substitua tudo pelo que se segue:

1- Clique em Expandir Modelo de Widget, procure por <b:include data='post' name='post'/> e substitua por:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<div id='first'>
<b:if cond='data:post.title'>
<h1 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>
</h1>
</b:if>

<p><data:post.body/></p>

<br/>
<span class='commentlink'>
<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>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='post'/>
</b:if>

<b:else/>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='first'>
<ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div></b:if></b:if></b:if>

<b:else/>

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

<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div>

<b:else/>

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

</b:if>

O que fiz aqui foi basicamente isso: Se a condição for o primeiro post na home page, o post aparecerá dentro da div First, exibindo título, texto e link para comentários, caso contrário, os posts aparecem normalmente nas páginas internas. E ainda, se for diferente das páginas internas e diferente da home page, o primeiro post deve aparecer em forma de lista ( <ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul> ). Se os posts não estiverem contidos em First (ou seja, todos os outros posts), também devem, nestas condições, aparecer em forma de lista (<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div>) e fora de todas estas condições, os posts devem aparecer normalmente.

Provavelmente existe uma maneira mais simples e enxuta de organizar estas condições (e espero mesmo que sim!) mas confesso que passei muitas horas até conseguir organizar os códigos desta maneira e foi a única sequência lógica que realmente funcionou comigo. Prometo que assim que descobrir uma maneira mais simples ou direta de dispor as condicionais, volto aqui e explico para vocês.

Salve as modificações. Se você está começando agora, siga os passos do primeiro tutorial  para ver como aplicar o hack de resumos automáticos e esconder as informações de post-footer e data dos resumos, além do estilo para os resumos da página inicial. Lembre-se de modificar as medidas para que acompanhem a largura do primeiro post.

Se você já seguiu anteriormente o primeiro tutorial, a diferença aqui é que os estilos para First (tanto na página inicial quanto nas listas) serão colocados abaixo da tag ]]></b:skin>, dentro de uma condicional:

Estilo para First em forma de lista:

<style>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#first{margin:6px 0px;background:#fff;padding:6px;border:1px solid #e3e2e3; clear:both;}
#first ul{margin:0px;list-style-type:none;background:#eeeded;padding:3px;}
#first li{background: #fff;padding:15px 0px 3px 40px;font-weight:bold}
</b:if></b:if></style>

<style>

Aqui estilo para First na home page:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
#first{ /* altere os estilos da forma que achar melhor */
float: left;
margin: 0px 0px 10px 5px;
width: 580px;
text-align:justify;
padding:0px 12px 12px;
font-size: 14px;
line-height: 1.4em;
font-family: &#39;Trebuchet MS&#39;;
color: #3b3b3b;
border-top: 1px solid #E9E9E9;
border-left: 1px solid #E9E9E9;
border-right: 2px solid #E9E9E9;
border-bottom: 2px solid #E9E9E9;
background: #f8f8f8
}
#first h1 {margin: 10px 0 0 0; padding: 3px 20px 6px 20px;font-size: 24px;font-family: Verdana;color:#fff;border-bottom:1px dotted #aeb4af} /* estilo para o título */

#first h1 a{margin: 0px auto; padding: 0px;font-size: 24px;font-family: &#39;Palatino Linotype&#39;;font-weight:normal;color:#e71ea7;letter-spacing:1px; } /* estilo para o título */

#first img{margin: 0 5px 5px 0px;padding: 5px; background: #fff; border: 1px solid #dfc8d1; float:left;width: 150px;height:180px; } /* estilo para as imagens em first-post */
#first .commentlink{float:right} /* estilo para o link de comentários */

#first .date-header{float:right} /* estilo para a data */

</b:if></style>

Agora acima de ]]></b:skin> os estilos para a div 'títulos' que apresenta os outros posts em forma de lista nos arquivos e marcadores:

#titulos{margin:10px 0px 6px;background:#fff;padding:6px;border:1px solid #e3e2e3} /* estilo para a div */
#titulos ul{margin:0px;list-style-type:none;background:#eeeded;padding:3px;} /* estilo para a lista */
#titulos li{background: #fff;padding:15px 0px 3px 40px;font-weight:bold} /* estilo para os itens da lista */

Para ver o resultado, entre neste blog e clique em algum marcador ou no mês de julho dos arquivos.

Para colocar o efeito de revelar/esconder no primeiro post, siga este tutorial   no Empório Digital. O efeito também aparecerá nos posts internos, não apenas na página inicial.

O exemplo 3 dispensa um novo tutorial, pois a diferença está apenas na medida dos posts resumidos, que ocupa toda a largura da coluna, ao contrário do exemplo dois, onde cada resumo ocupa metade da medida, ficando dispostos lado a lado.