Como Deixar os posts em grade?

feito isso, é possivel encontrar 3 ocorrências do codigos acima, substitua a segunda ou a terceira pelo seguinte codigo: 

<b: se cond = ‘dados: blog.pageType! =’ static_page ” ‘>
    <b: if cond =’ dados: blog.pageType! = ‘item’ ”>
       
           
       
        <tipo de script =’ text / javascript ‘> createSummaryAndThumb (“resumo <dados: post.id />”, “data” : post.url /> & quot;); </script>
        <b: if cond = ‘data: post.allowComments’>
            <a classe = ‘balão de comentários’ expr: href = ‘dados: post.addCommentUrl’ expr: onclick = ‘dados: post.addCommentOnclick’>
                <dados: post.numComments />

Pronto, agora é só escolher um dos modelos abaixo e colar o codigo acima da tag </head>:

modelo 1 simples:

<b: se cond = ‘dados: blog.pageType! =’ static_page ” ‘>
<b: if cond =’ dados: blog.pageType! = ‘item & quot;’>
<style type = “text / css”>
# blog-pager {clear: both} .post {height: auto; width: 30.8%; overflow: hidden; display: bloco inline; decoração de texto: nenhuma; 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; posição: relativa} .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- texto {color: # 777; tamanho da fonte: 100%! importante; família de fontes: & # 39; Open Sans Condensed & # 39 ;, sans-serif; text-align: center; clear: both; overflow: hidden; margin :5px 0 0; preenchimento: 7% 10%} bolha de comentário {cor: #fff; decoração de texto: nenhuma; tamanho da fonte: 100%; peso da fonte: 700; direita: 10px; posição: absoluta; superior : 165px; text-shadow: 1px 2px 1px # 333; família de fontes: & # 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 + Condensado: 300’ rel = ‘stylesheet’ type = ‘text / css’ />

Modelo 2:

<b: se cond = ‘dados: blog.pageType! =’ static_page ” ‘>
<b: if cond =’ dados: blog.pageType! = ‘item & quot;’>
<style type = “text / css”>
-100%; direita: -100%; superior: -100%; inferior: -100%; margem: auto; largura: auto; largura máxima: 340px; altura: auto; preenchimento: 0; borda: nenhuma; contorno: none} .post-summary-text {color: # 555; background: # f5f5f5 url (https://1.bp.blogspot.com/-rh-PYvqjzSs/VPTARkPOSVI/AAAAAAAALC4/GyFFEnl2TO8/s1600/blueprint.png); fonte: 100% ‘Open Sans Condensed’, 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; fonte: 110% & # 39; Pacifico & # 39 ;, cursive;} a.comment-bubble: before {content: & quot; Comentários: & quot; url (https://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);} .post-header, .post-footer {display: none} 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; preenchimento: 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;, cursivo;} 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} 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; preenchimento: 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;, cursivo;} 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} com / -rh-PYvqjzSs / VPTARkPOSVI / AAAAAAAALC4 / GyFFEnl2TO8 / s1600 / blueprint.png); font: 100% & # 39; Open Sans Condensed & # 39 ;, sans-serif; text-align: center; clear: both; overflow : oculto; margem: 5px 0 0; preenchimento: 17% 10% 6%} a.comment-bubble {color: #fff; decoração de texto: nenhuma; direita: 10px; position: absolute; top: 165px; text-shadow : 1px 2px 1px # 333; fonte: 110% & Pacifico, cursivo;} 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} 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; fonte: 110% & Pacifico, cursivo;} 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} 1px 2px 1px # 333; fonte: 110% & # 39; Pacifico & # 39;, cursivo;} a bolha de comentário: antes de {content: & quot; Comentários: & quot; url (https://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);} .post-header, .post-footer {display: none} 1px 2px 1px # 333; fonte: 110% & # 39; Pacifico & # 39;, cursivo;} a bolha de comentário: antes de {content: & quot; Comentários: 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 + Condensado: 300’ rel = ‘stylesheet’ type = ‘text / css’ />
<link href = ‘https: //fonts.googleapis.com/css? family = Pacifico’ rel = ‘folha de estilo’ tipo = ‘text / css’ />

 
Modelo 3 (recomendo):

<b: se cond = ‘dados: blog.pageType! =’ static_page ” ‘>
<b: if cond =’ dados: blog.pageType! = ‘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; transformação de texto: maiúscula; cor: #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 {visible: hidden; height: 0! Important; width: 0! Important; margin: 0! Important; padding: 0! Important;}. Posts-thumb {width: 100%; height: 190px; estouro: oculto; posição: relativo;}. Post-body {posição: relativo; estouro: oculto}. Post-body a {text-decoration: none;}. Posts-thumb img {position: absolute; left: – 100%; direita: -100%; superior: -100%; inferior: -100%; margem: auto; largura: auto; largura máxima: 340px; altura: auto; preenchimento: 0; borda: nenhuma; estrutura: nenhuma ;} .post-summary-text {cursor: ponteiro; cor de fundo: rgba (44,77,163,0,8); cor: #fff; fonte: 108% & # 39; Open Sans Condensed & # 39 ;, sans-serif; overflow : oculto; preenchimento: 45px 10px 0; esquerda: 0; posição: absoluto; alinhamento de texto: centro; sombra de texto: 1px 1px 0 rgba (0,0,0,0.1); parte superior: 0; opacidade: 0; altura : 100%; transição: todos os 300ms facilitam 0s;}. Texto pós-resumo: hover {opacity: 1; z-index: 10;} a.comment-bubble {color: #fff; text-decoration: none ; font: 104% & # 39; Pacifico & # 39;, cursivo; 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}posição: absoluto; alinhamento de texto: centro; sombra de texto: 1px 1px 0 rgba (0,0,0,0.1); topo: 0; opacidade: 0; altura: 100%; transição: todos os 0s de facilidade de 300ms; } .post-summary-text: hover {opacidade: 1; z-index: 10;} a.comment-bubble {color: #fff; text-decoration: none; fonte: 104% & # 39; Pacifico & # 39; , cursivo; largura: 100%; alinhamento de texto: centro; posição: absoluto; topo: 160px; esquerda: 0; sombra de texto: 1px 2px 1px # 333; índice z: 11;} a.comment-bubble: before {content: “Comentários:”}. post-header, .post-footer {display: none}posição: absoluto; alinhamento de texto: centro; sombra de texto: 1px 1px 0 rgba (0,0,0,0.1); topo: 0; opacidade: 0; altura: 100%; transição: todos os 0s de facilidade de 300ms; } .post-summary-text: hover {opacidade: 1; z-index: 10;} a.comment-bubble {color: #fff; text-decoration: none; fonte: 104% & # 39; Pacifico & # 39; , cursivo; largura: 100%; alinhamento de texto: centro; posição: absoluto; topo: 160px; esquerda: 0; sombra de texto: 1px 2px 1px # 333; índice z: 11;} a.comment-bubble: before {content: “Comentários:”}. post-header, .post-footer {display: none}} a.comment-bubble: before {content: “Comentários:”.. post-header, .post-footer {display: none}} a.comment-bubble: before {content: “Comentários:”.. post-header, .post-footer {display: none}
</style> </ b: if> </ b: if>
<link href = ‘https: //fonts.googleapis.com/css? family = Open + Sans + Condensado: 300’ rel = ‘stylesheet’ type = ‘text / css’ />
<link href = ‘https: //fonts.googleapis.com/css? family = Pacifico’ rel = ‘folha de estilo’ tipo = ‘text / css’ />

Modelo 4:

<b: se cond = ‘dados: blog.pageType! =’ static_page ” ‘>
<b: if cond =’ dados: blog.pageType! = ‘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: bloco em linha; decoração de texto: nenhuma} 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 {visibilidade: oculto; 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- decoração: nenhuma} .post-body img {exibição: bloco; largura: automática; altura: automática; largura máxima: 100%; altura máxima: nenhuma; largura mínima: 100%; altura mínima:automático; margem: 0; preenchimento: 0; borda: nenhuma; estrutura de tópicos: nenhuma; posição: relativa}. post-resumo-texto {cursor: ponteiro; cor de fundo: rgba (44,77,163,0,8); cor: #fff ; font: 120% & # 39; Open Sans Condensed & # 39;, sans-serif; padding: 84px 10% 0; esquerda: 0; posição: absoluta; alinhamento de texto: centro; alinhamento vertical: parte inferior; sombra de texto : 1px 1px 0 rgba (0,0,0,0.1); top: 0; opacidade: 0; z-index: 10; height: 100%; transição: todos os 300ms facilitam 0s;}. Post-summary-text : hover {opacity: 1} .post-footer {display: none} a.comment-bubble {color: #fff; decoração de texto: none; fonte: 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 + Condensado: 300’ rel = ‘stylesheet’ type = ‘text / css’ />

OBS: esses modelos funcionam melhor com o tema Simples do blogger, se você tentar isso em outros temas, é bem possivel que não vá funcionar de forma correta.