Postagem expansível com miniatura da imagem
Mostrar resumo da postagem
O procedimento é bem simples, você entra na pagina editar html, marque a opção para expandir modelos de widgets e procura por post.body (use o ctrl F para pesquisar), deve estar deste jeito no seu blog: <data:post.body />
Então apague essa linha e coloque isso no lugar:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>
Cuidado para não mostrar duas vezes a mesma coisa no seu blog! Veja se logo após esse trecho se tem o código:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Se encontrar apague, pois isso fará que o link para ler a postagem completa apareça duas vezes como na imagem abaixo, mas se retirar esse código não terá problemas.
E já está pronto, agora é só visualizar seu blog e verá que na pagina inicial ou paginas dos marcadores do blog aparecem um trecho do seu texto e uma miniatura das imagens.
Essas imagens foram feitas durante nossos testes em nosso outro blog Sites úteis e interessantes.
Para melhorar o layout podemos adicionar algumas linhas de código CSS e deixar a miniatura da imagem ao lado do texto, volte na pagina editar HTML e coloque esse trecho antes de linha </b:skin> (caso tenha duvidas veja aqui: Onde colocar os códigos no blog):
.thumb img {float: left;margin: 5px;}
A parte float:left é o lado que a imagem ficará caso queira do lado direito então use float: right
E se quiser personalizar o link leia mais, adicione essas linhas no mesmo local que colocou o outro código CSS:
.jump-link {text-align: center;margin:auto}
.jump-link a{font-size:16pt;color:#f00}
.jump-link a:hover{color:#00f}
Veja aqui como formatar texto ou colocar bordas. Veja como ficou depois de feitas essas alterações no layout.
Encontramos e fizemos algumas modificações no tutorial publicado no site Blogger Buster, o nome original é Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!
