Já recebi vários comentário e e-mails perguntando como utilizar aquelas imagens destacadas para as postagens igualzinha ao Blog da Bruna Vieira. Existem duas formas de fazer: do jeito antigo, editando manualmente toda vez que você quiser uma postagem diferente (o que vamos combinar enche o saco) e o segundo jeito é utilizando JavaScript e CSS. E este modelo que vou ensinar para vocês hoje.

Procurei alguns tutoriais, mas todos deixavam a imagem muito pequena e se você tentasse aumentá-las no código elas ficam todas distorcidas e fora de foco. Ou então, só encontrava tutorias que deixavam a imagem grande, porém só buscava as imagens dos últimos posts, o que não era o que eu queria. Então consegui adaptar o código e tive o resultado que eu queria (vocês podem conferir aqui). Também vou deixar o link de cada tutorial que eu usei no final da postagem.

Vamos lá! Lembrando que todos os tutoriais disponibilizados aqui utilizam o Template Minima.

Primeiro passo: Adicionar o Gadget

Para que você possa personalizar todo o gadget, primeiro é necessário que ele já esteja incluído no seu blog. Então, vá até a guia Layout e adicione o gadget Postagens Populares.

Segundo passo: Personalizar o código

Vá até a guia Modelo e clique em Editar HTML. Procure por PopularPosts1, para isso utilize o CTRL+F. Você deve encontrar a linha:
<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'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FAev-LxsAHJRZge-z3msVshCwp7gFlRmrqkHyKOCqSoRMih4I5Xl4fU4WyaulpQwWfKYoJ-pkvGg3R-3qRXUw8cs16BO_e3F0B5XLi6DGLNhYqgwRs7g8u2S4pumgQOwseQerJ9D4kuQ/s1600/grande.png'/> </b:if> <div class='item-title'> <a expr:href='data:post.href'><data:post.title/></a></div> </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>

IMPORTANTE: Se você tiver algum post que não tenha imagem, você pode definir uma imagem padrão. Prepare uma imagem e faça o upload dela em algum site de sua preferência. Feito isso, no código acima localize o link a seguir e altere pelo link da sua imagem:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FAev-LxsAHJRZge-z3msVshCwp7gFlRmrqkHyKOCqSoRMih4I5Xl4fU4WyaulpQwWfKYoJ-pkvGg3R-3qRXUw8cs16BO_e3F0B5XLi6DGLNhYqgwRs7g8u2S4pumgQOwseQerJ9D4kuQ/s1600/grande.png

Terceiro passo: Adicionar o JavaScript

Agora localize no seu template a tag </head> e adicione logo abaixo as linhas abaixo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js' type='text/javascript'/>

Quarto passo: Adicionar o CSS

Procure pela linha: ]]></b:skin> e cole o código logo acima desta linha.
  #PopularPosts1 h2 { display:none; } #slider ol,#slider ul,#slider li { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; } .item-title a { background:#fcfcfc; position:absolute; width:180px; //largura da imagem height:180px; //altura da imagem top:0; margin-left:-180px; color:#222; } .item-title a:hover { background:#fcfcfc; position:absolute; width:180px; //largura da imagem height:180px; //altura da imagem top:0; margin-left:-180px; color:#222; } .popular-posts img { margin: 0 !important; padding:0 !important; width:400px; height:350px; } ol, ul { list-style: none; } .wrapper { width:100%; margin: 0 auto; position:relative; } .clear { clear: both; } .display-none { display:none; } #slider { position: relative; top: -2px; z-index: 1; } #slider .prev { display:none; //Não alterar } #slider .next { display:none; //Não alterar } #slider #slider-wrapper { width:100%; height:350px; padding-top:0 overflow: hidden; z-index: 999; position: relative; } #slider #slider-inner { width:100%; height:350px; position:absolute; } #slider .article { width:180px; height:380px; float: left; margin-left:0; } #slider .article img { margin-bottom: 25px; } #slider .article h2 { display:none; } #slider .article h2 a { display:none; } #slider .article .meta-comments a { font-size: 10px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 #fff; } #slider .article .item-snippet { margin-left:; } #slider .widget-item-control { display: none; }

Prontinho! Agora é só visualizar o layout. Qualquer dúvida, por favor, deixem nos comentários ou mande um email pela página de contato.

• Widget últimas postagens horizontal com imagens para Blogger 
• 2 Estilos de Gadget de Posts Populares onde as Miniaturas das Imagens Giram ao passar o Mouse