Mostrar el primer post de forma diferente

5 de enero de 2010 214 comentarios ,
Hace unos meses JMiur comentaba que Blogger había incluido una nueva etiqueta en sus códigos, <b:if cond='data:post.isFirstPost'>
isFirtsPost es un código que condiciona un evento cuando se trata del primer post del blog, es decir, el último que se ha publicado.
Ayer recordaba que cuando publiqué la entrada de cómo dejar un post siempre arriba del blog alguien me dijo por correo que aunque era muy efectivo el método para dejar la entrada siempre arriba no era muy útil para todos, pues la idea de muchos es dejar una entrada siempre arriba a modo de bienvenida o presentación, pero si esa primera entrada se ve igual al resto de las entradas entonces deja de parecer una presentación.
Así que me puse a investigar un poco y me encontré en Blogger Dikas una solución no sólo para quienes quieren tener una entrada siempre arriba y que tenga un estilo diferente, sino para quien quiera que el primer post se pueda diferenciar del resto de las entradas.
Puedes ver un ejemplo en este blog de pruebas, verás que el primer post tiene un color de fondo, borde y texto diferente.

Antes de hacer este hack haz un respaldo de tu plantilla, luego entra en Plantilla | Edición de HTML, y busca esta línea:
<b:include data='post' name='post'/>

Selecciónala y sustitúyela por esto:
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<p><data:post.body/></p>
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span>&#160;</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>
</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>


</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Ahora vamos con los estilos, que es la parte que se encargará de darle un aspecto diferente.
Antes de ]]></b:skin> pega lo siguiente:
/* Primer post
----------------------------------------------- */
#first { /* Estilos del contenedor del primer post */
margin: 0px 0px 10px 0px;
padding: 0px;
float: left;
background: #F5A9D0;
border: 1px solid #1b1b1b;
}

.first-body { /* Estilos para el texto del post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align: justify;
color: #2E2E2E;
}

#first h3 { /* Estilos para el título del post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-family: 'Palatino Linotype';
font-weight: bold;
text-align:center;
line-height: 1.4em;
color: #f5f5f5;
}

#first h3 a, #first h3 a:visited { /* Color del título */
color: #DF0174;
}

#first h3 a:hover { /* Color del título al pasar el cursor */
color: #fff;
}

.first-body img { /* Estilo para las imágenes */
padding:10px;
background:#fff;
border: 0px;
}

#first .comment-link { /* Estilo para el link de los comentarios */
float:right;
padding: 0px 5px 15px 0px;
}

Ahí puedes cambiar los estilos que quieras, el color del fondo, el color del texto, del título, etc. Puedes agregar o quitar todos los estilos que desees; ayúdate con las anotaciones hechas a los lados para identificar a qué corresponde cada estilo.

De esta forma tendrás el primer post del blog mostrándose de una forma distinta al resto de las demás entradas.


214 comentarios en:

