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




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

martes, 12 de mayo de 2015
¡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!
Y estos son los tres efectos:


Bueno pues eso es todo por hoy. Espero que este mini tutorial os haya servido de ayuda y si tenéis cualquier duda, dejarmela en un comentario o contactar conmigo. ¡Que paséis un muy buen dia!
Sleek kisses! :)
Carola




8 comentarios:

  1. ¡Holas!
    Ahhhh muchas gracias por subir el tutorial :D
    Besos!

    ResponderEliminar
  2. Hola :) Genial tuto, me viene perfecto junto con la otra entrada para mi futuro diseño. Un besin^^

    ResponderEliminar
  3. Hola. gracias por el tutorial. Es muy util, besos.

    ResponderEliminar
  4. que chulo ^^ de momento no creo que lo use pero cuando quiera ya se donde acudir a mirarlo ^^

    ResponderEliminar
  5. ¡¡Hola!! ^^
    Está super chulo este tutorial, viene genial.
    Yo lo hice en su momento y ahora no sabría cómo cambiar las cosas, así que me guardaré este tutorial para no liarla con el HTML XD
    ¡Además he visto que tienes un pack de Leer más suuuper chulos ^^


    Dios..me había quedado sin Internet justo cuando estaba comentando la entrada y fue a lo : ¡No! Ahora noooo!!!!


    Siento no haberme pasado más regularmente por tu blog, porque realmente me gusta ( Quizás sea porque tu imagen de blogger es una carita que respira ternura jajaj) y me encanta el diseño tan pro que tiene :)
    Así que voy a intentar estar más pendiente de ti y sino te doy totalpermiso para darme un cascaporro JAJAJAA

    ResponderEliminar
  6. Un tutorial muy practico. Está tarde intentaré ponerlo en práctica.
    ¡Nos leemos! :)

    ResponderEliminar

Carola Marin - © 2016 Sleek Path
Blog de diseño, literatura, cine, series y mucho más.
Blogging tips