7 de setembro de 2017

Formato Grid nos Posts do Blogger

A maneira que as postagens do seu blog são exibidas pode diferenciar entre ser popular ou obscuro. Formatos que dificultam a leitura ou pareça caótico, nunca será o favorito de ninguém. É por isso que as postagens devem ser exibida de forma organizada, fácil de ler e objetiva.


É claro que vai variar de blog para blog, porém se você acha que o seu blog se encaixa em algum formato que vamos disponibilizar aqui, aproveite pois nada funciona melhor que formatos Grid para exibição organizada de postagens.

Formato Grid

As postagens listadas no formato grid proporcionam uma excelente experiência na visualização tanto para os visitantes quanto para o proprietário do blog.

Características

  • Padrão na exibição das postagens
  • Leia mais será aplicado
  • Miniaturas são aplicadas automaticamente de acordo com a primeira imagem do post
  • Código 100% seguro e usado por 99% dos blogs para habilitar o formato Grid

Benefícios

  • Carregamento rápido das postagens
  • Blog com aparência profissional
  • Melhora o SEO do blog
Embora você tenha que fazer mudanças no código do seu template para deixar compatível com o formato Grid, todo o trabalho valerá a pena assim que estiver funcionando.

Adicionando o formato Grid no Blogger

  1. Acesse o Painel do Blogger
  2. Vá até Tema > Editar HTML e procure por </head> e logo acima cole:
  3. 
    <script type='text/javascript'>
    posts_no_thumb_sum = 100;
    posts_thumb_sum = 100;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){for(var c=a.split("<"),d=0;d<c.length;d++)c[d].indexOf(">")!=-1&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&a.indexOf(" ",b)!=-1;)b++;return a=a.substring(0,b-1),a+"..."}function createSummaryAndThumb(a,b,c){var d=document.getElementById(a),e="",f=d.getElementsByTagName("img"),g=posts_no_thumb_sum;f.length>=1?(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'"><img src="'+f[0].src+'" /></a></div>',g=posts_thumb_sum):(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'" title="'+c+'"><img src="https://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/s1600/sorry-image-not-available.png" /></a></div>',g=posts_thumb_sum);var h=e+'<div class="post-summary-text">'+removeHtmlTag(d.innerHTML,g)+"</div>";d.innerHTML=h}
    //]]>
    </script>
    
    
  4. Agora procure por <data:post.body/> substitua o segundo e o terceiro trecho encontrado por esse abaixo:
  5. 
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <div expr:id='&quot;summary&quot; + data:post.id'>
                <data:post.body/>
            </div>
            <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
            <b:if cond='data:post.allowComments'>
                <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                    <data:post.numComments/>
                </a>
            </b:if>
        </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
    </b:if>
    
    
  6. Escolha um modelo abaixo e cole o código acima do </head>

  7. Formato Grid Simples
    
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <style type="text/css">
    #blog-pager{clear:both}.post{height:auto;width:30.8%;overflow:hidden;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font-size:75%;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;padding:0;color:#444}h3.post-title{height:26px;text-align:center;width:100%;margin:0!important;padding-bottom:4%}.date-header{display:none}.post-body a{text-decoration:none}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{color:#777;font-size:100%!important;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:7% 10%}a.comment-bubble{color:#fff;text-decoration:none;font-size:100%;font-weight:700;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family:&#39;Open Sans Condensed&#39;,sans-serif;}a.comment-bubble:before{content:&quot;Comments: &quot;;}.post-header,.post-footer{display:none}
    </style></b:if></b:if><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
    
    

    Formato Grid Morderno
    
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <style type="text/css">
    #blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font:75% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;color:#111;padding:0}h3.post-title{text-align:center;height:22px;position:absolute;bottom:23%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0 13px}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}.posts-thumb{width:100%;height:190px;position:relative;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB}.posts-thumb:hover{border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36}.post-body{position:relative;height:auto}.post-body a{text-decoration:none}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none}.post-summary-text{color:#555;background:#f5f5f5 url(https://1.bp.blogspot.com/-rh-PYvqjzSs/VPTARkPOSVI/AAAAAAAALC4/GyFFEnl2TO8/s1600/blueprint.png);font:100% &#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%}a.comment-bubble{color:#fff;text-decoration:none;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font:110% &#39;Pacifico&#39;,cursive;}a.comment-bubble:before{content:&quot;Comments: &quot; url(https://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);}.post-header,.post-footer{display:none}
    </style></b:if></b:if>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
    
    

    Formato Grid Minificado
    
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <style type="text/css">
    #blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a{font:95% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow:2px 2px 3px #222}h3.post-title{height:22px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative;}.post-body{position:relative;overflow:hidden}.post-body a{text-decoration:none;}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:108% &#39;Open Sans Condensed&#39;,sans-serif;overflow:hidden;padding:45px 10px 0;left:0;position:absolute;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1;z-index:10;}a.comment-bubble{color:#fff;text-decoration:none;font:104% &#39;Pacifico&#39;,cursive;width:100%;text-align:center;position:absolute;top:160px;left:0;text-shadow:1px 2px 1px #333;z-index:11;}a.comment-bubble:before{content:&quot;Comments: &quot;}.post-header,.post-footer{display:none}
    </style></b:if></b:if>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
    
    

    Formato Masonry (Estilo Pinterest) Bônus
    
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <style type="text/css">
    #blog-pager{clear:both;position:absolute;bottom:0;left:0}.blog-feeds{display:none}.post{height:auto;width:100%;padding:0!important;margin:0 0 30px;display:inline-block;text-decoration:none}h3.post-title a{font:bold 95% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;padding:0;color:#fff;text-shadow:3px 2px 2px #222;}h3.post-title,.comments h4{margin:0!important;text-align:center;padding:10px 0;position:absolute;top:10px;width:100%;z-index:200}.post-header{display:none}.date-header{visibility:hidden;height:0!important;width:0!important;padding:0!important;margin:0!important}.posts-thumb{width:100%;height:auto;overflow:hidden;clear:both}.post-body{overflow:hidden;position:relative}.post-body a{text-decoration:none}.post-body img{display:block;width:auto;height:auto;max-width:100%;max-height:none;min-width:100%;min-height:auto;margin:0;padding:0;border:none;outline:none;position:relative}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:120% &#39;Open Sans Condensed&#39;,sans-serif;padding:84px 10% 0;left:0;position:absolute;text-align:center;vertical-align:bottom;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;z-index:10;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1}.post-footer{display:none}a.comment-bubble{color:#fff;text-decoration:none;font:120% &#39;Open Sans Condensed&#39;,sans-serif;right:5px;z-index:222;position:absolute;top:5px;text-shadow:1px 2px 1px #333;}a.comment-bubble:before{content:url(https://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);}.main-inner .column-center-inner{-moz-column-count:3;-moz-column-gap:1px;-webkit-column-count:3;-webkit-column-gap:1px;column-count:3;column-gap:1px;width:100%;padding:0!important}
    </style></b:if></b:if>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
    
    

  8. Salve o modelo
Se você utiliza um template personalizado no seu blogger, pode ser que esse tutorial não funcione corretamente. Neste caso volte o backup que você fez antes de iniciar o processo e seu blog voltará como era antes de fazer esse tutorial.

É isso, se deu tudo certo, a implementação do formato Grid tem seus prós e contras, porém as vantagens que ele oferece para o seu blog compensa as desvantagens.

Dúvidas? deixe um comentário abaixo

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.


Abrir lista de emoticonFechar lista de emoticon