" Mostrar el primer post de forma diferente "

  1. Es verdad Bro, eso de poder personalizarla hace que se cumpla mejor el objetivo de dejar una entrada siempre primera. Lo que queremos es llamar la antencion para que el usuario lo lea, y con el resalte como el que haz hecho en el blog de pruebas se logra muy bien, de hecho fue lo primero que me llamo la atencio apenas entre.

    Un abrazo!!!

    ResponderEliminar
  2. De hecho así como lo mencionas también puede ser un recurso para llamar la atención del lector a leer el primer post.

    Un abrazo!

    ResponderEliminar
  3. Lamentablemente interfiere con los Dock Icons.
    Commo lo hiciste, veo que en el blog de pruebas no interfiere.

    ResponderEliminar
  4. sabes que pasa, que el menu deslizable hace eso.
    El primer codigo.
    Como lo arreglo para que tambien aparezca el dock menu.

    ResponderEliminar
  5. Hola El Venado,

    No tendría por qué interferir, los menús que mencionas ambos funcionan con JQuery, este hack no funciona con ningún script externo, sólo se está usando el nuevo código condicional de Blogger.
    Quizá estás poniendo Vista Previa, si es así parecerá que el menú no funciona, necesita guardar los cambios para ver funcionando el menú.

    Saludos.

    ResponderEliminar
  6. Como siempre... Excelente...

    Esa será la idea fundamental para mi nuevo Blog (con algunas otras recopiladas de un sitio buenisimo: "Ciudad Blogger" jajaja)

    Muchas Gracias....

    ResponderEliminar
  7. Hola!
    El primer post me sale de forma diferente como tu ejemplo, pero el post que está anterior se deforma, y además el cuadro de la fecha del post anterior se queda arriba.
    Para tratar de arreglar eso cambié float: left; por float: right;, no se si es correcto que haga eso?. Con eso conseguí que el anterior post baje a su lugar, pero el cuadro de la fecha del post anterior se sigue quedando arriba, además la fecha se sube también.
    Y el primer post con el anterior se han pegado mucho, no se si eso se podrá arreglar.

    Ah y se puede lograr que se vea mi icono y numero de comentarios que esta en la esquina superior derecha?, porque yo no quiero que se vean los comentarios en el post footer.

    Este es el blog por si lo quieres ver. El float lo dejé como tu lo pones:
    http://mi1212.blogspot.com/
    Gracias!

    ResponderEliminar
  8. Hola Concepto Noticias,

    Muchas gracias por el enlace ;)
    Sólo es posible cambiar el aspecto del primer post, o bien, puedes cambiar el aspecto de todos los posts pero los cambios se aplican a todas las entradas sin importar si es el primero, el segundo, etc.

    Saludos.

    ResponderEliminar
  9. Hola Mayra Falcón,

    El problema ahí no es la propiedad float, sino que los estilos de la fecha tipo calendario causan conflicto con los estilos del primer post.
    Siempre que se tiene la fecha de esa manera causa conflictos y se desalinean los posts :(
    El link de los comentarios sí se puede. Haz lo mimo que hiciste para que apareciera de esa forma en tus entradas; recuerda que hay que pegar un código debajo de <b:if cond='data:post.title'> lo mismo debes hacer debajo de esa etiqueta que también aparece en el código que aparece en esta entrada.

    Saludos.

    ResponderEliminar
  10. a que te refieres con el estilo del contenedor y del texto ?

    ResponderEliminar
  11. Hola hojalataa,

    El contenedor en este caso es todo el espacio donde va el post y los estilos del texto son el color de la letra, tipo de letra, etc.

    Saludos.

    ResponderEliminar
  12. Hola, Gracias por el Aporte. Pero no se que estoy haciendo mal. Me gustaria que salga la opcion Leer Mas, al igual que en la demas entrada...Saludos

    ResponderEliminar
  13. Hola Wagner Nolasco,

    Necesitaría ver tu blog para saber qué sistema de Leer más usas y ver si se puede incorporar también al primer post.

    Saludos.

    ResponderEliminar
  14. Saludos quisiera saber como puedo personalizar cada pagina de mi blog con gadgets distintos. O sea que cada pagina tenga sus propios gadget independientemente de la pagina principal

    Gracias

    ResponderEliminar
  15. Hola Ronald,

    Ya te he respondido en la otra entrada.
    Saludos.

    ResponderEliminar
  16. Hola esta muy bueno esto....
    pero yo uso una plantilla que tiene las entradas resumidas y con una imagen en miniatura... y con la opcion "Leer Más" y al agregar esto la 1º entrada se ve verticalmente... como lo ago para que se vea horizontalmente.. al igual que las demas entradas.

    Este mi Blog.
    http://www.carlitocomparte.blogspot.com/

    Saludos y muchas gracias

    ResponderEliminar
  17. Hola MCarlitooH2,

    Varía mucho de qué método uses para el Leer más.
    Haz un respaldo de tu plantilla y prueba con esto:

    En el código que menciono que debes sustituir por la etiqueta <b:include data='post' name='post'/> busca esta parte:
    <p><data:post.body/></p>
    Cámbiala por esto:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span id='showlink'><a expr:href='data:post.url'> [ ... ]</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

    Saludos.

    ResponderEliminar
  18. Hola potro, tengo una duda que no he encontrado por el Blog, haber si me puedes ayudar.
    He intentado colocar en el margen de debajo de los Títulos de las entradas la fecha-publicado por...-etiquetas en arial 10, lo he intentado varias veces y no he sido capaz, además de que me cambia el color del fondo del post. Como puedo solucionarlo.
    Gracias de antemano
    Un saludo

    ResponderEliminar
  19. No he entendido bien, ¿quieres que las etiquetas, la fecha y el autor estén en Arial 10px?
    Si es así, dime en cuál plantilla quieres hacerlo para ver las posibles formas de hacerlo.

    Saludos.

    ResponderEliminar
  20. Quiero colocar esos datos como en tu blog, es decir justamente debajo del Título de la entrada y en tamaño 10px
    Ej.:
    MOSTRAR EL PRIMER POST DE FORMA DIFERENTE
    martes, enero, 05 2010|Publicado por el Potro|Etiquetas
    Gracias
    redecohogar.blogspot.com

    ResponderEliminar
  21. Expande los artilugios de la plantilla y selecciona desde esta etiqueta:
    <div class='post-footer'>

    Hasta el segundo </div> que se encuentra en esta parte:
    <div class='post-footer-line post-footer-line-3'/>
    </div>
    </div>

    Selecciona todo eso, cortalo y pégalo debajo de esta línea:
    <div class='post-header-line-1'/>

    Ahí ya estará debajo del título, ahora busca esta parte:
    .post-footer {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#EEEEEE none repeat scroll 0 0;
    border-top:1px solid #CCCCCC;
    color:#666666;
    font-family:arial;
    font-size:12px;

    Cambia los 12px que están en negrita por 10px

    Saludos!

    ResponderEliminar
  22. Hola, Potro. Hace rato ya que implementé este truco en mi plantilla y me resultó excelente (pero no regresé a agradecer...uuups!). Bueno, mejor es tarde que nunca, ¿no? Por eso te digo ahora: ¡Gracias!!!!
    Y quisiera aprovechar para una consulta:
    Yo usé esto del primer post distinto para una entrada de bienvenida. Y como es solo de bienvenida, más bien le quité opciones (como etiquetas, comentarios, reacciones, etc.) para dejarle solo lo que yo quiero que aparezca.
    Pero por mucho que he batallado, aún no logro quitarle la fecha a ese primer post. Es que como tiene una fecha a futuro(para que siempre aparezca de primero), preferiría entonces que no se muestre la fecha (pero solo en ese primer post).
    Ya intenté poniendo el visibility: hidden en la fecha del primer post y otras cosas más; pero nada me ha resultado.
    ¿Cómo podría hacer en mi caso? De antemano, te doy las gracias por tu ayuda.

    ResponderEliminar
  23. Ah por si sirve de algo, la plantilla que uso es una de las clásicas de Blogger.

    ResponderEliminar
  24. La fecha no viene incluida dentro del código que hemos usado para mostrar el primer post de forma diferente, pues el código de la fecha está fuera de él, se maneja aparte.

    Lo único que se puede hacer es condicionar para que la fecha de TODAS las entradas se vea sólo cuando se está en la entrada individual y no en la portada, pero esto afecta a todos los post.

    Saludos.

    ResponderEliminar
  25. Hola Potro! Gracias por tu pronta respuesta.
    Ahora comprendo. Y como no se puede, entonces sí me interesaría implementar eso último que dijiste (de que la fecha solo aparezca en la página individual de la entrada). ¿Cómo se hace eso? ¿Me podrías explicar, si no es mucha molestia, o darme alguna referencia? Muchas gracias.

    ResponderEliminar
  26. Hola de nuevo Vicky, no es ninguna molestia :)

    En ese caso usaríamos los códigos condicionales para que sólo aparezca en las entradas individuales.
    Específicamente sería buscar este código (con los artilugios expandidos) y agregar lo que está en negrita:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>

    Saludos!

    </b:if>

    ResponderEliminar
  27. Perdón, se me fue el Saludos! dentro del código :P
    Ese no va :D

    ResponderEliminar
  28. Hola Potro! Ya creía yo que ese era un código de lenguaje nuevo (ja,ja,ja!). No, mentira.
    Ya, hablando en serio, eso es precisamente lo que yo necesitaba. Todo me funcionó perfecto. Realmente muchísimas gracias.

    ResponderEliminar
  29. Hola Potro! Ya creía yo que ese era un código de lenguaje nuevo (ja,ja,ja!). No, mentira.
    Ya, hablando en serio, eso es precisamente lo que yo necesitaba. Todo me funcionó perfecto. Realmente muchísimas gracias.

    ResponderEliminar
  30. Jajajajaja, es para poder meter mensajes subliminales dentro de un código :P
    Qué bueno que te ha resultado!

    ¡Buen fin de semana!

    ResponderEliminar
  31. como se puede mos trar la ultima entrada de un tamaño mas grande que las demas entradas

    ResponderEliminar
  32. ¿A qué te refieres con un tamaño más grande?
    ¿A ocupar todo el espacio y eliminar la sidebar?
    Si es así puedes hacerlo usando los códigos condicionales.

    Saludos.

    ResponderEliminar
  33. una conculta es posible cambiar tambien el tamaño de la primera entrada? osea el ancho de la entrada pero solo de la primera?

    ResponderEliminar
  34. El área de las entradas es un mismo y solo contenedor, si amplias una se amplían todas.

    ResponderEliminar
  35. Hola, Potro! Este truco me ha funcionado perfectamente. Excepto una cosita:
    Mi plantilla es una clásica de Blogger y he visto que ésta como que auto-ajusta (el ancho de cabecera, columna lateral, footer e incluso las entradas) de acuerdo a la pantalla y también de acuerdo a las dimensiones que uno mismo le dé a la ventana en donde está viendo mi página.
    Cuando he visto mi blog en otras PCs con monitores más amplios que el mío, sucede (y esto solo con el primer post), que éste no se auto-ajusta, conjuntamente con los demás elementos del blog; sino que sigue conservando el ancho original de lo publicado, sin llegar a llenar el ancho del main cuando se expande todo el blog.
    Por eso, la entrada que sigue debajo de la primera se sube y se monta en parte junto al primer post, hasta rellenar todo el ancho del main expandido.
    Así, quedan como si fueran 2 post en el main, a lo horizontal, pero desajustados. Y el segundo post luego continúa hacia abajo, rellenando su propio espacio.
    No sé si me explico. El asunto es que cuando esto sucede se ven mal el primero y segundo post, pues ambos quedan todos desajustados.
    Porfa, ¿me podrías ayudar remediar este inconveniente?
    Muchísimas gracias por toda tu atención y disculpa.
    Hasta luego!

    ResponderEliminar
  36. Hola Vicky,

    Puede ser por alguna modificación que le hayas hecho a la plantilla, pues lo acabo de probar en esa plantilla y la primera entrada se expande junto con las demás entradas cuando maximizo la ventana del navegador, todo en orden.

    Esa plantilla en lugar de usar pixeles en los anchos de los contenedores usa porcentajes justamente para que el contenido se ajuste al tamaño de la pantalla. De cualquier modo si te fijas en los estilos del primer post no hay ningún indicador de medida que obligue a esa entrada a tener un tamaño específico, sino que ocupa el mismo ancho que tenga configurado el blog.

    Así que debe ser algún estilo o algún otro código que has de haber modificado que lo ocasiona.

    Saludos.

    ResponderEliminar
  37. HOLA POTRO, NECESITANDO DE TU AYUDA OTRA VEZ

    NO HE ENCONTRADO DONDE PONER ESTA PREGUNTA, ASÍ QUE LA PUSE AQUI, ESPERO NO MOLESTAR.
    QUISIERA QUITAR ESTAS LETYRAS DEBAJO DE CADA´TÍTULO DE MI POST YB PÁGINA ----Published by FLAMAS DE FUEGO under on 18:42---- COMO LE PODRÍA HACER. MI BLOG ES MINISTERIOFLAMASDEFUEGO.BLOGSPOT.COM

    ResponderEliminar
  38. Normalmente se hace yendo a Diseño > Elementos de la página y click en Editar sobre el elemento Entradas del blog, ahí se desmarcan todas las opciones que no queremos que aparezcan.
    Si tu plantilla es muy modificada y no funciona con eso, necesitarás hacerlo manualmente desde la Edición de HTML.
    En el siguiente enlace hay una entrada de Gem@ que explica cómo poner de nuevo esos datos, tú has lo contrario, localiza cada código que ella menciona y elimínalo de tu blog:
    http://gemablog-.blogspot.com/2009/05/recuperar-datos-en-post-footer.html

    ResponderEliminar
  39. wuaaaaaaaaaaauuuuuuuuuuuuu, gracias POTRO me salvaste otra vez, gracias de nuevo.

    Excelente página, de las mejores que he visto en mi cortita vida jeje

    ResponderEliminar
  40. Hola, Potro. Gracias por tu atención.
    Porfa, entra a este blog de pruebas, para que veas lo que me está sucediendo.
    http://masdelatierra.blogspot.com/
    Saludos!...

    ResponderEliminar
  41. Supongo que el problema puede estar en un estilo, como dices tú.
    Es que yo no puse todos los estilos exactamente como los pusiste en este post. En realidad, le cambié algunos y otros los suprimí. Quizás allí esté el problema.
    Te envío adjunto, a través de tu formulario de contacto, un archivito de texto con los estilos que tengo en mi plantilla para el primer post diferente, por si tienes un tiempito para revisarlo.
    Gracias por todo...!

    ResponderEliminar
  42. Hola Vicky,

    Sí que es extraño, lo que no había notado era que sólo sucedía si la entrada era angosta, pues la que yo puse de prueba en esa plantilla era ancha y por eso no lo noté.

    Para solucionarlo agrega debajo de:
    #first { /* Estilos del contenedor del primer post */

    Un ancho que obligue a expandirse la entrada, en este caso será:

    width:99%;

    Con eso ya no deberás tener problemas.
    ¡Saludos!

    ResponderEliminar
  43. Hola, Potro! Wao! Eso era exactamente!
    Dejé las entradas igualitas como estaban, y lo único que hice fue agregar ese código que me dijiste y todo salió perfecto.
    GRACIAS!!!
    (Entra de nuevo a la página de pruebas para que veas).
    Me parece que podría ser bueno si hicieras en tu post la aclaración de ese pequeño código para tus ciudadanos que usan plantillas clásicas de blogger, pues en un futuro podría sucederles lo mismo que a mí. Así ya podrían de antemano, como dice el refrán, "curarse en salud".
    Gracias de nuevo por toda tu ayuda y paciencia.
    Hasta luego!

    ResponderEliminar
  44. Qué bueno que ya se arregló entonces.
    Creo que por eso nunca me han convencido las plantillas que usan porcentajes como medida en lugar de pixeles, pero al menos en este caso sí tiene solución.

    ¡Saludos!

    ResponderEliminar
  45. Potro... te he leido muchas veces en busca de soluciones y la verdad es que me has sido de gran ayuda. Llevo varios meses intentando solucionar un par de problemas por mi mismo pero no lo consigo. Ojala me puedas hechar una mano;

    Problema 1: Use el codigo para mostrar mi primer post de forma diferente... y desaparecio el "leer mas". Use la solucion que pusiste aqui... y funcionó, pero no consigo que tenga el mismo formato (caja de texto, tipografía, etc) que la de los otros post.

    Problema 2: Esto es distinto; Tengo un problema curioso y creo que frecuente, cuando hago scrol en mi blog ciertos elementos vibran (Seguidores, videos de youtube)ect. Pero solo pasa si lo abro con Firefox, curiosamente cuando tengo fijado el pattern tiemblan los elementos, si lo dejo desplazarse no tiemblan. Pero a mi megustaria tener el pattern estatico y que no temblase nada al hacer scrol.

    http://anothergames.blogspot.com/

    Tanto si tienes un rato como para echarme una mano como si no, te estoy ya agradecido. Gran parte de mi diseño te lo debo a ti.

    ResponderEliminar
  46. Hola Ark,

    Los estilos de la tipografía del primer post los puedes cambiar donde dice:
    /* Estilos para el texto del post */

    Ahí puedes agregar otros, por ejemplo el tipo de letra:
    font-family:Arial;

    Aunque dejame aclarar que el comentario en el que dí una solución para el Leer más es para quien usa el Leer más automatizado, no el de Blogger que creo que es el que tú usas. En el caso de quienes usan el Leer más de Blogger basta con que la primera entrada no le pongas el Leer más.

    Respecto a lo que mencionas del fondo del blog, he entrado desde Mozilla Firefox 3.6.3 y no se ve ese problema, bajo el scroll de la página y todo está normal, sin cambios ni movimiento, lo que me hace pensar que podría ser tu navegador o la memoria de tu equipo.

    Cualquier otra duda estoy a tus órdenes.
    Saludos.

    ResponderEliminar
  47. GRACIAS POTOR POR TU AYUDA... ARK BUEN BLOG SOBRE VIDEOJUEGOS ME PAPRECIO GENIAL

    ResponderEliminar
  48. Vengo a pedir ayuda y gano a un posible lector.... gracias nejo@, el blog es amateur, pero creo que ire haciendolo algo mejor poco a poco.

    Potro muchísimas gracias, me siento ridiculo el problema de los temblores, era ese... Tenía el firefox sin actualizar y creeme que estuve meses probando cosas.

    Lo de "leer mas" tengo que mirarlo un poco mas, quiero conseguir que sea exactamente el mismo para todos los post, al final daré en la tecla adecuada.

    ResponderEliminar
  49. De hecho muchos de los problemas con las páginas web se debe a las versiones de los navegadores, si bien no todos los navegadores son 100% eficaces, al menos se debe tener siempre la última versión pues eso supone que los desarrolladores han mejorado esos detalles.

    Saludos.

    ResponderEliminar
  50. saludos potro tengo una duda, y como hago para que el primer post no sea mostrado en el feed por ejemplo tengo una Bienvenida en un post estatico y logicamente no quiero que llegue siempre en el rss..

    Enlace: http://soportamepc.blogspot.com

    Saludos y de verdad que si tienes una excelente página

    ResponderEliminar
  51. Lamentablemente en el feed no podemos hacer mucho, por defecto lee todo el contenido sin poder hacer excepciones lo cual sería magnífico para casos como el tuyo.
    De cualquier manera si encontrara algún método te lo haré saber publicándolo en el blog.

    Saludos y gracias por tus comentarios!

    ResponderEliminar
  52. Potro :) soy el novato de los novatos en esto je pero le voy agarrando la mano, he visitado muchos sitios donde publican trucos para el blog pero en ninguno encontre la claridad con la que se prensentan los temas como aqui, asi que te comento que me has sido de mucha ayuda, gracias.

    Quisiera saber como puedo hacer que cada vez que publique un post nuevo se detaque del resto pero que no quede estatico ya que cuando publique un nuevo post quiero que sea este el que se destaque ahora; y para que tampoco se repita la misma informacion pero con las caracteristicas del resto de los post (formato, color, etc) abajo del destacado, sino que se vea el artículo una sola vez y con las caracteristicas de destacado por ser nuevo. GRACIAS!!!

    ResponderEliminar
  53. Hola ale_87cba,

    Muchas gracias por tus comentarios, me da mucho gusto saber que aquí has encontrado cómo resolver ciertos problemas con tu blog.
    No te he entendido muy bien lo que deseas, en si parece que es justo lo que este truco hace, destaca de forma distinta el primer post, y siempre el primer post es el último en ser publicado, por lo tanto, cada vez que publiques un post éste tendrá un aspecto distinto al resto, y cuando publiques otro nuevo desplazará al anterior y ahora será el nuevo el que tenga el aspecto distinto.
    No sé si sea exactamente eso lo que estás buscando.

    ¡Saludos!

    ResponderEliminar
  54. AHH genial!!! Muchas gracias!!!

    Lo que no me gusta de este 'truco' es que al primner post lo destaca, pero no solo lo destaca sino que lo copia y lo presenta otra vez abajo del destacado de manera igual pero con las caracteristicas (formato, color, etc) de los post anteriores; me gustaria que el post salga una sola vez y no dos (una como destacado y otra igual como viejo), se puede hacer eso?

    GRACIAS POTRO!

    ResponderEliminar
  55. No, no, no lo debe repetir, si así te ha sucedido verifica que has remplazado la etiqueta que se menciona, o bien, que no tengas duplicada esa línea pues no debe repetir la información, el primer post sí debe aparecer diferente pero no debe salir repetido.

    ¡Saludos!

    ResponderEliminar
  56. Gracias potro! muchos deben tener una imagen tuya plastificada para rezarle jaja

    ResponderEliminar
  57. Hola! Ante todo estoy encantado con la ayuda que me diste en un meil que te envié, ahora mi blog ya etsá muuuuucho mejor. Lo agradezco mucho, mucho...

    Lo que tengo una duda sobre este post, podría hacer esto con la última entrada del blog? es decir, el primer post que hice al crear el blog. Lo digo porque ahí tengo el formulario de contacto para que la gente que quiera contactar conmigo lo haga desde ese post, ya que retrasé la fecha del post, hasta ponerlo el más antiguo.

    Sería de gran ayuda que me dijeses si se puede hacer, y si no, no pasa nada! Agradezco de antemano cualquier respuesta.

    Saludos! : )

    ResponderEliminar
  58. Lamentablemente no hay una condicional para el último post, por lo que no se podría hacer de este modo.
    Lo único que se me ocurre es que le pongas una imagen de fondo o un color de fondo sólo a esa entrada, aquí se explica cómo.

    Saludos.

    ResponderEliminar
  59. Verdaderamente es excelente. La pregunta ahora es si no se podría hacer lo mismo haciendo isSecondPost o eso no existe como tal?

    ResponderEliminar
  60. No existe esa condicional, sólo la del primer post.

    ResponderEliminar
  61. Oka!! Muchas gracias potro!!! Es sensacional el blog

    ResponderEliminar
  62. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  63. Como te va Potro.
    Vengo a tu blog por una referencia de Jessica. Le pedí ayuda y me dijo que tu tenías publicada una entrada sobre el tema así que me mando un link a esta entrada y en el comentario anterior copió mi consulta (la verdad es que le envié la consulta por correo y no leí su respuesta así que debió pensar que no quería entrar a tu blog por eso dejo mi consulta aquí).

    Quisiera que me ayudaras con ello y también si me podrías decir cómo hago para poner esas flechitas que tienes en tu blog para subir y bajar y también cómo hago para poner esos logos iconos de redes sociales que tienes casi al final de la página.

    Thanks

    ResponderEliminar
  64. Huy parece que Jessica borró el comentario de mi consulta.
    Bien no sé si la leíste pero el asunto es que leí en una entrada de Chica Blogger sobre este tema del primer post diferente http://chicablogger.com/blogger-el-primer-post-con-un-estilo-diferente-ii/ pero cuando lo aplico pasa que no se muestra el footer de las entradas como le mencione a Jessica.

    Le pregunté a Chica Blogger pero hasta ahora no me llega respuesta (aunque puede que pase lo que sucedio con el mensaje de Jessica que llegó a Spam, no sé). Y luego Jessica me dijo que aquí tenían también una entrada sobre el tema.

    Así que ojala puedas ayudarme brother. ya quiero terminar de diseñar mi blog para ponerlo en funcionamiento y solo dedicarme a publicar entradas.

    Ahh y por favor no te olvides de mis otras consultas (las flechas y los iconos). La verdad soy muy enredado al escribir asi que espero que se me haya entendido algo.

    Thanks.

    ResponderEliminar
  65. En el mensaje olvidé mencionar el link a tu blog Juan Carlos; no sabía que mi mensaje llegó a tu Spam pero como enviaste varios mensajes con la misma pregunta a pesar que te respondía pensé que lo mejor sería hacer la consulta por ti incluyendo un link a tu blog para que pudiesen ayudarte ya que en mi blog no tengo aún una entrada sobre el tema.
    Ya sabes entonces que debes de revisar también esa carpeta llamada Spam; probablemente estuvieron ahí los mensajes de Chicablogger.

    Disculpe Potro por las molestias.

    Un saludo!

    ResponderEliminar
  66. Hola Juan Carlos P,

    No puedo asesorarte sobre lo que otras personas publican pero justamente lo que se menciona en esta entrada es sobre cómo mostrar el primer post de forma diferente y supongo que es es lo que estás buscando, así que sólo es cuestión de seguir las instrucciones que se indican.

    Sobre las flechas, mira esta entrada.

    Saludos.

    ResponderEliminar
  67. No hay de qué Jéssica YK, gracias por la referencia.
    Saludos.

    ResponderEliminar
  68. Está muy Padre el Efecto! Lo puse en http://eldiariodel5a.blogspot.com/ pero, no me sale, ¿Podrían aclararmelo en mi CBox? Un beso Enorme para todos! ;)

    ResponderEliminar
  69. Sólo hay que seguir exactamente los pasos que se indican en la entrada.

    ResponderEliminar
  70. Ola potro dejame felicitarte es un muy buen blog que ayuda a los demas que estamos un poco perdidos en esto aun, pero sabes yo toy haciendo un blog de softwares y ps tengo una entrada arriba siempre arriba activada, pero mi problema es que cuando aplique el estilo de resumenes, ps bueno esta entrada tambien aparece en forma de resumen y yo no kiero que aparesca asi ps mi querido amigo potro, tambien kiero que cuando yo haga clic en alguna entrada resumina y este visualizando la entrada completa bueno arriba tambien tiene que aparecerme la entrada principal...no se que solucion podrias dar a esto ps ya me mate buscando todo el dia y nada mi blog es el siguiente http://www.xtucuevax.blogspot.com.

    Bueno la web de la cual capte esa idea es http://www.windowsdesatendidos.com.es

    Espero que puedas ayduarme amigo xfavor....muchas gracias ya de antemano un abrazo desde Ica - Peru

    ResponderEliminar
  71. o quizas pueda poner una pagina ahi arriba reemplazando a la entrada pero la verdad no se como hacerlo ayudame xfavor

    ResponderEliminar
  72. Buenisimo tu blog y tus ayudas.
    Soy nuevo en esto de los blogs y he seguido paso a paso algunos de los consejos y he instalado "Leer mas automatico con imagenes en miniatura" aunque las imagenes no las utilizo.
    Resulta que al añadir mostrar el primer post diferente y hacer los cambios que mencionas en comentarios para que salga leer mas,este sale diferente (no me sale leer mas, sino un corchete con puntos suspensivos) como te muestro en blog de pruebas... nonoffdax.blogspot.com
    Si puedes me dices que debo hacer.
    Gracias por atenderme y te dejo mi blog para que veas como sale leer mas y la intencion de mostrar el primer post de forma diferente
    Daxdoit.blogspt.com

    ResponderEliminar
  73. gerbert, mira esta entrada que explica cómo poner las entradas resumidas menos en el primer post.


    Daxdoit, gracias por tus comentarios. El hack para mostrar el primer post de forma diferente sólo se aplica cuando no hay scripts de entradas resumidas en el blog. Hay otra opción que es la de Entradas resumidas estilo magazine 2, podrías aplicar ese truco y omitir la parte en la que los posts de abajo quedan en columna, de modo que todas queden iguales en resumen pero que la primera resalte de forma distinta.

    ResponderEliminar
  74. Hola potro, buenisimo blog. Tengo 2 preguntas.

    1° ¿Hay forma de colocar un HTML entre 2 post?

    En este caso colocar el primer post, luego un HTML (una imagen, texto, script, lo que yo quiera), y luego el resto de los post. O también me serviría colocar el primer post en una parte distinta, por ejemplo, en el header.

    ¿Se puede?

    2° ¿Se puede partir los posts en 2?
    Es decir, que aparezca una parte del post, luego un quiebre donde se pueda poner cualquier cosa, y luego el resto del post. Esto para todos los posts. Mi idea es colocar arriba la descripción, abajo los links de descarga, y entre medio cualquier cosa que yo quiera.

    Este es mi blog: http://www.labibliotecamedica.org

    Espero tu respuesta, muchas gracias.

    ResponderEliminar
  75. Hola, sobre la segunda pregunta creo que encontre algo que me sirve aquí. http://ciudadblogger.com/2010/01/adsense-en-medio-de-las-entradas.html

    Sin embargo me gustaría saber si hay otra forma de hacerlo.

    Muchas gracias.

    ResponderEliminar
  76. Hola Bibliotecario,

    Tanto como poner un gadget entre los posts no pero sí puedes poner ciertos elementos tales como imágenes, Adsense, texto, etc.
    Para hacerlo sólo expande los artilugios de la plantilla y antes de:
    </b:includable>
    <b:includable id='status-message'>

    Pega el código de la imagen, texto o lo que sea que quieras mostrar.
    Lo segundo no se puede, las entradas no se fragmentan, en el caso de Adsense en medio de las entradas no es que se fragmenten sólo se agrega el anuncio donde se desea.

    ResponderEliminar
  77. muchas gracias por la respuesta. Si pego el texto bajo

    este texto se mostrará bajo la primera solamente o entre todas las entradas? porque necesito que se muestre solo bajo la primera entrada

    ResponderEliminar
  78. no aparecio completa. queria preguntar si pego el texto bajo este texto se mostrará bajo la primera entrada solamente o entre todas las entradas? porque necesito que se muestre solo bajo la primera entrada.

    Muchas gracias nuevamente.

    ResponderEliminar
  79. Que tal potro,

    Quisiera hacerte una pregunta.. Me interesa mucho poder hacer esto pero mi pregunta es si hay alguna forma de poder sacar en la primera entrada la parte de la fecha de publicacion, la cantidad de comentarios y demas cosas solamente para la primera entrada y que el resto de las entradas lo tenga. Desde ya muchas gracias!

    ResponderEliminar
  80. Hola matink,

    Para lo de la fecha mira el comentario #28, para sacar el número de comentarios elimina en el primer código que has pegado esta parte:

    <div class='post-footer'>
    <span class='post-comment-link'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>
    </b:if>
    </span>
    </div>

    ResponderEliminar
  81. Muchas gracias otra vez potro! Eres un genio :)

    ResponderEliminar
  82. Estimado al cambiar el primer post. No muestra el "LEER MAS" de dicho articulo, SI EN EL RESTO. Pero el primero queda con una Linea Blanca trasversal que reemplaza al ...ALGUNA SOLUCION?

    ResponderEliminar
  83. ¿Cuál método has usado para poner el Leer más?

    ResponderEliminar
  84. Gracias por tu respuesta, utilizamos la etiqueta en la edicion de entradas por HTML. Nos reemplaza el "mas información" que tenemos en los demas artículos por una Linea blanca semigruesa que se pone arriba del link de comentarios...No pudimos solucionarlo todavía. Gracias...

    ResponderEliminar
  85. no salio escrito. La etiqueta es "more", escrita como se debe.

    ResponderEliminar
  86. Ya he actualizado el primer código que debes remplazar con el cual tendrá habilitada la función de Leer más. Copialo y pegalo de nuevo para que surja efecto.

    Saludos.

    ResponderEliminar
  87. Che Disculpa que te moleste, tengo un problema sigo todos los paso pero cuando quiero guardar me aparece este error:

    or favor, corrige el siguiente error y envía la plantilla de nuevo.
    La plantilla no es válida porque la etiqueta "div" aparece dentro de la etiqueta "head".

    Por Favor ayudame, Gracias :)

    ResponderEliminar
  88. Pues según ese error estás poniendo el código en otro lugar o sin darte cuenta estás eliminando algún otro.
    Prueba hacerlo de nuevo verificando que remplaces sólo la línea que se ha mencionado y que pegues el código completo.

    Saludos.

    ResponderEliminar
  89. Disculpa pero como cambio de color el fondo y eso ?

    ResponderEliminar
  90. Mi blog http://sanlorenzo-arg.blogspot.com/ por favor ayudame con la entrada de Bienvenida!

    ResponderEliminar
  91. En la parte donde dice /* Estilos del contenedor del primer post */ verás que dice:
    background: #F5A9D0;

    Eso que está en negrita es el código del color de fondo, puedes cambiarlo por el que tú desees.

    ResponderEliminar
  92. Muchas Gracias por tu por comentarios 91 y 92 y tu ayuda, lo hemos solucionado.

    ResponderEliminar
  93. jejeje ahora por acá!!! oye como se cuales son los códigos de los colores o del tipo de letra?... gracias por tu paciencia

    ResponderEliminar
  94. Mira en esta entrada, hay un enlace para que veas los códigos de los colores.

    ResponderEliminar
  95. Ante todo gracias por compartir tu sabiduria con nosotros y felicidades por el blog.

    Me surge un problema (o varios), a ver si me puedes echar una mano:

    Añadí esta variación del primer post para que se vea distinto, pero no me funciona correctamente, sobre todo en MZ.FIREFOX.

    Me explico:

    Por un lado y primordial, me encuentro con el problema que en MZ FIREFOX no me permite activar el enlace del titulo para entrada única ni cualquier enlace que lleve el post, tampoco utilizar el LEER MÁS (Si sirve de algo, el LEER MÁS es el que trae por defecto de bloguer). Sin embargo he podido apreciar que en I.Explorer si que funciona. (para volverse tarumba, cuando no es uno es otro).

    Por otra parte, quisiera saber como puedo hacer para que me salga debajo de los post, -como en los demás- el autor del mismo, recomienda, secciones, etc..

    Gracias de antemano.

    Un saludo.

    http://agendabolsa.blogspot.com/

    ResponderEliminar
  96. Hola HOTMONEY,

    Es posible que se trate de tu navegador. Acabo de entrar desde Mozilla Firefox 3.6.15 y los enlaces de Leer más funcionan perfecto.
    Lo que sí es que en efecto el primer post no tiene enlace en el título. Verifica que hayas puesto el primer código correctamente pues ahí viene incluido el código que hace que el título tenga el enlace a la entrada.

    Para que se vean los demás datos debajo de esa entrada busca los códigos de esos datos y pégalos debajo de la línea <div class='post-footer'> que se encuentra en el primer código que has agregado.

    Saludos.

    ResponderEliminar
  97. Buenas Potro, gracias por tu tiempo y amabilidad.

    Lo de los datos debajo del'post-footer' lo he realizado sin problemas y satisfactoriamente.

    El tema de no ver los enlaces y leer más... sigue igual, e incluso cambié el código de nuevo.

    Debe ser otra cosa, no sé y afecta sólo cuando navegas en MZ..
    Yo también utilizo el MZ Firefox 3.6.15, y en ése primer post, no me funciona el leer más ni enlace a titulo, pero es que después de instalar los artilugios 'post-footer' he comprobado ¡que tampoco!. Ni puedo votar, ni entrar a comentarios del primer post. Me he bajado el navegador Opera y pasa exactamente igual que en Firefox, o sea que ésta vez el agraciado es tan sólo I.EX.

    Es importante para mi destacar la última noticia del blog, sino lo desistalaria.

    A ver si podemos, (tú que eres el crack pues yo quedé ya sin ideas), llegar al problema.

    Un saludo.


    Como te digo navegando en I.EX si que sale todo y funciona perfectamente, enlace título, leer más, artilugios...

    ResponderEliminar
  98. Parece que ya se corrigió el problema.

    He cambiado del codigo "Estilos del contenedor del primer post"

    float: left;

    por

    float: center;

    y parece que ya se solucinó todo.

    Saludetes!

    ResponderEliminar
  99. Qué bueno que ya lo has resuelto!

    ResponderEliminar
  100. q raro hize todo bien y no se muestra el stilo que yo modifique

    ResponderEliminar
  101. ¿Qué estilos modificaste y en cuál blog?

    ResponderEliminar
  102. todos http://www.lockerzlatinos.com

    fijate y veras

    ResponderEliminar
  103. Es porque cuando agregaste los estilos eliminaste un caracter de otro estilo y eso está afectando todo.

    Arriba de donde lo pegaste está esto:

    .hovergallery img:hover{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    box-shadow:0px 0px 30px gray;
    -webkit-box-shadow:0px 0px 30px gray;
    -moz-box-shadow:0px 0px 30px gray;
    opacity: 1;

    Si te fijas le falta la llave de cierre, debe estar así:

    .hovergallery img:hover{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    box-shadow:0px 0px 30px gray;
    -webkit-box-shadow:0px 0px 30px gray;
    -moz-box-shadow:0px 0px 30px gray;
    opacity: 1;
    }

    ResponderEliminar
  104. JOJO cuanta razon tenias amigo ahora solo falta algo mas y listo jeje

    evitar que abra otra ventana al dar continuar leyendo

    ResponderEliminar
  105. Si es el leer más de Blogger no lo sé, sería cuestión de que localizaras dónde se produce el enlace para el Leer más y ahí aplicar el atributo target='_parent'

    ResponderEliminar
  106. hola potro muy bueno esto... eh pero en mi caso yo solo quiero cambiar el color del primer post... y utilizando entradas resuminadas... www.safer321.com

    ResponderEliminar
  107. No creo que sea posible, al menos no se me ocurre cómo podría hacerse.

    ResponderEliminar
  108. Me ha encantado el resultado del truco, estoy feliz jejeje /-te agradezco.!!
    saludos Potro...

    ResponderEliminar
  109. MUY bueno los iconos DOCK !!! sos un capo
    pero en mi blog quedan por detras.. te paso el link para que veas
    http://agrupacionfotografica9dejulio.blogspot.com/

    que puede ser !!!!!!!!!!!

    ResponderEliminar
  110. Hola,

    Lo ideal es que esa pregunta se haga en la entrada del menú para quienes tengan la misma pregunta sepan cómo resolverlo.
    Pero por esta vez, para que no perdamos tanto tiempo te responderé por aquí.
    Agrega después de:
    .dock {

    Esto:
    z-index: 1000;

    Saludos.

    ResponderEliminar
  111. antes que nada te pido mil disculpame soy muy muy novato en esto !!!!! MUCHAS GRACIAS por responder tan rapida y eficazmente. UN abrazo. sos un capo !!!

    ResponderEliminar
  112. Hola Potro, no creo que sea aquí el comentario, pero no sé dónde ponerlo ;)

    Mira, tengo varios alumnos que presentan dificultades al entrar al blog (privado ya sabes), en cuanto a poder bajar para leer la parte inferior. NO deben tener la barra deslizadora lateral para bajar, y la rueda del ratón tampoco les ayuda a bajar.
    Entran sin problemas con sus cuentas, pero no pueden ver todo el blog. se queda como colgado en la parte superior de la pagina de inicio.

    ¿qué puede ser?

    GrACIAS

    ResponderEliminar
  113. Pero, ¿hay contenido debajo? Porque si hay contenido debajo pueden bajar con el scroll (barra de desplazamiento), con el mouse, o con las flechas del teclado.
    Ahora, si lo de abajo no se ve entonces puede ser que haya un elemento ahí abajo que no termina de cargar y por eso no se puede mostrar completo el blog.

    ResponderEliminar
  114. Si, ha entradas normales debajo. Todos entran y loven sin problemas, pero hay unos poquicos que dicen que no les sale la barra de desplazamiento, ni pueden bajar con el mouse.

    En eso andamos....
    Ya me dirás majo...

    ResponderEliminar
  115. Si solo es a unos cuantos entonces es su conexión que no les termina de cargar algún elemento del final del blog.

    ResponderEliminar
  116. Pero mi blog carag mu rápido porque no tiene casi cosas que ralenticen... no sé....

    Si quito algún gadget, ¿desaparecerían esos problemas?

    MIL GRACIAS TÍO (como siempre)

    ResponderEliminar
  117. Tal vez sí, tal vez no, es que la velocidad de carga del blog no sólo depende de lo que tiene el blog, sino de la velocidad de conexión del usuario, de su ordenador, de cuántos programas tenga abiertos, etc. Así que muchas veces por más que optimices la carga del blog lo mejor posible siempre habrá a quienes no les cargue todo el blog por esos motivos, que son ajenos al blog.

    ResponderEliminar
  118. holaaa ami me gustaria tener el primer post con un leer mas diferente a los de abajo como lo podria hacer?

    ResponderEliminar
  119. Entonces deberás seguir los pasos de esta entrada:
    http://ciudadblogger.com/2010/08/entradas-resumidas-estilo-magazine-2.html

    Sino quieres que las demás entradas se muestren en columnas sólo borra desde:
    .post { /* Estilos del contenedor de los mini post */

    Hasta antes de #blog-pager { del código que se añade en esa entrada.

    ResponderEliminar
  120. POTRO HOLA DE NUEVO! Y GRACIAS POR TU APORTACION. AHORA CADA VEZ QUE TENGO UNA DUDA VENGO AQUI A FASTIDIARTE JEJE MI PREGUNTA ES COMO MODIFICO EL TAMAÑO DE LA IMGEN DEL PRIMER POST ??

    ResponderEliminar
  121. PERDON POTRO YA SOLUCIONES ESA PREGUNTA !! LA PREGUNTA AHORA ES EL NUMERO DE CARACTERES DE EL PRIMER POST COMO LO MODIFICO!?

    ResponderEliminar
  122. No se usa ningún sumario automático, es una entrada completa, por lo tanto no se puede modificar el número de caracteres a mostrar.
    Saludos.

    ResponderEliminar
  123. Hola, de nuevo por aquí, noté que el post se ve diferente sólo en la página principal, si entro a los post se ve como todos. Cómo puedo cambiar la apariencia no sólo del primero, sino de todos los elementos de home? espero y me puedas ayudar hehe Un saludo

    ResponderEliminar
  124. No sé si entendí bien, ¿quieres que el primer post se conserve con esa apariencia aun estando en la entrada individual? ¿o quieres que todos los post del home se vean diferentes?

    ResponderEliminar
  125. que todos los post del home se vean diferentes, si

    ResponderEliminar
  126. Entonces no es necesario aplicar lo de esta entrada, sólo añade antes de </head> una condicional con los estilos que quieres que se vean sólo en la portada, por ejemplo:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style>
    .post {
    background:#ccc;
    padding:3px;
    }

    h3.post-title a {
    color:#000;
    }

    </style>
    </b:if>

    ResponderEliminar
  127. exelente, gracias por la ayuda :)

    ResponderEliminar
  128. POTRO AMIGO HOLA QUE TAL!!ESPERO QUE BIEN ! PORTRO GRACIAS POR TUS REPUESTA .! ME AHORRA MUCHO TIEMPO BUSCANDO COSAS EN INTERNET!!JEEJE
    MI NUEVA PREGUNTA ES .¿ COMO LE PONGO UN NOMBRE A PRIMER POST.? ALGO COMO "LO MAS HOT" Y QUE ESTE AHI SIEMPRE !!

    ResponderEliminar
    Respuestas
    1. Cámbiale la fecha, de ese modo podrás mantener el primer post siempre arriba del blog:
      http://ciudadblogger.com/2009/09/como-dejar-una-entrada-siempre-arriba.html

      Saludos :)

      Eliminar
  129. En el blog de pruebas vi esto..MENÚ ESTILO DOCK DEBAJO DE LA CABECERA..Me gustó en dónde veo el procedimiento??? pues según lo busqué en efectospero no lo encuentro, saluditos...

    ResponderEliminar
    Respuestas
    1. Este es el menú que está en ese blog de pruebas:
      http://ciudadblogger.com/2009/12/menu-estilo-dock-para-blogger.html

      Eliminar
  130. Gracias... Te dejé una duda sobre entradas..!! un abrazooo

    ResponderEliminar
  131. Hola Maestro . . . Saludos Desde Galicia
    Tengo Aplicado este Truco en la Plantilla
    Pero Tengo un Problemilla . . . Como No
    Me Elimina una Imagen
    ( Una Costura del Pantalon Vaquero )
    La que Esta Justo Encima de la Fecha de las Entradas
    Me Gustaria Poder Conservar esa Imagen
    Espero tu Respuesta
    Un Saludo . . . Gracias

    ResponderEliminar
    Respuestas
    1. ¿Puedes hacer una captura de pantalla para señalar cuál es la imagen que no aparece? Es que a simple vista no encuentro la diferencia.
      Saludos.

      Eliminar
  132. Te Dejo unos Enlaces Para que Veas la Diferencia . . .

    https://lh6.googleusercontent.com/-SWWiaC91UUk/TzoYc9qkh2I/AAAAAAAAAgo/GnHHVM2cRLw/s353/1%2520Linea.PNG

    https://lh3.googleusercontent.com/-LqDNR6QXKNU/TzoYccJH9FI/AAAAAAAAAgk/WwjPevBkrsU/s419/2%2520Lineas.PNG

    Un Saludo . . . Gracias

    ResponderEliminar
    Respuestas
    1. Pon debajo de <div id='first'> esto:

      <div class='postmetadata'>
      ...aquí los códigos de los datos que faltan (etiquetas y link de comentarios) ...
      </div>

      Eliminar
  133. Hola Potro . . . Perdona mi Torpeza Pero Esto no lo Entiendo
    ...aquí los códigos de los datos que faltan (etiquetas y link de comentarios)...
    No se que Códigos Tengo que Poner
    Un Saludo . . . Gracias

    ResponderEliminar
    Respuestas
    1. Lo he Conseguido Pero Solo en Parte . . . Me Explico
      Si lo Pongo Asi Parecido a lo que me Indicas
      <div id='first'>
      <div class='postmetadata'>
      </div>
      Aparece la Linea Encima de la Primera Entrada

      Lo he Puesto Asi y Aparece la Linea que yo Queria
      <div class='post-footer'>
      <div class='postmetadata'>
      </div>
      Pero Solo en la Portada y un Pelin Larga de Mas

      Si le Das a Una Entrada Cualquiera
      Abrira esa Entrada Como Primer Post
      Pero Ahi no Aparece la Linea Como en la Portada

      Trato de Explicarme lo Mejor Posible
      Espero Entiendas lo que Quiero Conseguir

      Dejare la Pagina Asi Para que Veas Como Queda
      Hasta que me Indiques el Camino a Seguir

      Un Saludo . . . Gracias

      Eliminar
    2. Pero es que así es la plantilla que usas. Si miras este demo verás que de por sí la primera entrada no tenía nada arriba, y si ingresas a la entrada individual (la que sea) tampoco muestra nada, así es como fue diseñada:
      http://jeans2c.blogspot.com/

      Eliminar
    3. Estoy de Acuerdo Contigo en Este Aspecto
      Pero Supongo que con un Poco de Codigo se Soluciona
      Alguien que Sepa de Esto Claro ( YO NO ) . . .
      Al Menos Me Gustaria Saber la que Aparece en la Portada
      Por que es un Pelin Mas Larga que las Otras
      Y Como Corregirlo
      Un Saludo

      Eliminar
    4. Ya sabes que es necesario quitar el script del botón derecho, sino se me dificulta más :/

      Eliminar
    5. Mis Disculpas Potro Era Algo que Desconocia
      Lo Puse un Dia Para Probar y Ahi se Quedó
      Ahora Mismo lo Fulmino sin Problema
      Un Saludo . . . Gracias

      Eliminar
    6. Me temo que no se podrá. Si se reduce ahí también se reducen las otras y entonces estas quedan cortas. Supongo que por esa razón no lo aplicaron para la primera entrada o.o

      Eliminar
    7. Si Sigo los Pasos que Indicas en Esta Entrada
      Mostrar un Elemento Debajo del Primer Post

      <b:if cond='data:post.isFirstPost'>
      <div align="center" style="margin-top:0px; margin-bottom:10px;">
      ...Aquí el código del elemento que quieres mostrar...
      </div>
      </b:if>

      En Donde Pone Esto ...Aquí el código del elemento que quieres mostrar...

      Puede Ponerse una Imagen Para que Aparezca la Costura

      Si es Asi que Codigo Pongo Para Incluir la url de la Imagen

      Seguire Intentando Cualquier Cosa que se Te Ocurra

      Un Saludo . . . Gracias

      Eliminar
    8. Pues el código de una imagen:
      <img src="http://lh4.ggpht.com/_vjrss6CJiE0/TStZ2tVK_7I/AAAAAAAAAYs/xGm0Zq5cMXo/hr-line.jpg" />

      Aunque esa imagen es muy corta

      Eliminar
    9. He Puesto el Codigo Pero no Muestra Ninguna Imagen
      Puse otra Imagen Para ver la Diferencia Pero no Aparece
      <b:if cond='data:post.isFirstPost'>
      <div align='center' style='margin-top:0px; margin-bottom:10px;'>
      <img src='https://lh4.googleusercontent.com/-KUZsE2TRVuY/TSsM209lF7I/AAAAAAAAAYk/T6ViQbYDP98/s409/left-bg1.jpg)'/>
      </div>
      </b:if>
      No Quiero Meter la Pata Pero Creo este Codigo
      Ya Estaba Puesto en la Plantilla Original

      Eliminar
    10. En el Blog de Pruebas si Aparece la Imagen
      Aunque Necesitaria Estirarla un Poco
      Echale un Vistazo Para que Entiendas
      Lo que Quiero Conseguir . . .
      http://sharkgalicia3.blogspot.com/
      Te Pido Disculpas por Ser tan Pesado
      Un Saludo . . . Gracias

      Eliminar
    11. Por eso te decía que iba a quedar muy corta. Prueba así:

      <style>
      .costura {
      background:url(URL de la imagen) repeat;
      width:100%;
      height:30px;
      }
      </style>
      <div class="costura"></div>

      Eliminar
    12. Hola Potro . . . Simplemente Eres un Genio
      Ha Quedado Tal y Como Queria . . . Gracias

      Solo Queda un Pequeño Detalle . . .
      Hay Alguna Forma de que Aparezca Solo en la Portada
      Tal y Como Haces Cuando Ocultas un Gadjet
      Te lo Digo por que en la Portada Queda Perfecto
      Pero si Entras en Una Entrada en Concreto
      Esa Imagen Tambien Aparece y Queda Mal
      Cerramos Este Tema y lo Pasamos a la Entrada que Corresponde
      Un Saludo

      Eliminar
    13. Enciérralo en una condicional para que aparezca sólo donde seas:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Saludos.

      Eliminar
  134. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  135. Hola potro! una pregunta ¿Es posible hacer que más de un post se vea diferente?

    Por ejemplo, si en un blog se muestran 5 entradas en la página principal ¿Se le puede agregar un estilo diferente a cada una de ellas o esto solo funciona con el primer post?

    ResponderEliminar
    Respuestas
    1. Sólo en el primer post, a menos que apliques un método más complicado:
      http://loseasi.blogspot.mx/2011/05/agregar-una-id-unica-cada-post-o.html

      Eliminar
    2. Muchísimas gracias, me sirvió muchísimo ^^!! Ahora me queda otra duda -si podés responderme, te hago un altar xD-

      Si las entradas tienen imágenes en el post-header, post-body & post-footer ¿Se pueden cambiar las imágenes dependiendo de la ID que tenga la entrada?

      por ejemplo, en un blog tengo enmarcadas las entradas (header-body & footer del post) con imágenes de un lazo rojo.

      Pero quiero que las entradas se vean diferentes la una de la otra, por lo que intento que la segunda entrada tenga las imágenes con el lazo azul, en la tercera entrada con el lazo verde, en la cuarta el lazo lila, etc... ¿Se puede?

      Eliminar
    3. ¿Con el método de Vku? Tendrías que preguntarle a él, pero me supongo que sí, ha de ser que se coloquen los estilos más o menos así:
      #contaentrada1 .post-footer img {
      ...aquí los estilos...
      }

      Pero asegúrate preguntándole a él, o haz pruebas tú misma.
      Saludos.

      Eliminar
    4. Potro~~ Gracias, gracias, gracias!!! me funcionó quitando el "img" del código (*.*)/ no puedo creer que no haya probado eso antes de preguntarte xD

      Menos mal que siempre estás para ayudarnos cuando tenemos un problemita -o falta de conocimiento, mejor dicho xD- hombre, tenés todo mi respeto ^^ Gracias de nuevo por tu tiempo y ayuda!

      Eliminar
    5. Por nada Amiitha, qué gusto que todo ha salido como esperabas.

      Eliminar
  136. Yo tengo puesto este scrip:

    http://ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html

    y me pareció muy buena idea esto de destacar el primer post, pero al hacerlo me quedó todo hecho un desastre, extendido como una entrada normal, etc
    De qué manera se puede hacer?

    Un saludo!!

    ResponderEliminar
    Respuestas
    1. Hola Andrea, este método no es para quienes usan el Leer más, es mejor que reviertas los pasos. Saludos.

      Eliminar
  137. Ola potro... tengo una duda... qiero que desde el segundo asta el final de los post se vea en 2 columnas.... no se si se puede aca te dejo mi blog: http://psdfacil.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola JoZze FloXx, mira esta entrada:
      http://ciudadblogger.com/2010/08/entradas-resumidas-estilo-magazine-2.html

      Eliminar
  138. Hola Potro, primero gracias por todo lo que nos ayuda tu blog! Es la biblia de los blogueros! :)

    Tengo este blog http://blogsmarc.blogspot.com.es/

    Y he puesto el código que mencionas aquí, pero modifico los códigos de los colores de fondo, de enlaces, y todo eso, y no se cambian.

    Me puedes indicar donde voy perdido?

    ResponderEliminar
    Respuestas
    1. Hola Marc, el color del título lo puedes cambiar de esta manera:

      .post-title h3 {
      color:#000;
      }

      Saludos.

      Eliminar
    2. Perdona pero me explique mal.

      Quiero decir que modifico los códigos de colores que hay en la etiqueta ( Código ) que pusiste en este post "/* Primer post" y allí modifico los códigos de los colores del background, etc. Pero no salen reflejados luego en el primer post de mi blog.

      Espero explicarme! Gracias por la ayuda!

      Eliminar
    3. Ah ok, ok, entendí mal, disculpa.
      Lo que ha pasado es que cuando has puesto ese código (el de los estilos), eliminase la llave de cierre } del código que está arriba, por eso no se aplican los cambios:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    4. Gracias Potro! Pero... resulta que lo veo igual! jejeje

      He hecho el cambio de la llave que me comentas, pero el estilo, la letra del primer post sigue sin tener los cambios que en teoría tiene que aplicar el código.

      Espero que me puedas echar una mano!

      Eliminar
    5. No has modificado el área correcta Marc. Tienes el código así:

      #header-inner img {
      width: 385px;
      height: 91px;
      /* Primer post
      ----------------------------------------------- */

      Y debe ser así:
      #header-inner img {
      width: 385px;
      height: 91px;
      }
      /* Primer post
      ----------------------------------------------- */

      Arriba de donde dice "/* Primer post" es donde te falta la llave de cierre.

      Eliminar
    6. Gracias Potro! Yo mirando el código para abajo y resulta que era anterior! jejeje!

      Eliminar
  139. somebody save me ahh es Potro nos vemos !!
    http://kenandice.blogspot.com

    ResponderEliminar
  140. hola amigoo me podrias decir como poner me gista abajo de cada post qu ponga en mi blog osea si en una entrada pongo 5 post abajo de cada una kiero el me gusta me podiras ayudar te lo agrarecere

    ResponderEliminar
    Respuestas
    1. Mira esta entrada, ahí dice cómo poner el botón en las entradas:
      http://ciudadblogger.com/2011/01/agregar-el-boton-me-gusta-de-facebook.html

      Eliminar
  141. Hola Potro, estaba pensando si se podria hacer esto mismo por bloques de entradas, es decir, que por ejemplo, las 4 primeras se vean "estilo1" las 4 siguientes "estilo2" y otras 4 "stilo3" o algo asi.
    Lo pregunto por que asi se podria quedar un blog tipo periodico, donde cada noticia tiene un estilo diferente.

    Gracias...

    ResponderEliminar
    Respuestas
    1. Hola Juan José, se puede, pero ya se requieren más conocimientos sobre el tema:
      http://loseasi.blogspot.mx/2011/05/agregar-una-id-unica-cada-post-o.html

      Eliminar
  142. Hola Potro, me salio todo bien pero tengo un problema, mira mi blog http://infowinner.blogspot.com veras que el link de "Mas informacion", los botones compartir y el anuncio adsense no funcionan, osea estan visualmente pero como fantasmas..
    como podre arreglar esto?

    ResponderEliminar
    Respuestas
    1. Hola Sack, quítale el float: left; que está dentro de #First
      Luego, al DIV donde tienes esos botones ponle un margin-top: -70px; y un position: absolute;

      Eliminar
    2. Muchas gracias Potro!, basto con quitarle el float: left; para que se solucionara el problema.

      Gracias!

      Eliminar
  143. Una pregunta, como hago para que los comentarios aparezcan en TODAS las entradas? por que solo me aparecen en la primera desde ya muchas gracias

    ResponderEliminar
    Respuestas
    1. Si el resto de tus entradas no tiene ese enlace entonces tienes que habilitarlo desde Entradas del blog, o añadirlo manualmente:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html

      Eliminar
  144. Me ha parecido muy útil esta entrada, pero tengo una pregunta: cómo podría hacer para que el título de este primer post no contuviese enlace como el de los demás posts? Que sea únicamente texto. Gracias!

    ResponderEliminar
    Respuestas
    1. Prueba cambiando esto:
      <b:if cond='data:post.isFirstPost'>
      <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <div id='first'>
      <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
      <b:if cond='data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
      <data:post.title/>
      </b:if>
      </b:if>
      </h3>
      </b:if>



      Por esto:

      <b:if cond='data:post.isFirstPost'>
      <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <div id='first'>
      <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
      <data:post.title/>
      <b:else/>
      <b:if cond='data:post.url'>
      <data:post.title/>
      <b:else/>
      <data:post.title/>
      </b:if>
      </b:if>
      </h3>
      </b:if>

      Eliminar
    2. Perfecto! Eres un crack, muchas gracias!

      Eliminar
  145. hola Potro, espero que estes bien, amigo tengo una pequeña pregunta, como hago para hacer que todo el texto de todas las entradas tengan un color en especifico, es que tengo un gran numero de entradas y me gustaria cambiar el color del texto de todas pero son demasiiadas para cambiarselo una por una, asi que me preguntaba si hay alguna manera de cambiar el color del texto de todas las entradas por medio de html...saludoos y gracias potro

    ResponderEliminar
    Respuestas
    1. Depende cuál sea la plantilla, usualmente sería así:
      .post-body {
      color:#000;
      }

      Eliminar
  146. la plantilla es vieja, este es el nombre:

    Name: Minima Black
    Designer: Douglas Bowman
    URL: www.stopdesign.com
    Date: 26 Feb 2004

    ya probe lo que me dices pero yo tengo el color de todas mis entradas en azul, lo que quiero es todas las entradas viejas tengan otro color, el problema es que son demasiadas entradas y si cambio el color me gustaria que fuese en todas, haciendo lo que me dijiste debajo de post-body, las entradas ya publicadas con el color azul mantienen ese color, ¿se pueden cambiar el color de las entradas viejas por medio de la HTML?

    Gracias de antemano Potro...

    ResponderEliminar
    Respuestas
    1. Sí puedes cambiarlo, pero, como ya elegiste un color desde el editor de entradas entonces "obligaríamos" a que todas las entradas tengan el color que elijas, esto significa que ya no podrías poner algún otro color en tus entradas pues no se aplicaría el cambio.
      Si aun así deseas hacerlo así sería el código:

      .post-body, .page-body {
      color: #000 !important;
      }

      Eliminar
  147. bueno hermano mil gracias potro, un abrazo...

    ResponderEliminar
  148. Hola Potro, muy buena la técnica, la probé y me funciona muy bien. Pero como puedo hacer para que no se muestre el post completo sino una parte del mismo.

    te agradezco

    ResponderEliminar
  149. Hola Potro del comentario anterior, me di cuenta que para hacer el resumen que quiero del primer post debería utilizar un script, no me utilizalos mucho porque ponen lento la carga del blog. no habría una forma de resumir se primer post si utilizar script?

    ResponderEliminar
    Respuestas
    1. Hola Pedro Pablo, los sumarios sólo se consiguen con scripts, o podrías usar el "Leer más" nativo de Blogger.

      Eliminar
  150. como modifico el tamaño pa que me que un tamño eztanda,
    Osea como hacer para que el truco del premer post se haga con un
    tamaño especifo. o que se pueda manipular...

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger