8 de agosto de 2016

TUTORIAL: AGREGA BOTÓN 'LEER MÁS'.


¡Hola Viajeros! Esta vez les traigo un tutorial sumamente sencillo y se trata del famoso "BOTON LEER MÁS". Este botón ayuda a que aparezca un pedazo de cada entrada en el inicio, no la entrada completa, para que no ocupe tanto espacio y sea más cómodo leer. Al hacer clic en 'Leer más', la entrada se abre en una pestaña nueva y se pude leer completamente.
Les mostrare 2 formas de personalizar :D asi que por lo tanto esta algo largo :D
PERSONALIZAR CON UNA IMAGEN MUY MONA

Deben dirigirse a Plantilla →Editar HTLM, allí deben buscar: <data:post.jumpText/>
*dan CTRL + F y en la parte superior derecha donde comienza lo de la plantilla les saldrá un cuadro en el que pegaran  <data:post.jumpText/> y dan enter y ya os sale el texto.)

Borran ese código y pegan el siguiente: 
<img  src='URL de la imagen' width= '200px'/>

Pongan el enlace de la imagen que quieren que aparezca y ajustan hasta que tenga el tamaño que ustedes desean.

✞Si desean centrar la imagen:
<center><img  src='URL de la imagen' width= '200px'/></center>

✞ Si quieren alinear la imagen a la derecha:
<div align="right"><img  src='URL de la imagen' width= '200px'/></div>

✞ Si quieren alinear la imagen a la izquierda:
<div align="left"><img  src='URL de la imagen' width= '200px'/></div>


Ahora ya solo quedan las URL de las imágenes.
Deben descargar los modelos a su computadora... después de eso crean una entrada nueva de blogger (en una ventana nueva.. no en la que están editando la plantilla). suben la imagen deseada  despues le dan HTML





Lo que esta en AZUL, es la URL de la imagen, la selecciona (sin comillas, ya las tienen en el codigo de arriba) le dan copiar y la ponen en <img  src='AQUI (donde decia URL de la imagen)' width= '200px'/>. Dan Guardar y listo! ya tienen su botón de leer más
ahora bien... ¿DE DONDE SACAN LAS IMÁGENES?
*Bueno yo les dejare urls de descarga de botones de diferentes blogs :D y unos medio feos que diseñe :D

LINKS DE LOS BOTONES

Mis diseños:
CLIC EN LA IMAGEN
(Hay más, pero esos son algunos)
MISS LAVANDA
 Descargar botones
clic en la imagen
WACAPAKA
clic en la imagen

  BABYCATFACE
Clic en la imagen
CREATIVE MINDLY
CLIC EN LA IMAGEN

CONFIGURAR SALTO DE LÍNEA EN BLOGGER

Ahora nos toca configurar el salto de línea. Para ésto, abre tu panel de Blogger en la sección “Entradas” y accede a una de ellas (convendría que lo hicieras con todas las que ya tengas hechas).

Una vez abierta la entrada, escoge el lugar donde quieres que aparezca el “Leer Más” (o como lo hayas llamado) y ahí pondremos el salto de línea en el icono que nos aparece en la barra de herramientas. Como diría mi abuela: “tal que así“.

SI... ME ROBE LA IMAGEN :/ ME DIO FLOJERA CREAR EL GIF. SORRY T.T

Este proceso lo seguiremos con todas las entradas que ya tengas publicadas o como borrador. Para las entradas que vayas a publicar más adelante, tan sencillo como redactar tu entrada como lo hagas normalmente y cuando le estés dando forma al texto, insertar el salto de línea donde más te convenga.

CONSEJO: El texto que vayas a dejar antes del salto de línea procura que sea un texto que enganche a tus lectores para que quieran seguir leyendo 🙂


Ahora, si no quieres un botón de imágenes... te dejo el código de una personalización (algo más laboriosa...) pero igual de bella.

PERSONALIZAR LEER MÁS EN BLOGGER

Para personalizar el botón, vamos a usar CSS, es decir, un lenguaje de programación para editar estilos. Puede sonar difícil, pero no lo es 🙂.

Abre tu panel de Blogger y entra en la pestaña “Plantilla”. Antes de hacer ningún cambio, te recomiendo que hagas una copia de seguridad, viene muy bien tenerla a mano por si falla algo.

Ahora haz clic en “Editar HTML” y te abrirá una nueva pantalla en la que verás una ventada con muchos códigos. Haz clic en cualquier parte del código, después pulsa Ctrl + F y en la barra de búsqueda que se te ha abierto, escribe lo siguiente:
/head

O... BIEN VAS A ➨ "PLANTILLA" ➨ "PERSONALIZAR" ➨ "AVANZADO! (DAS HASTA MERO ABAJO EN ESE PEQUEÑO MENU) ➨ "AÑADIR CSS" ➨ PEGAS EL CODIGO DE ABAJO ➨ DAS ENTER ➨ APLICAR AL BLOG.

Cuando lo tengas localizado, justo encima de esa etiqueta (</head>), pega este código y ahora te voy explicando 🙂

