terça-feira, 27 de setembro de 2016

Grid post 2 colunas thumbnails miniaturas no blogger


grid-post-2-collum-thumbnails blogger


É possível em Blogger transformar a primeira página quando apresenta uma simples lista de postagem em 2 colunas e ao mesmo tempo fazer isso miniaturas de imagem para deixar o blog de forma otimizada, isso também ajuda a melhorar a quantidade de páginas visualizadas bem como aumentar a exposição das postagens no seu Blog. Se você deseja fazer isso no seu Blogger siga os passos abaixo.



Modificando a exposição dos posts no Blogger primeira página

Primeiro vamos fazer o auto readmore para isso faça login no blogger no painel do mesmo clique em
modelo então editar >> HTML/JavaScript então com as teclas combinadas CTRL+F busque por
 ]]> </ b: skin>  e logo acima disso copie e cole o seguinte código:

.thumbnail-post { width:100px; height:100px; float:left; margin:0px 10px 0px 0px; }

Substitua o Código <data: post.body /> o segundo ou terceiro com o seguinte código: 


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div> <div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a> </div> </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>

Salve o modelo 

Acima de </head> copie e cole o seguinte código: 

<!-- Two Col Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-outer {
  width:50%;
  height:auto;
  float:left;
}
.post {
    background: #fff;
    margin: 5px;
    padding: 0;
    height: auto;
    min-height: 120px;
    border: none;
    line-height: normal;
    font-size: small;
}
.post h2 {
    margin: 0 0 5px;
    border: none;
    font-size: 13px;
    font-family: Tahoma;
    font-weight: 700;
}
.post-thumbnail img {
    float: left;
    margin: 0 10px 12px 0;
    background: #fff;
    width: 85px;
    height: 85px;
    padding: 0;
    border: none;
    box-shadow: none;
}
@media screen and (max-width:885px){
.post-outer{margin:5px 5px 0 0;}
}
@media screen and (max-width:800px){
.post-outer {width:100% !important;float: none !important;margin-top:5px;}
.post h2 {font-size:17px;}
}
@media screen and (max-width: 768px){
.post h2 {font-size:15px;}
}
@media screen and (max-width:600px){
.post h2 {font-size:17px;}
}
@media screen and (max-width:500px){
.post h2 {font-size:14px;}
}

#blog-pager,.date-header {clear:both !important;}
</style>
</b:if>
</b:if>
<!-- Two Col End -->

Salve e pronto.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner