Como dividir a área dos posts do Blogger em colunas

Este layout nos posts do Blogger serve para que na página inicial, fiquem posts que você considere de extrema importância a leitura dos seus seguidores.

As postagens só aparecerão resumidas na página inicial do seu Blogger, e nunca nas páginas estáticas.

Veja aqui como fica:  Asa Delta Coaching

Este tutorial não é para iniciantes.  Todo o cuidado será pouco.

Inserindo o "Leia mais" nas postagens.

Em primeiro lugar, em cada postagem, escolha o local onde vai terminar a leitura e ficar o botão "Leia mais". Para isto acesse suas postagens e posicione o cursor no espaço onde terminará o resumo e clique em seguida no ícone do jump break conforme abaixo.

 Após clicar no ícone, você verá uma barra cinza como nesta próxima figura.  Atualize a postagem e pronto.  Repita este passo em todas as postagens.

Agora vamos aos códigos:

Vá em "Modelo", "HTML", "Expandir modelos de widgets", dê um "Ctrl + f" no seu teclado e cole 

</head>

Antes da tag </head> cole o próximo código.

<!-- Início do código -->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<style type='text/css'>

/** Início dos posts **/

.column-center-outer{

padding:0;

margin:0;

display:block
}
#Blog1{

width:610px;/** altere o valor conforme precisar **/
}
.date-header{/** data dos posts **/

display:none
}
.post {

overflow:hidden;

float:left !important;

margin:4px 7px;   /** margin **/

width:47%;        /** largura **/

max-height:270px; /** altura **/

line-height:1.2em
}
.post-body{

max-height:110px !important;/** altura interna dos posts **/

overflow:hidden
}
.post img, table.tr-caption-container {/** estilo para as imagens **/

}
#blog-pager {/** paginação **/

display:block;

width:600px;

position:static;

padding-top:30px !important
}
/** Final dos posts **/

</style>

</b:if>

</b:if>
<!-- Final do código -->


Visualize, e dando tudo certo, é só salvar.

Agora vamos personalizar o botão "Leia mais".

Vá em "Layout", e clique em "Editar" na área de postagens.

 

Agora na janela que se abriu, mudo o texto para "Leia mais", "Continue lendo" ou o que você desejar. Salve e pronto.

Próxima etapa, vá em "Modelo", "Editar HTML", dê um "Ctrl + f" no teclado e procure por ]]></b:skin>

Acima dele, cole o próximo código, alterando as cores conforme sua conveniência: 

.jump-link  {

text-align: left; /* posicionamento do leia mais */

margin-top: 15px; /* espaço que fica entre o leia mais e a postagem */

margin-bottom: 15px;

}

.jump-link a {

padding: 4px; /*acolchoamento entre o fundo e o texto */

color: #FFFAFA; /* cor do texto */

background: #1E90FF; /* cor do fundo */

font-family: arial; /* tipo de letra */

box-shadow: inset 0 0 2px #eee, 0 0 2px #ccc;  /*cor da borda*/

-moz-border-radius:  3px; /* bordas arredondas */

-webkit-border-radius:  3px;  /* bordas arredondas */

border-radius: 3px;  /* bordas arredondas */

}

Visualise e dando tudo certo, salve.

Clique em "Atualizar" e pronto.

Não deixe de ler o post O Blogger e a crise de 2017

            Quer ser um Influencer no Instagram e ganhar muito dinheiro com os seus posts ?  Saiba como acessando o link abaixo.

Influencer no Instagram