Cómo mostrar texto solo en el inicio y no en la entrada

Hace unas semanas les compartí cómo poner botones dentro de una entrada, así que hoy les enseñaré como hacer que se vea un texto o imagen en tu página de inicio (o Home, depende de tu idioma) pero que no se vea cuando ya estás en la página de la entrada. Quedaría algo así:



Hola mis queridos lectores! Otra vez les traigo un pequeño tutorial para hacer que tu blog se vea aún más lindo y profesional. Ya saben que me encanta moverle al código de mi plantilla y andar aprendiendo de HTML, así que si hay algo que te gustaría hacerle a tu blog y no sabes como, déjame saber en los comentarios y con gusto te ayudo.

Hace unas semanas les compartí cómo poner botones dentro de una entrada, así que hoy les enseñaré como hacer que se vea un texto o imagen en tu página de inicio (o Home, depende de tu idioma) pero que no se vea cuando ya estás en la página de la entrada. Quedaría algo así:



Le puedes dar varios usos, por ejemplo para mostrar un resumen de la entrada, o tal vez poner un banner tipo "Wrap Up" y que se vea en la página de inicio pero ya estando dentro de la entrada que no se vea. Personalmente lo uso para mis reseñas, ya que las primeras líneas que escribo son los datos generales del libro y esto no te dice nada de la reseña en sí.

Otro beneficio que tiene el usar este codigo es que cuando se publique la entrada y aparezca en el feed de blogger de los demás, aparecerá el texto que tu quieras y no el primer párrafo de tu entrada.

Es super sencillo y rápido de hacer. Lo primero es irnos al código HTML de la plantilla y buscar ]]></b:skin>, ya una vez que lo tienes ubicado, justamente abajo de esto le vamos a pegar el siguiente código:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>.esconder{display: none;}</style>
</b:if>


Le damos guardar y nos vamos a crear una entrada. Yo recomiendo agregar el texto escondido hasta después de escribir tu entrada, para que puedas hacer un resumen de lo que escribiste o simplemente pegar y copiar parte de tu entrada (como lo hice yo en esta). Así que ahora que ya tienes tu entrada completa, le das clic en HTML y en la primera línea (o despues de la imagen inicial) agregas este código:

<div class="esconder"> texto que quieres que se muestre en la página de inicio </div>

Cambias lo que viene en morado por el texto y listo! Ahora, si nos regresamos a Compose (no sé como venga en español, pero es el botón alado de HTML) vas a ver el texto que debería estar escondido pero no te preocupes, si vas a la vista previa verás que no se verá una vez publicada.

Espero les sirva el tutorial y les prometo que a finales de Febrero ya regresamos con reseñas y más entradas literarias.

8 comentarios

  1. Buenísimo este tutorial. Y muy sencillo de aplicar. ¡Me encanta! Con tu permiso lo comparto en redes. Por cierto, aprovecho para consultarte: ¿existe algún modo para ocultar contenido en un post y que sea accesible sólo a través de contraseña? En mi blog organizo un reto mensual de escritura y quiero a partir de marzo premiar a los más asiduos, con recompensas ocultas, y ésta sería una forma estupenda, pero por más que indago en la red no encuentro nada que funcione. ¿Conoces algún tipo de código que lo permita?

    Un abrazo.

    ResponderEliminar
    Respuestas
    1. Hola Rebeca! hay una forma de ponerle contraseña a una página completa (yo antes la usaba para una biblioteca de recursos para mis seguidores del newsletter), deja trabajo en el tutorial y lo subo, te aviso en cuanto lo tenga :)

      Eliminar
  2. OH MY GOD, NO SABÍA QUE QUERÍA HACER ESTO HASTA QUE VI TU TUTORIAL jajajajajaja <3 ¡Muchísimas gracias por esta entrada! Sin duda intentaré hacerlo en mi blog porque es algo magníficooooo <3 En serio, MUCHAS GRACIAS :D

    ResponderEliminar
  3. ¡Hola! ^^
    A mí me gusta el blog tal y como lo tengo, pero este tipo de entradas vienen bien para las personas que no saben mucho de este temas. Muy buena explicación :)
    Besos!

    ResponderEliminar
  4. Hola! :D
    Esto del HTML es bastante genial cuando sabes usarlo así que gracias por compartirnos estos tips, sin duda tu blog es muy lindo y refleja muy bien lo que es saber usar estos códigos.

    Besos ♥

    ResponderEliminar
  5. Voy a pimpear mi blog con todo lo que pones xD

    ResponderEliminar

Gracias por leer la entrada, te agradecería aún más si dejas un comentario :)