<style>
.jump-link{
font-family: 'Raleway', 'sans-serif'; /*Tipografía*/
font-weight: 700; /*Grosor de la tipografía*/
font-size: 14px; /* Tamaño de la tipografía*/
text-align: center; /*Alineación de texto | center : centrado | left : izquierda | right : derecha*/
letter-spacing: 1px; /*Espacio entre las letras. Bórralo si no quieres.*/
text-transform: uppercase; /*El texto queda en mayúsculas. Bórralo si no quieres.*/
margin-top: 10px; /*Espacio entre el texto de la entrada y en botón Leer más*/
margin-bottom: 10px; /*Espacio entre el Leer más y el final de la entrada*/
}
.jump-link a{
color: #fff; /*Color del texto*/
background: #db1666; /*Color del fondo del texto*/
border: 2px solid #db1666; /*Estilo del borde | 1px - grosor | solid - tipo de línea (sólida, punteada...) | #db1666 - color*/
border-radius: 10px; /*Borde redondeado | A más píxeles, más redondeado*/
padding:10px 30px; /*Para cambiar el alto(10px) y el ancho(30px)*/
}
.jump-link a: hover{ /*Al pasar por encima*/
color: #db1666; /*Color del texto*/
background: #fff; /*Color de fondo del texto*/
border: 2px solid #db1666; /*Estilo del borde | 1px - grosor | solid - tipo de línea (sólida, punteada...) | #db1666 - color*/
text-decoration: none; /*Quitar estilo de link por defecto*/
}
</style>
Todo lo que ves señalado en rosa es lo que puedes modificar para cambiar el estilo. Te voy contando por partes:
  • “font-family”, “font-weight” y “font-size” designan el tipo de fuente, el grosor y el tamaño respectivamente.
  • “text-align” designa en qué dirección quieres que se alinee el texto.
  • Todo lo que ves en rosa con una almohadilla delante tipo: #f450g9 hace referencia a un color en código hex. Para usar colores en código hex, entra en esta página y escoge los que quieras 🙂
  • border” tiene muchas cualidades. “1px” designa el grosor del borde. “solid” el tipo, puede ser solid(línea sencilla),dotted (punteada), double (doble)…
  • “border-radius” designa si la esquina es redondeada o no. A más píxeles, más redondeada será. Si no quieres que las esquinas queden redondeadas, simplemente borra esa línea.


¿Ustedes... cual van a usar?
dejadme en los comentarios que os parecido este tutorial ;)

13 comentarios:

  1. Hi!
    Todos estos tutoriales con HTML me parecen muy prácticos. En mi caso, suelo usar un par de códigos muy básicos, pero es que me da miedo innovar y que todo se me vaya al garete xD.
    El último pack de imágenes que has puesto me ha encantado ♥, aunque no creo que por el momento ponga la opción de «Leer más» en mi blog.
    ¡Besos!

    ResponderBorrar
  2. ¡Hola!
    Este tutorial me habría venido mejor hace un tiempo cuando intenté ponerlo porque no te haces ni idea las vueltas que dí XD Pero gracias igualmente por los botones porque esos son muy cuquis :D
    Un besito <3

    ResponderBorrar
    Respuestas
    1. Gracias:3 espero y te sirvan de algo y te animes cambiar el tipo de boton.
      Besos:*

      Borrar
  3. Hola ! ^^
    Gracias por los tutoriales , sirven mucho de ayuda para los blogs que acaban de empezar o para las personas que quieran rediseñar su blog como yo jajaja, así que te haré caso y voy a intentar hacerlo porque hace mucho que vengo queriendo poner el botón de leer más pero nunca me he animaso , así que lo intentaré.
    Por cierto, he venido a quedarme , así que ya tienes una NUEVA SEGUIDORA MÁS , te invito a que te pases por mi blog y si te gusta que te quedes en él.

    Besos de duendecillos ♥

    ResponderBorrar
    Respuestas
    1. Hola!! espero y os siga siendo de ayuda ^^.
      Gracias por los ánimos. espero y os sirva de mucho :3

      Borrar
  4. ¡Hola, guapísima! ^^

    No sabes el favorazo que le haces a muchísima gente, empezando por mí, haciendo este tipo de entradas. En serio, yo para el diseño web soy una negada de campeonato. Doy gracias al cielo por saber colgar la entrada sin hacer nada que no proceda jajajajaja Bromas a parte, de verdad: muchísimas gracias ^.^ Está todo súper bien explicadito :D Se nota que le has dedicado ganas al tutorial y eso se agradece un montonazo :)
    ¡Un besazo muy grande y feliz miércoles! ^^

    ResponderBorrar
    Respuestas
    1. Hola!!
      si trato de hacerlo entender y no saltarme nada.. muchas veces se saltan cosas o no dejan fotos cuando es un paso algo complicado.
      Espero y os ayude demasiado :3

      Borrar
  5. ¡Hola!
    Mañana mismo me pongo a leer con detenimiento el tutorial porque la verdad es que llevo mucho tiempo queriendo poner este botón pero no daba, así que muchas gracias por la entrada. Gracias por pasarte por mi blog y seguirme, ya te sigo de vuelta.
    Un beso ;)

    ResponderBorrar
  6. Muchas gracias me sirvió muchísimo :)

    ResponderBorrar
  7. Muchas gracias por los tutoriales

    ResponderBorrar
  8. ¡Muchas gracias, UN VIAJE POR LOS LIBROS! Implementando uno de tus códigos en uno de mis blogs... ¡Te deseo éxito permanente en tus empresas!

    ResponderBorrar

Hola!
El blog es tanto tuyo como mio, yo solo expreso mi opinión y hago ver los libros desde otra perspectiva <3.
Cualquier comentario que no sea ofensivo o SPAM masivo será bienvenido.
Un beso. Felices Lecturas.

Gaby. Con tecnología de Blogger.