Com a implementação do gadget "Postagens Populares", fica a esperança de que o pessoal do Blogger também nos proporcione outros gadgets semelhantes, como "Postagens Recentes" e "Comentários Recentes". A vantagem é que podemos dos livrar de inúmeros hacks, como este aqui, que fazem a página dos nossos blogs demorarem para carregar por conta dos scripts hospedados em outros lugares.Só que nem tudo são flores, o novo gadget não dá a opção de colocar o número de letras no snippet do post, e por default, se você escolher só o título do post com o thumbnail (imagem), ela aparecerá centralizada. Além disso, se não houver uma imagem no post, fica estranho o widget, alguns posts com imagens, outros sem.
Eu já tinha feito umas customizações, que pode ser vistas neste post. Vamos agora analisar certas linhas para implementar as imagens. Eis abaixo o código inteiro do gadget:
<b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail-center'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>Observe que há 4 condições, conforme as opções que você escolhe no adicioar gadget:
<!-- (1) No snippet/thumbnail -->
Essa é a primeira opção, apenas com os títulos dos posts.
<!-- (2) Show only snippets -->
Aqui é a segunda opção, títulos dos posts e resumo dos posts.
<!-- (3) Show only thumbnails -->
Aqui é a terceira opção, título dos posts com thumbnails.
<!-- (4) Show snippets and thumbnails -->
E nessa quarta opção, títulos dos posts com os resumos e com as imagens dos posts.
Na terceira opção, vê-se que realmente há uma classe
<div class='item-thumbnail-center'>, que coloca as imagens no centro e na quarta opção há uma outra classe, mas que coloca as imagens ao lado do título <div class='item-thumbnail'>. Se você escolher a terceira opção, basta copiar e colar a classe da quarta no lugar (Fiz e deu certo!). Para colocar uma imagem que apareça em posts sem elas, basta incluir uma condição no código(veja linhas 9 a 14 na imagem abaixo). O que eu fiz no meu blog foi incluir na quarta opção (Caso eu usasse a terceira, eu colocaria nela), antes da tag
</b:if>:<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img src='COLOQUE-AQUI-A-URL-DA-SUA-IMAGEM-DE-DIMENSÕES-72-X-72'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
O resultado pode ser visto abaixo, onde aparece uma imagem com o nome do meu blog:
E agora ficaremos à espera das novidades que acontecerão no dia 31, próxima terça, na festa de comemoração global de aniversário do Blogger de 11 anos!!!Post inspirado no Pizcos Blog!
