Tutorial: Como hacer tu propio índice de entradas con miniatura y título de la entrada

Si quieres una forma ordenada y directa de mostrar el contenido de tu blog, no hay mejor manera que crear tu propio Índice de entradas. Mostrará directamente las entradas más recientes de las categorías que tú elijas, acompañada de una imágen en miniatura y el título del post.

Con esta forma de organizar tus entradas por categorías, aquel que visite tu blog tendrá una idea muy clara sobre la temática de tu blog y sobre las diferentes secciones que publiques. Podrás tener un riconcito con tus entradas, muy sencillo, bien organizado y bonito. ¿Os apetece hacer uno? Es muy fácil como veréis a continuación.

Aprenderás a hacer algo como esto:

Listado de categoría Reseñas

¿Queréis saber como hacer uno para vuestro blog?
Echad un vistazo al mio y si os convence leer todo para ver el tutorial entero.

Tutorial: Poner botones "leer más" en tu blog

¡Buenos dias a todos! El otro día publiqué una entrada con un Pack de botones leer más y algunos me comentasteis que no sabíais como ponerlos, asi que me he decidido a hacer un pequeño tutorial de como hacerlo. Es muy sencillito asi que no le tengáis miedo :P

Primero de todo elegir un boton de mi pack o cualquier boton que os guste o hayáis hecho y subirlo a algun host de imágenes como por ejemplo Imgur o incluso en el mismo blog. Una vez tengáis la url de la imágen dirigiros a vuestro panel de blogger ⇒ configuración ⇒ plantilla ⇒ editar HTML. Primero hacemos una copia de seguridad del template no se nos vaya a perder nada y a continuación buscáis el siguiente código:

<data:post.jumpText/>
Una vez localizado, tenéis que sustituir eso por <img src="URL de la imágen">, pegáis la url de la imágen, le dais a guardar y ya tendríais el botón colocado.
Hay algunas opciones más que siempre son útiles de saber como por ejemplo el tamaño del botón si lo queréis más grande o más pequeño, si os gustaría que quedara un poco más transparente o si lo queréis en el centro, derecha o izquierda. Os dejo aquí algunos tips que suelo usar.

⇒ Para modificar el tamaño de la imágen tendréis que pegar:
<img width="180" src="URL de la imágen">
Siendo 180 el tamaño del botón. Podéis cambiarlo al tamaño que queráis. Eso ya es a gusto del consumidor.  :)

⇒ Si queréis que esté centrado o a la izquierda/derecha deberéis pegar este código:
Centro: <center><img width="180" src="URL de la imágen"></center>
Derecha: <div align="right"><img width="180" src="URL de la imágen"></div>
Izquierda: <div align="left"><img width="180" src="URL de la imágen"></div>

⇒ Tres estilos diferentes que a veces también quedan monos.
Efecto bordes redondeados: <img style="border-radius:25px;" width="180" src="URL de la imágen">
Efecto de foto con transparencia: <img style="opacity: 0.5;" width="180" src="URL de la imágen">
Efecto con sombra en los bordes: <img style="box-shadow: 1px 1px 8px #9e9e9e;" width="180" src="URL de la imágen"></div>

Para ver el resultado de estos tres efectos pincha en leer más y lee la entrada completa!