first post
Autor: Ely Designer | Publicado: 2011-04-10T23:31:00-07:00

 
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&nbsp; 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 &lt;b:include data='post' name='post'/&gt; e substitua por: 

&lt;b:if cond='data:post.isFirstPost'&gt;
&lt;b:if cond='data:blog.homepageUrl == data:blog.url'&gt;

&lt;div id='first'&gt;
&lt;b:if cond='data:post.title'&gt;
&lt;h1 class='post-title entry-title'&gt;
&lt;b:if cond='data:post.link'&gt;
&lt;a expr:href='data:post.link'&gt;&lt;data:post.title/&gt;&lt;/a&gt;
&lt;b:else/&gt;
&lt;b:if cond='data:post.url'&gt;
&lt;a expr:href='data:post.url'&gt;&lt;data:post.title/&gt;&lt;/a&gt;
&lt;b:else/&gt;
&lt;data:post.title/&gt;
&lt;/b:if&gt;
&lt;/b:if&gt;
&lt;/h1&gt;
&lt;/b:if&gt;

&lt;p&gt;&lt;data:post.body/&gt;&lt;/p&gt;

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

&lt;b:else/&gt;

&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;b:include data='post' name='post'/&gt;
&lt;/b:if&gt;

&lt;b:else/&gt;

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

&lt;b:else/&gt;

&lt;b:if cond='data:blog.homepageUrl != data:blog.url'&gt;
&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;

&lt;div id='titulos'&gt;&lt;ul&gt;&lt;li&gt;
&lt;a expr:href='data:post.url'&gt;&lt;data:post.title/&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;/div&gt;

&lt;b:else/&gt;

&lt;b:include data='post' name='post'/&gt;
&lt;/b:if&gt;
&lt;b:else/&gt;
&lt;b:include data='post' name='post'/&gt;
&lt;/b:if&gt;

&lt;/b:if&gt;

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 ( &lt;ul&gt;&lt;li&gt;&lt;a  expr:href='data:post.url'&gt;&lt;data:post.title/&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;  ). 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 (&lt;div id='titulos'&gt;&lt;ul&gt;&lt;li&gt;
&lt;a expr:href='data:post.url'&gt;&lt;data:post.title/&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;/div&gt;) 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&nbsp;  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 ]]&gt;&lt;/b:skin&gt;, dentro de uma condicional:

Estilo para First em forma de lista:

&lt;style&gt;
&lt;b:if cond='data:blog.homepageUrl != data:blog.url'&gt;
&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;
#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}
&lt;/b:if&gt;&lt;/b:if&gt;&lt;/style&gt;

&lt;style&gt;

Aqui estilo para First na home page:

&lt;b:if cond='data:blog.homepageUrl == data:blog.url'&gt;
#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: &amp;#39;Trebuchet MS&amp;#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:  &amp;#39;Palatino  Linotype&amp;#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 */

&lt;/b:if&gt;&lt;/style&gt;

Agora acima de ]]&gt;&lt;/b:skin&gt; 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 &nbsp; 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.