Mostrar solo los titulos de las entradas en la pagina principal

si quieres que las entradas se expandan con solo dar click en un boton o imagen ve a la 
siquientes entradas.  →  

-Expandir solo en las paginas en etiquetas  
-Expandir Entradas Generalmente

como veran en algunos blog encuentran uno de estos tutoriales algunos muy sensillos y otros muy dificiales de agregar a la plantilla y es dia de hoy les traigo este tutorial que bueno en mi opinion no es nada que ver pero lo llamaremos asi un tutorial en el cual lo unico que tendras que hacer es pegar un simple codigo en cierta parte y tu mismo lo editaras depende que tipo de conocimiento tienes, bueno si tienes algun conociemiento en css te sera muy sencillo editar a tu gusto los titulos el hover etc...

todos bienen definidos como un class el cual todas las plantillas de blogger contienen y este codigo reemplazara si ya tiene tu plantilla lo reemplazara y tu solo agregaras estilo a tus titulos, recuerda que esto solo funciona en la pagina principal y en las paginas de etiquetas no funcionara solo en la pagina principal de tu blog entonces empezemos...

este codigo lo deveras pegar justo arriba de la etiqueta < / head >

<style type='text/css'> <b:if cond='data:blog.url == data:blog.homepageUrl'> .post { margin:.5em 0 1.5em; border-bottom:0px dotted $bordercolor; padding-bottom:1.0em; height:50px; } .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:20px; font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif; font-weight:normal; line-height:1.4em; color:#cc6600; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; text-decoration:none; color:#cc6600; font-weight:normal; } .post h3 strong, .post h3 a:hover {color:#333333;} .post-body {display:none;} .post-footer {display:none;} .comment-link {display:none;} .post img {display:none;} .post blockquote {display:none;} .post blockquote p {display:none;} h2.date-header {display:none;} .post-labels {display:none;} .post-rating {display:none;} </b:if> </style>


ahora te explicare algo sobre lo que podras editar .

en donde ves muchos atributos display:none; 
la palabra display significa mostrar y none significa no mostrar entonces cada uno de esos class que se encuentran en la parte izquierda estan definidos como no mostrar lo unico que puedes hacer es a los que quieras que se muestren cambia none por block y listo...

donde esta el atributos o class .Post { ahi defines el color o estilo de la entrada completa es decir editar el alrededor de el texto color borde etc... puedes agregar estilo aqui.

donde ves .post h3 {  ahi defines el estilo de los titulos de las entradas incluso puede agregar color o imagen de fondo. y borde.

donde ves .post h3 strong, .post h3 a:hover {color:#333333;} ahi defines dentro de {aqui} donde esta color:#333333; puedes agregar estilo al poner el mause encima de las letras como por ejemplo cambiar color de la letra tamaño o estilo.

y eso es todo gracias por leer este post.



ESCRITO POR: Andy Gomez

Comparte este articulo con tus amigos en las redes sociales y Vota por el articulo en Bitacoras.com

Twittear Compartir