21 enero 2014

[Tutorial] Básicos que todo blogger debería saber - 2 Leer más


Segunda parte del tutorial "Básicos que todo blogger debería saber", esta vez toca Leer más (o salto de línea).
Por si hay alguien que no sabe como hacerlo, os lo explicaré con unos pequeños pasos.
¡No es obligatorio ponerlo! Si os gustan vuestras entradas tal y como están, perfecto ;)
Antes de ellos explicaré un poco lo que es, para aquellos que no lo sepan, básicamente algunas veces se hace una entrada muy larga y al publicarla vemos que nos ocupa todo el espacio, se puede ocultar la mayoría para que quede todo más limpio.
Lo primero iremos al menú de arriba, dónde esta la hoja rota (las imágenes se hacen más grandes, haced clic en ellas!) 

En la sección Redactar os aparecerá una línea, y detrás en "Html" nos tendría de aparecer: <!--more--> 
¡Hasta aquí todo perfecto! Ahora vamos a darle estilo, es decir personalizarlo.
Vamos a Blogger - Diseño - Entradas del blog - Editar (se abrirá una ventana) y en dónde pone: Texto del enlace de la página de entrada, ponéis el texto que más os guste, en mi caso es Sigue leyendo.
Si queréis ponerlo un poco más bonito, entonces tendréis de meter mano a la plantilla... antes de hacer nada, guardar una copia por si los cambios no nos gustan o tenemos algún problema.
Blogger - Plantilla - Editar html, expande la plantilla de artilugio (haced clic en la flechita para ver los estilos) y poned entre <head> y </head> lo siguiente:



Bien, vamos a comentar cada cosa:
JUMP-LINK
font-family: El tipo de fuente que os guste, en Google Fonts, hay un montón y explican como ponedlos en el blog ; )
tamaños: Simplemente id trasteando las proporciones.
color: Este será el color del enlace. Si no os gusta podéis id a dónde voy yo a buscar los códigos: Color Hex.

JUMP-LINK A
text-decoration: Yo puse que no.
font_weight: En este caso puse negrita.
color: Lo mismo que arriba.

JUMP-LINK A:HOVER
color: El color que quedará una vez que visites ese enlace.
Para poner una imagen de fondo, se tendría de poner: background: url("ENLACEDELAIMAGEN"); en todos los "jump".
También se puede poner un borde border: 1px solid #000000; (donde 1px es el grosor del borde, solid, la forma y luego el color, puede ser el que se quiera.
También se puede redondear, en fin, hacer verdaderas maravillas.
Aunque espero que con este mini-tutorial os haya ayudado un poco!! Besoss.

- Botón mostrar (spoiler)
- Leer más (salto de línea)
- Comillas (blockquote)
Pinkiland | 18:56 | |
♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥

15 comentarios:

  1. Está todo muy bien explicado. Yo únicamente uso lo de "la hoja rota" tal y como lo llamaste. Me gusta realmente que se use en un blog, así sólo te metes en una entrada si te interesa y puedes ver las otras que se te hayan podido escapar; el otro modo es agotador, sobre todo si la entrada es demasiado larga... y si quieres dejar un comentario, cuando puedes leerla sin pinchar, es otro rollo a parte...

    Pero bueno, es mi opinión. Ya para gustos, colores =)

    Un beso.

    ResponderEliminar
    Respuestas
    1. A mí me gusta porque lo veo más ordenado, pero tal y como dices, para gustos, colores!! : )

      Eliminar
  2. Muchas gracias por el tutorial!! La verdad es que soy una negada para estas cosas. xD

    ResponderEliminar
  3. Lo del boton mostrar casi me da un yuyu esta mañana he puesto ese botón para una cosa y se ha cargado el diseño del blog y lo he tenido que volver a poner todo nuevo...miedito

    ResponderEliminar
    Respuestas
    1. O__o no lo entiendo, lo has puesto en una entrada y se ha cargado la plantilla? Qué raroooooo.

      Eliminar
  4. ¡Gracias por el tutorial! cuando se lleva poco tiempo con el blog a veces cuesta ponerlo al gusto de una y no sabes donde buscar.
    Besos!

    ResponderEliminar
  5. Ostras, pues es un tutorial super útil. Yo te juro que pensaba que había que tocar la plantilla o algo (es decir, que sería algo más complicado de lo que realmente es xD)

    Gracias por la entrada!

    Un beso!

    ResponderEliminar
    Respuestas
    1. Si vas a poner el enlace tal cual, es algo facilito, apenas tienes de tocar nada : )

      Eliminar
  6. Me lo dejo guardadito por si en algún momento me animo a practicar algo de esto. ¡Gracias!
    Besotes!!!

    ResponderEliminar
  7. Me parece una muy buena contribución estos tutoriales. Yo lo dejaré así cómo lo tengo porque me gusta ver la entrada entera, pero lo tendré presente por si en un futuro cambio de opinión :)

    Un beso!

    ResponderEliminar
  8. Qué curioso, a veces he pensado en ponerlo o no, lo tendré en cuenta si quiero hacerlo :D

    ResponderEliminar
  9. Uff yo con lo dura de cabeza que soy, ni sabía para que servía la hojita. Gracias por la explicación guapísima :D
    ¡Un beso!

    ResponderEliminar