Como Deixar os posts em grade?

Fórum › Categoria: Layouts/Temas › Como Deixar os posts em grade?

Vou mostrar a vocês uma forma de deixar seus posts do blog feito no blogger em grade de 3 colunas, vejam um exemplo clicando aqui

Ok… vamo la ne.

Primeiro eu recomendo você fazer backup do seu blog indo em “Temas”, clica nos 3 pontinhos ao lado do botão de “Personalizar”, e clique em “Fazer Backup” faça o download do arquivo de backup, recomendo você fazer um blog de teste també,.

Ok, depois de ter feito o backup, famos partir pros codigo?!

Primeiro vá na aba “Temas” clique novamente nos 3 pontinhos e clique em “Editar HTML”.
Após fazer isso, clique em qualquer parte do codigo html e pressione Ctrl + F e escreva “</head>”

Cole o seguinte codigo antes da tag “</head>”:

<tipo de script = ‘text / javascript’>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>

//
função removeHtmlTag (a, b) {if (a.indexOf (“”)! = – 1 && (c [d] = c [d] .substring (c [d] .indexOf (“>”) + 1, c [d] .length)) ; a = c.join (“”)} para (b = b = 1? (e = ‘ ‘, g = posts_thumb_sum) 🙁 e =’ ‘, g = posts_thumb_sum); var h = e +’ ‘+ removeHtmlTag (d .innerHTML, g) + “”; d.innerHTML = h}
//]]>

Após isso pressione novamente Ctrl + F e escreva a seguinte linha de codigo: <data: post.body />

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.

era animes online replied 4 anos ago

Os codigos ficaram todos em portugues, peço perdão T^T

Codigos certos: https://drive.google.com/drive/folders/1eEzWo_-Wrt54tfS4rX-lAkP3G0C636x4?usp=sharing

Please login or Register to submit your answer

Nome de usuário ou endereço de e-mail

Senha

Lembrar-me