Neste tutorial, você verá como dividir somente a área dos seus posts em colunas, onde as postagens aparecem resumidas, lado a lado.
Antes de mais nada, cabe informar que este tutorial aplica-se somente aos templates que possuem o hack de postagens Resumidas automática na página inicial - Hack Leia Mais Automático, portanto, para prosseguir com este tutorial, você já deve ter instalado o hack "Leia Mais" de Resumo Automático, para poder dar estilo aos posts, seguindo este tutorial.
Entre na "edição de html" do seu template,clique em 'expandir modelo de widget', e procure pela tag: ]]> e cole ABAIXO dela:
No código acima eu apliquei bordas, e determinei uma altura(height) para as colunas de 500px.
Se você quiser, pode aplicar uma imagem no lugar das bordas, para isso basta apagar o trecho que se refere as bordas e acrescentar o endereço da sua imagem neste trecho: background:url(endereço-da-sua-imagem) no-repeat;
Não esqueça que, caso você opte por inserir uma imagem de fundo para a coluna da área de postagem na página inicial, você deverá estipular a largura(width) e a altura(height) da imagem que for utilizar.
Se, por exemplo, você vai utilizar uma imagem no tamanho 500x500, deverá incluir os valores referente a altura e largura da área de post, dentro da tag que representa o espaço ocupado pela postagem para que a imagem ocupe a área toda. Nesta caso você deverá substituir width:45%;
pelo valor referente a largura da sua imagem, desta forma:
background: url(ENDEREÇO-DA-IMAGEM) no-repeat;
widht:500px;
height:500px;
No código acima está determinado que os posts apareçam resumidos e em colunas apenas na página inicial e na página de marcadores, diferenciando das páginas individuais e das páginas estáticas.
As modificações exemplificadas acima afetarão apenas a página inicial e de marcadores.
Você deve adaptar os estilos conforme sua preferência, os trechos editáveis já estão destacados no código. Tutoriais HTML
Antes de mais nada, cabe informar que este tutorial aplica-se somente aos templates que possuem o hack de postagens Resumidas automática na página inicial - Hack Leia Mais Automático, portanto, para prosseguir com este tutorial, você já deve ter instalado o hack "Leia Mais" de Resumo Automático, para poder dar estilo aos posts, seguindo este tutorial.
Entre na "edição de html" do seu template,clique em 'expandir modelo de widget', e procure pela tag: ]]> e cole ABAIXO dela:
<!-- Estilos da página Inicial Inicio -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.main .widget{margin: 0 auto;clear:both;}
h2.date-header{
margin: 0px;
padding: 0px;
text-indent: -9999em;
}
.post-footer{display:none;}
.post { /* --espaço ocupado pela postagem--*/
position: relative;
display: inline;
background:url(endereço-da-sua-imagem) no-repeat; /* --imagem no lugar das bordas--*/
width:45%; /* --largura da coluna--*/
height:500px; /* --altura da coluna--*/
float:left;
margin: 5px;
border:1px solid #ddd; /* --edite cor da borda--*/
padding:8px;
letter-spacing:0px;
font-size: 12px; /* --tamanho da fonte do texto--*/
line-height:1.4em;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
text-align:justify;
}
.post h3, .post h3 a, .post h3 a:visited, .post h3 strong {/* --estilos para o titulo das postagens--*/
display:block;
word-wrap: break-word;
font-size:16px; /* --tamanho da fonte do titulo do post--*/
font-weight:normal;
margin:0 0 15px;
padding:0;
line-height: 1.3em;
letter-spacing: -1px;
}
#showlink{ /* --estilos para o leia mais--*/
margin:5px;
display:block;
float:right;padding: 4px 7px;
font-weight:normal;
letter-spacing: 0px;
background:#66bbdd; /* ---cor de fundo--*/
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#showlink a {
color: #ffffff; /* escolha a cor de seu link */
}
</style></b:if></b:if>
<!-- Estilos da página Inicial Fim -->
No código acima eu apliquei bordas, e determinei uma altura(height) para as colunas de 500px.
Se você quiser, pode aplicar uma imagem no lugar das bordas, para isso basta apagar o trecho que se refere as bordas e acrescentar o endereço da sua imagem neste trecho: background:url(endereço-da-sua-imagem) no-repeat;
Não esqueça que, caso você opte por inserir uma imagem de fundo para a coluna da área de postagem na página inicial, você deverá estipular a largura(width) e a altura(height) da imagem que for utilizar.
Se, por exemplo, você vai utilizar uma imagem no tamanho 500x500, deverá incluir os valores referente a altura e largura da área de post, dentro da tag que representa o espaço ocupado pela postagem para que a imagem ocupe a área toda. Nesta caso você deverá substituir width:45%;
pelo valor referente a largura da sua imagem, desta forma:
background: url(ENDEREÇO-DA-IMAGEM) no-repeat;
widht:500px;
height:500px;
No código acima está determinado que os posts apareçam resumidos e em colunas apenas na página inicial e na página de marcadores, diferenciando das páginas individuais e das páginas estáticas.
As modificações exemplificadas acima afetarão apenas a página inicial e de marcadores.
Você deve adaptar os estilos conforme sua preferência, os trechos editáveis já estão destacados no código. Tutoriais HTML
Sem Comentários
Postar um comentário