Elegantes Resumos de Postagens com Miniaturas para Blogger

Organize a página inicial do blog resumindo postagens com novos estilos mais bonitos e modernos.

Aqui no Pro Developer sempre citamos da fundamental importância que é ter um blog organizado e que realmente agrade a quem realmente interessa, que são os visitantes. Batemos sempre na mesma tecla e muitas vezes até pode se tornar chato e repetitivo, porém, você deseja que seu blog esteja a frente de seus concorrentes e para isso é necessário objetividade e praticidade na hora de navegar. E, para lhe ajudar mais um pouco, trazemos mais uma essencial forma de personalizar seu blog.

Resumo Automático de Postagens sem Scripts no blog

Nesse artigo, trazemos um tutorial que é dos mais procurados e almejados em toda Blogosfera, resumo de postagens na página inicial do blog. Anteriormente, publicamos Resumo Automático de Postagens no Blogger que é de nossos posts mais visitados, porém, com esse novo método, é para deixar de vez o receio de modificar seu template. Explicaremos como fazer um resumo de postagens sem o uso de scripts. É isso mesmo, apenas comHTML e CSS personalizaremos a página inicial de seu blog deixando-a com aquele estilo profissional que você sempre desejou e configurando-a para um carregamento mais rápido por não exibir os posts completos.

Pensa que acabou? Não!! As surpresas não param por aí. Nesse tutorial, trazemos três estilos de resumos de postagens que deixam qualquer um “babando”, e que, a partir desse momento farão com que seu blog seja um “destaque” na web e se aproxime dos melhores estilos de templates profissionais que encontramos por aí.

 Atenção:  

• No tutorial você verá a opção de adicionar um script, porém, o mesmo não é obrigatório, ele servirá caso precisar para ajustar a definição das miniaturas.
• A aplicação desses códigos em templates personalizados podem não render o resultado esperado e necessitar de alterações posteriores.
• É recomendável que realize as alterações em um blog de testes e assim tendo um resultado satisfatório aplicar a seu blog principal.
• Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Colocar Resumo Automático de Postagens no Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por:

<b:includable id='post' var='post'>

>> Selecione e apague o trecho como mostrado na imagem abaixo:

>> No local do trecho excluído, cole o seguinte código:

<b:includable id='post' var='post'>
  <article expr:class='&quot;blogger-post blogger-post-&quot; + data:blog.pageType' expr:id='&quot;post-&quot; + data:post.id'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div class='blogger-post-part blogger-post-thumbnail-area'>
          <b:if cond='data:post.thumbnailUrl'>
            <a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/></a>
          </b:if>
        </div>
      </b:if>
    </b:if>
    <div class='blogger-post-part blogger-post-body-area'>
      <h3 class='blogger-post-title'>
        <b:if cond='data:post.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'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        <b:else/>
          [Untitled]
        </b:if>
      </h3>
      <div class='blogger-post-body'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <data:post.body/>
        <b:else/>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <data:post.body/>
          <b:else/>
            <b:if cond='data:post.snippet'>
              <data:post.snippet/>
            <b:else/>
              No content.
            </b:if>
          </b:if>
        </b:if>
      </div>
      <footer class='blogger-post-footer'>
        <div class='blogger-post-footer-line blogger-post-footer-line-1'>
          <span class='blogger-post-author vcard'>
            <b:if cond='data:top.showAuthor'>
              <data:top.authorLabel/> <span class='fn'>
              <b:if cond='data:post.authorProfileUrl'>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>
              <b:else/>
                <span class='g-profile'><data:post.author/></span>
              </b:if>
              </span>
            </b:if>
          </span> <span class='blogger-post-timestamp'>
          <b:if cond='data:top.showTimestamp'>
            <data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>
          </b:if>
          </span> <span class='blogger-post-comment-link'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.url + &quot;#comments&quot;'><data:post.commentLabelFull/></a>
              </b:if>
            </b:if>
          </b:if>
          </span>
        </div>
        <div class='blogger-post-footer-line blogger-post-footer-line-2'>
          <span class='blogger-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 != &quot;true&quot;'>, </b:if>
              </b:loop>
            </b:if>
        <b:include data='post' name='postQuickEdit'/>
          </span>
        </div>
      </footer>
    </div>
  </article>
</b:includable>

DICA: Caso desejar acrescentar o "Leia Mais", basta colocar o código a seguir ACIMA de </footer>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<span style='float:right'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if>

>> Pesquise agora por  ]]></b:skin>

>> Logo ABAIXO da tag encontrada, cole o código referente ao estilo desejado.

RESUMO COM MINIATURAS ARREDONDADAS

<b:if cond='data:blog.pageType != "item"'>
<style type="text/css">
.blogger-post {padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after {  content:" "; display:block;clear:both;}
.blogger-post-title { font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px;  border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBDug2c7RCaoX829ncGE9CKTgmSbqPhETSNo_htvMFgldLig7SqS8efrWMPRdELCNvvJatc_5wjOjO2UFnoQ5rkmkyc5QffoMKu-2L50xoV6Q1DC3irfCtkYFcKpdtCDN4lkBmXrFglFim/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%;}
.blogger-post-body-area:before {border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0;border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;text-transform:uppercase;color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {margin:0;padding:20px;font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}
</style>
</b:if>

RESUMO COM TÍTULO E RESUMO À DIREITA

<b:if cond='data:blog.pageType != "item"'>
<style type="text/css">
.blogger-post {background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after { content:" "; display:block; clear:both;}
.blogger-post-title {font:normal bold 20px/1.2 Arial,Sans-Serif;margin:0 0 10px; padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBDug2c7RCaoX829ncGE9CKTgmSbqPhETSNo_htvMFgldLig7SqS8efrWMPRdELCNvvJatc_5wjOjO2UFnoQ5rkmkyc5QffoMKu-2L50xoV6Q1DC3irfCtkYFcKpdtCDN4lkBmXrFglFim/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0; border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}
</style>
</b:if>

RESUMO EM TRÊS COLUNAS LADO A LADO (Estilo Notícias)
(Esse estilo requer que a largura do blog seja compatível)

<b:if cond='data:blog.pageType != "item"'>
<style type="text/css">
#blog-pager {clear: both;}
.blogger-post {background: #F6F6F6;  border-right: 1px dashed #E3E3E3;  border-left: 1px dashed #E3E3E3; height:420px; width:200px;  margin:0 20px 20px 0;  padding: 10px 10px 0px;  overflow:hidden;  float: left; display:inline-block; *zoom:1;}
.blogger-post:after {  content:" ";  display:block;  clear:both;}
.blogger-post-title {  font:normal bold 16px/1.2 Arial,Sans-Serif;  margin:0 0 10px;  padding:0;}
.blogger-post-title a{color: #777;}
.blogger-post-thumbnail-area a img{  width:200px;  height:200px;  background-color:#fff;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBDug2c7RCaoX829ncGE9CKTgmSbqPhETSNo_htvMFgldLig7SqS8efrWMPRdELCNvvJatc_5wjOjO2UFnoQ5rkmkyc5QffoMKu-2L50xoV6Q1DC3irfCtkYFcKpdtCDN4lkBmXrFglFim/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail { display:block; width:100%; height:100%; max-width:none;max-height:none;min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none;position:static;}
.blogger-post-body-area { padding:10px 20px 20px; margin:10px 0 0; font-size:11px;}
.blogger-post-footer {background: #E9E9E9;  margin:10px -20px 0; padding:20px;  border-top:1px dotted #ddd; font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase;  color:#555;}
.blogger-post-footer a{color: #888;}
.blogger-post-item,
.blogger-post-static_page {width:auto;}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {  margin:0;  padding:20px;  font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px;}
.icon-action {width: 10px;height:10px;}
</style>
</b:if>

Configuração
* Destacado em AMARELO, representa a cor de fundo dos resumos.
* Destacado em LARANJA, largura (width) e altura (height) dos resumos.
* Destacado em VERDE, largura (width) e altura (height) das miniaturas.
* Destacado em AZUL do terceiro modelo, cor de fundo do rodapé do resumo.

Inserindo o Script para Correção das Miniaturas

O próximo passo será inserir um script "necessário" para corrigir a definição das miniaturas das imagens, porém, como citado no tutorial, esse passo não é obrigatório, mas é importante para que as imagens presentes nas postagens não apareçam "desfiguradas" e embaçadas.

>> Ainda no código do template, pesquise por </body>

>> Logo ACIMA da tag encontrada, cole o seguinte código.

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <script type='text/javascript'>                 
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize(&quot;Blog1&quot;,210);                 
</script>
  </b:if>
</b:if>

* Em destaque 210, é a resolução da nova imagem que será aplicada, porém esse valor deve ser ajustado caso tenha alterado no CSS de acordo com o novo valor.

>> Clique em "Visualizar", estando de acordo como deseja clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Após a conclusão correta do tutorial, a página inicial de seu blog estará com um dos três visuais escolhidos. E, a partir agora, não terá mais aquele “congestionamento” de postagens na página inicial pois todas estarão devidamente resumidas com um visual muito mais elegante e principalmente, facilitando a navegação.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.