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
Pessoal Nossos Trabalhos Terão um Preço, Só uma Colaboração Para Nossa Equipe Fazemos Uma Troca, Te Damos Conteudo e Você Nos Agradece.Não Serão Preços Absurdos,Serão Razuaveis como R$05,00 R$10,00 R$15,00 R$20,00 Cada Trabalho Tem Seu Preço.Mais Informações pixdesigner@live.com

Sem Comentários
Postar um comentário