Em Posts nas páginas de marcadores e arquivos vimos um código repetindo a classe index-posts da Página Inicial nas outras Páginas Index. Iremos agora mudar algumas classes, para poder aplicar estilos diferentes.
Neste exemplo, nosso código terá:
Primeiro post da página inicial com título, corpo do post resumido e jump-link - a classe será chamada de first-post;
Demais posts da página inicial apenas com título - a classe será short-posts;
Posts das outras páginas index com título, corpo do post resumido e jump-link - e a classe: index-posts.
Além dessas classes ( first-post, short-posts e index-posts) criaremos mais 1 classe que servirá para a página individual dos posts: single-posts
Começamos com:
Se for qualquer página, exceto as individuais dos posts
<b:if cond='data:blog.pageType != "item"'>Se for a página inicial
<b:if cond='data:blog.url == data:blog.homepageUrl'>Se for o primeiro post
<b:if cond='data:post.isFirstPost == "true"'>Quero o código para o first-post
<div class='first-post'>CÓDIGOS DO FIRST POST
</div> Fecho a /div para o primeiro post: first-postSe não for o primeiro post
<b:else/>Quero o código para os short-posts
<div class='short-posts'>CÓDIGOS DOS SHORT POSTS
</div> Fecho a /div para os short-postsFecho a condicional para a página inicial
</b:if>Se não for a página inicial
<b:else/>Quero o código para os index-posts
<div class='index-posts'>CÓDIGOS DOS INDEX POSTS
</div> Fecho a /div para os index-postsFecho o código condicional para as páginas exceto as individuais dos posts
</b:if>Se não for a "todas as páginas exceto as individuais dos posts"
<b:else/>Quero o código para os single-posts
<div class='single-posts'>Titulo
Post-Body
Post-Footer
</div> /div que fecha o post-footer</div> Fecho a /div para os single-postsFecho o código das condicionais
</b:if></div> /div que fecha a área dos posts.Colocando os códigos dos ítens de post do Blogger:
<b:includable id='post' var='post'>
<!-- início do post -->
<div class='post hentry'>
<!-- início da condicional para "todas as páginas, exceto as individuais dos posts -->
<b:if cond='data:blog.pageType != "item"'>
<!-- início da condicional para a Home Page -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- início da condicional para o First-Post -->
<b:if cond='data:post.isFirstPost == "true"'>
<div class='first-post'>
<!-- AQUI FICAM OS CÓDIGOS ESCOLHIDOS PARA O PRIMEIRO POST DA HOME -->
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<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>
<!-- fim do título do post -->
<!-- linha abaixo do título do post -->
<div class='post-header-line-1'>
<!-- códigos para alinha abaixo do título do post -->
</div> <!-- fecha a div class post-header-line-1 -->
<!-- início do corpo do post -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div> <!-- fecha a div class post-body entry-content -->
<!-- fim do corpo do post -->
<!-- início do jump-break "Leia Mais" -->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div> <!-- fecha a div class jump-link -->
</b:if>
<!-- fim do jump-break "Leia Mais" -->
</div> <!-- fecha a div class first-post -->
<b:else/> <!-- condicional: se não for o primeiro post, o código será o seguinte -->
<div class='short-posts'>
<!-- AQUI FICAM OS CÓDIGOS PARA OS POSTS RESTANTES DA HOME -->
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<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>
<!-- fim do título do post -->
</div> <!-- fecha a div class short-posts -->
</b:if> <!-- fecha o código condicional para a página inicial -->
<b:else/> <!-- condicional: se não for a página inicial, o código será o seguinte -->
<div class='index-posts'>
<!-- AQUI FICAM OS CÓDIGOS PARA OS POSTS DAS OUTRAS PÁGINAS INDEX -->
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<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>
<!-- fim do título do post -->
<!-- linha abaixo do título do post -->
<div class='post-header-line-1'>
<!-- códigos para alinha abaixo do título do post -->
</div> <!-- fecha a div class post-header-line-1 -->
<!-- início do corpo do post -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div> <!-- fecha a div class post-body entry-content -->
<!-- fim do corpo do post -->
<!-- início do jump-break "Leia Mais" -->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div> <!-- fecha a div class jump-link -->
</b:if>
<!-- fim do jump-break "Leia Mais" -->
</div> <!-- fecha a div class index-posts -->
</b:if> <!-- fecha o código condicional para as "todas as páginas, exceto as individuais dos posts" -->
<b:else/> <!-- condicional: se não for a "todas as páginas, exceto as individuais dos posts" ou seja, se for a página individual de posts -->
<div class='single-posts'>
<!-- AQUI FICAM OS CÓDIGOS PARA OS POSTS DAS PÁGINAS INTERNAS -->
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<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>
<!-- fim do título do post -->
<!-- linha abaixo do título do post -->
<div class='post-header-line-1'>
<!-- códigos para alinha abaixo do título do post -->
</div> <!-- fecha a div class post-header-line-1 -->
<!-- início do corpo do post -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div> <!-- fecha a div class post-body entry-content -->
<!-- fim do corpo do post -->
<!-- NÂO HÁ NECESSIDADE DO CÓDIGO DO jump-break "Leia Mais" -->
<!-- início do rodapé do post -->
<div class='post-footer'>
<!-- linha 1 do rodapé do post -->
<div class='post-footer-line post-footer-line-1'>
<!-- autor do post -->
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<!-- fim do autor do post -->
<!-- hora da postagem -->
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<!-- fim hora da postagem -->
<!-- link de comentários -->
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:top.commentLabelPlural/><data:post.numComments/></a>
</b:if>
</span>
<!-- fim link de comentários -->
<!-- Ícones do post -->
<span class='post-icons'>
<!-- postagem por email -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- fim postagem por email -->
<!-- lápis de edição -->
<b:include data='post' name='postQuickEdit'/>
<!-- fim lápis de edição -->
</span>
<!-- fim Ícone do Post -->
<!-- link de backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</span>
<!-- fim link de backlinks -->
</div> <!-- fecha a div class post-footer-line-1 -->
<!-- linha 2 do rodapé do post -->
<div class='post-footer-line post-footer-line-2'>
<!-- Marcadores no Post -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
<!-- fim Marcadores no Post -->
</div> <!-- fecha a div class post-footer-line-2 -->
<!-- linha 3 do rodapé do post -->
<div class='post-footer-line post-footer-line-3'>
<!-- Localização -->
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
<!-- fim localização -->
</div> <!-- fecha a div class post-footer-line-3 -->
</div> <!-- fecha a div class post-footer -->
</div> <!-- fecha a div class single-posts -->
</b:if> <!-- fecha dos códigos condicionais -->
</div> <!-- fecha a div class post hentry -->
<!-- fim do includable do post -->
</b:includable>
Teremos então 4 classes para as quais poderemos aplicar estilos:
/* Estilos para os Posts */
.first-post{
/* estilos */
}
.short-posts{
/* estilos */
}
.index-posts{
/* estilos */
}
.single-posts{
/* estilos */
}
/* Estilos para os Títulos dos Posts */
.first-post h3{
/* estilos */
}
.short-posts h3{
/* estilos */
}
.index-posts h3{
/* estilos */
}
.single-posts h3{
/* estilos */
}
/* Estilos para o Corpo dos Posts */
.first-post .post-body{
/* estilos */
}
.short-posts .post-body{
/* estilos */
}
.index-posts .post-body{
/* estilos */
}
.single-posts .post-body{
/* estilos */
}
/* etc.... */
Amanhã aprenderemos como incluir classes para as páginas individuais dos posts, enquanto as páginas estáticas do Blogger não chegam... hehe
Comentários: 3
muito boa e detalhada a explicação, mas sinceramente queria pedir outra coisa, como você conseguiu mostrar o nome da postagem em vez de postagem mais antiga e postagem mais recente, outro dia fiquei tentando trocar os códigos mas não funcionou no meu blog, sei onde mexer, só não sei qual a tag para o titulo pois aquela que aparece no blog <data:newerPageTitle> no meu não deu resultado, continua aparecendo a frase padrão(postagem mais recente
Oi Fabiano!
O tutorial que você quer está aqui: ItemPager
Abração!
muito bom parabens
Postar um comentário
Para deixar o link da sua última postagem coloque este código:
Feed dos Comentários<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu-link-do-último-post">Título do Post</a></em>
Quando você estiver testando algum hack e tiver dúvidas sobre ele, informe:
1 - O endereço do blog onde você está testando (ou instalando o hack);
2 - O navegador que você está usando (Firefox, Opera, IExplorer, etc).
Leia sobre a política de Comentários!
Eu gosto de conhecer meus leitores! Se você usar OpenId ou perfil fechado, assine o comentário com seu nome e me deixará muito contente!
Bem-vindos e obrigada pela visita!
Blog This!