lunes, 13 de junio de 2011

Entradas en forma de lista en la portada de Blogger

He creado una condicionante que permita que las entradas en la página principal aparezcan en forma de lista tal como aparece en el siguiente blog de pruebas.

También puedes ver una vista previa observando la siguiente imagen (Clic para aumentar):










¿Cómo agregarlo a Blogger?:

Recomiendo respaldar la plantilla en caso de que el resultado no sea el deseado. 
Paso 1: Aumentando el límte de entradas permitidas en la página principal:

Primero, vé a ''Diseño | Elementos de la página'', en donde configuraremos la sección ''Entradas del blog'' aumentando el máximo de entradas en la página principal:

Elige la cantidad de entradas que quieres que aparezcan en la portada y posteriormente guarda los cambios.

Paso 2: Añadiendo las condicionantes:

Ahora en ''Diseño | Edición HTML'' buscaremos el siguiente código:
</head>

Arriba de éste, pega el siguiente:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post {
color:#fff;
margin:0px;
padding:0px;
background: #fff;
border:none;
margin-bottom:-10px;
}
.post-body {height:0px; display:none; visibility: hidden;}
.post-footer-line-1 {height:0px; display:none;}
.post-footer-line-2 {height:0px; display:none;}
.post-footer-line-3 {height:0px; display:none;}
.post-footer-line-4 {height:0px; display:none;}
.post-footer{height:0px; display:none;}
.comment-link{height:0px; display:none;}
.jump-link {height:0px; display:none}
.post-header-line-1 {height:0px; display:none;}
.post-header-line-2 {height:0px; display:none;}
.post-header-line-3 {height:0px; display:none;}
.post h3 a {font-size:14px;line-height:1.3em;color: #5A606D;}
h2.date-header {height:0px;visibility:hidden;display:none}
#blog-pager {clear:both;}
</style>
</b:if>
</b:if>

Previsualiza las modificaciones y comprueba que se vea correctamente, de ser positivo el resultado guarda los cambios.


Importante:

Es muy posible que en la plantilla algunos elementos se sigan mostrando. En ese caso, deberás idenficar qué sección es la que habrá que ocultar y le añadiremos los atributos display:none; . Por ejemplo:
#zona.ocultar {
display:none;
}

Deberás pegarlo dentro de la condicionante antes de </style>

Si tienes problemas puedes enviar tu plantilla y se modificará ya que ninguna plantilla es igual a otra y tanto los nombres como las secciones pueden variar.

No hay comentarios:

Publicar un comentario