Em outros tutoriais, eu já ensinei como definir estilos e personalizar os posts apenas na página inicial.
Atendendo a pedidos, hoje veremos como personalizar os posts dividos em colunas (no estilo magazine) apenas na página inicial e na página de marcadores.
Neste tutorial, você verá como dividir somente a área dos seus posts em colunas, onde as postagens aparecem resumidas, lado a lado.
(veja a imagem abaixo)
Demo
Antes
de mais nada, cabe salientar 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: ]]></b:skin> e cole ABAIXO dela:
Atendendo a pedidos, hoje veremos como personalizar os posts dividos em colunas (no estilo magazine) apenas na página inicial e na página de marcadores.
Neste tutorial, você verá como dividir somente a área dos seus posts em colunas, onde as postagens aparecem resumidas, lado a lado.
(veja a imagem abaixo)
Demo
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: ]]></b:skin> 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:300px; /* --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 300px.
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;
Se, por exemplo, você vai utilizar uma imagem no tamanho 300×300, 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. Neste 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:300px;
height:300px;
No código acima eu determinei 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.
ATENÇÃO:
Pode ocorrer de, após instalar este recurso, os links de navegação sumirem ou ficarem “espremidinhos” no canto ao lado da coluna.
Isso ocorre porque alguns templates apresentam um bug no link de navegação, qdo fazemos alguma modificação. Para resolver este problema, recomendo a leitura deste artigo:Corrigir bug nos links de navegação. Lá eu expliquei como corrigir esse probleminha.
Pode ocorrer de, após instalar este recurso, os links de navegação sumirem ou ficarem “espremidinhos” no canto ao lado da coluna.
Isso ocorre porque alguns templates apresentam um bug no link de navegação, qdo fazemos alguma modificação. Para resolver este problema, recomendo a leitura deste artigo:Corrigir bug nos links de navegação. Lá eu expliquei como corrigir esse probleminha.
Fonte: Mundo Blogger
Categories:
