Algunas ideas para el salto 'Leer más' u otros botones | Oloblogger ¿Usas un corte para mostrar tus entradas truncadas en la página de Inicio? ¿Quieres decorar ese text...

14 de marzo de 2012

Algunas ideas para el salto 'Leer más' u otros botones

¿Usas un corte para mostrar tus entradas truncadas en la página de Inicio? ¿Quieres decorar ese texto con algo más de estilo?

Pues hala... Aquí tienes unos cuantos estilos que puedes añadir a tu CSS para luego modificar a tu antojo colores y formas. Puedes usarlos para cualquier tipo de enlace de texto y de esta forma convertirlo en un boton.

Algunos son un poco raros pero dicen que para gustos las webs. Bueno son los colores, pero seguro que la expresión también cuadra en este caso.

Para no buscar códigos hexadecimales usé los nombres html de los colores.


Con fondo distinto y cambio de color de fuente con hover

.jump-link a {
text-align: center;
text-decoration: none;
padding: 3px;
color: white;
background: burlywood;
}
.jump-link a:hover {
color: black;
}



Esquinas redondeadas y cambio de fondo, color fuente y estilo con hover

.jump-link a {
text-align: center;
text-decoration: none;
padding: 5px;
color: olive;
background: khaki;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
}
.jump-link a:hover {
font-style: italic;
color: darkgreen;
background: yellowgreen;
}



Esquinas redondeadas, borde y cambio de color y fuente con hover

.jump-link a {
text-align: center;
text-decoration: none;
padding: 3px;
color: white;
background: blue;
border: 2px solid darkblue;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
}
.jump-link a:hover {
color: blue;
background: lightcyan;
border-color: blue;
}



Caja redondeada con borde que ocupa todo el ancho y con cambio de color de fondo

Leer más
.jump-link a {
display:block;
text-align: right;
text-decoration: none;
padding: 3px;
color: white;
background: darkgoldenrod;
border: 2px solid maroon;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
}
.jump-link a:hover {
background: goldenrod;
}



Caja con borde y cambio de color de fondo, fuente y ancho mediante transición

Leer más
.jump-link a {
display:block;
width:90px;
text-align: right;
text-decoration: none;
padding: 3px;
color: whitesmoke;
background: black;
border: 2px solid darkblue;
-moz-transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out;
}
.jump-link a:hover {
width:300px;
color: black;
background: whitesmoke;
-moz-transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out;
}



Caja con cambio de color de fondo que se oscurece y llega a ocupar casi todo el ancho mediante transición

Leer más
.jump-link a {
display:block;
width: 10%;
min-width:80px;
text-align: right;
text-decoration: none;
padding: 3px;
color: black;
background: yellow;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
-moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s;
}
.jump-link a:hover {
width: 94%;
background: gold;
-moz-transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out;
}



Caja con forma de flecha con cambio de color al hacer hover

.jump-link a {
position:relative;
height: 24px;
line-height: 24px;
text-align: left;
text-decoration: none;
padding: 4px;
color: white;
background: DarkSlateBlue;
}
.jump-link a:hover {
background: slateblue;
}
.jump-link a:after {
border-color: transparent transparent transparent DarkSlateBlue ;
border-style: solid;
border-width: 13px 13px 13px 13px;
content: "";
float: right;
right:-26px;
height: 0;
position: absolute;
top: 0;
width: 0;
}
.jump-link a:hover:after {
border-color: transparent transparent transparent slateblue;
}



Con forma de etiqueta y cambio suave de color con el hover

.jump-link a {
position:relative;
height: 24px;
line-height: 24px;
text-align: left;
text-decoration: none;
padding: 4px 6px 4px 14px;
color: darkgoldenrod;
background: palegoldenrod;
}
.jump-link a:hover {
background: khaki;
}
.jump-link a:after {
background-color: white;
content: "";
float: right;
left: 0;
position: absolute;
top: 10px;
height: 6px;
width: 6px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.jump-link a:before {
border-color: transparent palegoldenrod transparent transparent ;
border-style: solid;
border-width: 13px 13px 13px 13px;
content: "";
float: left;
left:-26px;
height: 0;
position: absolute;
top: 0;
width: 0;
}
.jump-link a:hover:before {
border-color: transparent khaki transparent transparent;
}



Botón circular que gira al hacer hover

.jump-link a {
display:block;
color:#fff;
font-size:15px;
line-height:80px;
text-align:center;
text-decoration:none;
width:80px;
height:80px;
background: orange;
padding:0;
margin:0;
border: 2px solid orange;
-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;
}
.jump-link a:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s;
}



Botón con gradientes y relieve suave

.jump-link a {
-webkit-box-shadow: 0 1px 1px #555;-moz-box-shadow: 0 1px 1px #555;box-shadow: 0 1px 1px #555;
border-top:1px solid #ef9900;
-moz-border-radius:2px;
-web-kitborder-radius:2px;
border-radius:2px;
background: #f9a817; background: -moz-linear-gradient(center top , #ffbb41, #f9a817) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%,#ffbb41), color-stop(100%,#f9a817)) repeat scroll 0 0 transparent;
color: #000;
display: block;
font-weight: bold;
padding: 8px 10px 9px;
position: relative;
text-decoration: none;
font-size:15px;
text-shadow:1px 0 1px #FF0;
width:110px;
text-align:center;
}
.jump-link a:hover {
background: #ffbd46;
background: -moz-linear-gradient(center top , #ffbd46, #ffb229) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%,#ffbd46), color-stop(100%,#ffb229)) repeat scroll 0 0 transparent;
color: #555;
}



Botón realista con efecto pulsación

.jump-link a {
text-decoration: none;
font-weight: bold;
text-shadow: rgba(255, 255, 255, .5) 0 1px 0;
padding: 4px;
margin: 4px;
position: relative;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255, 255, 255, 0) ), to( rgba(255, 255, 255, 0.7) )), url(noise.png);
background-image: -moz-radial-gradient(top, ellipse cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255, 255, 255, 0) ), to( rgba(255, 255, 255, 0.7) ));
-webkit-transition: background .2s ease-in-out;
-moz-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
color: #666 !important;
background-color: #BFBFBF;
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* sombra inner */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color borde */ rgba(0,0,0,0.2) 0 .5em 5px;
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* sombra inner */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color borde */ rgba(0,0,0,0.2) 0 .5em 5px;
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* sombra inner */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color borde */ rgba(0,0,0,0.2) 0 .5em 5px;
}
.jump-link a:hover {
background-color: hsl(0, 0%, 83%);
}
.jump-link a:active {
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* sombra inner */
rgba(0,0,0,0.4) 0 .1em 1px, /* borde */
rgba(0,0,0,0.2) 0 .2em 6px; /* sombra */
-moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* sombra inner */
rgba(0,0,0,0.4) 0 .1em 1px, /* borde */
rgba(0,0,0,0.2) 0 .2em 6px; /* sombra */
box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* sombra inner */
rgba(0,0,0,0.4) 0 .1em 1px, /* borde */
rgba(0,0,0,0.2) 0 .2em 6px; /* sombra */
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

100 comentarios :

  1. Y el rato más tonto que he pasado probando colores para el botón... Modificación añadida a la plantilla, ¡gracias por el código!

    ResponderEliminar
  2. ¿En que parte del CSS se tiene que agregar este código? O este código se puede poner en cualquier parte del código de la plantilla?

    ResponderEliminar
    Respuestas
    1. Se puede poner en cualquier parte dentro del CSS. En Blogger sería entre las etiquetas SKIN.

      Eliminar
  3. Muchísimas gracias por los estilos y la imaginación que tienes y compartes, reitero que creatividad Oloblogger :D

    ResponderEliminar
  4. Muy bueno, ya esta en mi blog el ultimo, saludos Oloman

    ResponderEliminar
  5. Están buenísimos. Gracias.
    Gabriela.

    ResponderEliminar
  6. Yo lo intenté pero en el "editor de plantillas" me aparece el cambio pero en el blog no :(.

    Un abrazo.

    ResponderEliminar
    Respuestas
    1. ¿Cóooomooo? Supongo que te refieres al nuevo "Diseñador de plantillas"

      He visto tu código fuente y no veo incorporada ninguna clase para .jump-link. ¿Puedo seguir suponiendo que no has llegado a guardar los cambios?

      Eliminar
    2. ¡Solucionado!... No había guardado los cambios (que tonto soy, ainsss).

      Un abrazo.

      Eliminar
    3. Ese tipo de cosas nos suceden a todos :D

      Eliminar
  7. Excelente entrada una vez más! Yo había puesto un botón con imagen, y ahora ya lo he cambiado a css. Lo que no me ha salido es poner una flecha a la derecha cuando el contenedor es mayor que el texto, porque me queda justo después del texto... pero es igual, me gusta mucho como ha quedado.

    Muchas gracias por irnos educando :)

    ResponderEliminar
  8. Gracias, excelente aporte!

    ResponderEliminar
  9. ¡Genial, Oloblogger! Lo probaré :D Y una pregunta, ¿se podría cambiar la fuente de la letra a otra que no sea la predeterminada cambiando el código del botón?

    ResponderEliminar
    Respuestas
    1. Sin ningún problema y además es una cosa que pensé poner y al final se me olvidó. Eso es incorporando font-family: NOMBRE_FUENTE;

      Si no es una tipografía estándar entonces ya tendrás que cargarla previamente. Por ejemplo con la API de Google Fonts.

      Eliminar
    2. De acuerdo, ¡muchas gracias! ^^

      Eliminar
  10. Espectacular. Muy vistoso y bonito

    ResponderEliminar
  11. Están buenos los diseños pero resulta que no pongo corte en mis entradas, y como ya son muchas no me gustaría editarlas una a una para que lo tuvieran. ¿Has publicado algo para que aparezca leer más sin que tengan salto o corte las entradas? Tengo un scrip de Java que encontré no recuerdo bien, me gusta como se ve pero falla bastante seguido. Un saludo =)

    ResponderEliminar
    Respuestas
    1. Claro. Sólo tienes que teclear "sumarios" en el buscador y te saldrán un par de opciones y algunas variantes. Mi favorito (el que uso) es el de "Sumarios sin JavaScript", precisamente porque no usa ese lenguaje para nada.

      Eliminar
    2. Ya lo he encontrado, ahora en un tiempo libre lo voy a probar. Gracias Oloman =)

      Eliminar
    3. Gracias por tu aporte. Una pregunta lo he aplicado en dos blog que tengo blogger, en uno funciona y en el otro no. Porqué puede ser? gracias

      Eliminar
    4. ¿Qué has aplicado Helena? ¿El leer más con efectos o los sumarios que dice Olmo? Cuando contestes me tendrás que decir cuáles son tus blogs, porque en tu perfil no salen...

      Eliminar
  12. Excelente. mil gracias. lo aplique en mi web y me gustó demasiado.

    ResponderEliminar
  13. Amigo Oloman,

    Me interesa instalar en mi Blog el botón Leer más, y veo que están muy bien las posibilidades que nos das, pero, al menos yo, no veo dónde, en qué lugar de la plantilla hay que instalarlo. Si me lo dices aquí mismo, te estaré muy agradecido. ¿O hay que instalarlo en cada entrada?.

    Con gracias anticipadas, te envío un cordial saludo.

    Antonio

    ResponderEliminar
    Respuestas
    1. Buenas Antonio. Aquí se explica un poco más: http://www.oloblogger.com/2011/02/modificar-el-aspecto-del-corte-mas.html

      Eliminar
  14. Me encantan! Muchas gracias por compartir tus ideas! Un saludo!

    ResponderEliminar
  15. Muchas gracias, amigo Oloman. Siempre lo he pensado: eres un genio Blogger y muy generoso con las preguntas que te hacemos. Gracias a tí, ya sé cómo se instala Leer más, o cualquier texto equivalente.

    Te envío un afectuoso saludo.

    Antonio

    ResponderEliminar
  16. Utilizo el scrip de Ciudad Blogger

    http://ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html

    Pero tengo problemas para poner el HTML, lo pongo así:

    <div class="jump-link">Leer más...</a></span></div>

    Saludos.

    ResponderEliminar
    Respuestas
    1. Según vi allí, lo que hay que utilizar si usas ese código es:
      <span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>

      Por tanto, si lo que quieres es utilizar alguno de estos efectos, dónde yo pongo "jump-link", sustituye por "rmlink" que es la clase que utilizó Potro para el corte.

      Eliminar
    2. Pues no, no me funcionó, los estilos que tengo son estos:

      jump-link a {
      text-shadow:0px 1px 0px #f1f1f1;
      color:#555;
      background:#f7f7f7;
      border-radius:3px;
      padding:1px 6px;
      -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.6);
      -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.6);
      box-shadow:0px 0px 2px rgba(0,0,0,0.6);
      }
      .jump-link a:hover {
      background:#555555;
      color:#f1f1f1;
      text-decoration:none;
      border-radius:3px;
      text-shadow:0 1px 0 #222222;
      -o-transition:all .4s linear;
      -moz-transition:all .4s linear;
      -webkit-transition:all .4s linear;
      }

      Y el código que pongo es este:

      <div class="jump-link">Leer más...</a></span></div>

      Sólo lo sustituyo por el texto "Leer más..."

      Eliminar
    3. Me preguntaste por el HTML y el que debes poner es el que te dije, el del primer párrafo de 17.1.

      Luego puedes tomar cualquiera de los estilos que se explican pero teniendo la precaución de cambiar la clase .jump-link a por .rmlink a y lo mismo con la que lleva el hover, .jump-link a:hover hay que sustituirla por .rmlink a:hover

      ¿Mejor ahora?

      Eliminar
  17. tengo un problema, desaparecio el estilo css de mi "leer mas" y no le encuentro la solucion, podrias ver que es?
    www.melejsoft.blogspot.com
    gracias!

    ResponderEliminar
    Respuestas
    1. Tienes un botón rectangular con fondo amarillo anaranjado. Supongo que ya lo encontraste.

      De todas formas, sólo tienes que buscar en tu plantilla ".jump-link" y te aparecerá la parte dónde lo tienes configurado.

      Eliminar
  18. Ya cambie pero solo se me cambio el formato pero el texto no dise continue reading, quiero poner Leer Mas aki esta mi blog www.jugabilidad2.blogspot.com

    ResponderEliminar
    Respuestas
    1. Estos estilos son para los cortes &!--more--> de Blogger. Tú utilizas un sistema de sumarios con JavaScript y no este (ver enlace).

      Busca en tu plantilla la función "createSummaryAndThumb". Casi al final encontrarás la cadena "Continue reading" que comentas. Simplemente sustituye esas palabras por las que quieras y guardas. Haz Vista Previa antes de guardar si no estás seguro.

      Eliminar
  19. que tal!
    tengo una duda agrego el codigo para tener el boton pero me aparece de lado izquierdo, klo quisiera poner de lado derecho tambien quiero camb9iar de color el fondo pero no me lo permite
    .jump-link a {
    display:block;
    color:#fff;
    font-size:15px;
    line-height:80px;
    text-align:center;
    text-decoration:none;
    width:80px;
    height:80px;
    background: orange;
    padding:0;
    margin:0;
    border: 2px solid orange;
    -webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;
    }
    .jump-link a:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s;
    }

    ResponderEliminar
    Respuestas
    1. No puedo ver tu blog porque no lo tienes grabado en tu perfil, pero en un principio sólo tendrías que añadir en .jump-link a un float:right; y por otra parte, cambiar ese "naranja" de background:orange; por el color que desees.

      Eliminar
  20. Hola!
    Te conozco hoy y me encanta la facilidad que tienes para aclarar las dudas que tenemos, formidable!
    He leído algún enlace que marcar arriba para cambiar "Más información" por otras palabras...lo hice y cambié el color, pero quería enrevesarlo un poquito más...
    Querría poner tu propuesta del circulo que gira al pasar el cursor, pero cambiando de color (que eso supongo que si que sabré) y cambiando "leer más" por otras palabras...jejeje
    ¿cómo puedo hacerlo?
    1000 gracias!

    ResponderEliminar
    Respuestas
    1. Hola. Sólo tienes que añadir en la parte CSS de tu plantilla (entre las etiquetas SKIN) el código que hay justo debajo del ejemplo.

      Pero antes necesitas añadir a tus posts ese sistema de corte que sólo te muestra en portada una parte de las entradas. En este enlace podrás ver de qué te hablo: Blogger: Nueva opción MORE o Leer Más

      Eliminar
  21. Hola q tal!
    Antes que nada te felicito por tu excelente sitio web!
    No me muestra el corte en la pag de inicio! podrias ayudarme a ver!
    mi blog es: http://aflrovvs.blogspot.com/

    ResponderEliminar
  22. Hola Oloman, felicidades por tu blog. Te escribo para hacerte una cosulta.

    En todas las entradas del blog quiero meter un código ccs , desgracidadmente tienen que ir al principio por temas de diseño. Mi sorpresa ha sido cuando en la pag principal, que tiene un resumen con las entradas con "leer mas", aparece el codigo.... , todo el resumen de la entrada es codigo... xd

    Te pongo un ejemplo:
    entrada individual(sacar foto del div).. todo bien no lee codigo textualmente
    http://ipsum-prueba.blogspot.com.es/2012/10/sacar-foto-del-div.html

    Pagina principal: Lee codigo textualmente.
    http://ipsum-prueba.blogspot.com.es/


    Hay alguna manera de evitar que no lea textualmente el codigo ? , solo me ocurre con el leer mas.
    Un Abrazo.
    pd: En Opciones de la Entrada , esta la opcion marcada de interpretar html escrito.
    de todas formas con la otra opcion ocurre lo mismo.

    ResponderEliminar
    Respuestas
    1. Pues no veo el problema ahora Ipsum, por lo que supongo que en estos días que tardé en contestar lo solucionaste. Supongo que era cosa del sistema que utilizabas. Ahora mismo creo que tienes el script con la función createsummaryandthumb y ese me consta que elimina todo lo que vaya entre símbolos < y >

      Eliminar
  23. Hize un apaño... xd
    Tambien le deje un mensaje a JMiur y me dijo ayer tambien que era el script, lo quise cambiar, pero todos lo que encontre hacian igual, asi que deje el script original, y modifique el css para poder poner el codigo al final de la entrada (por lo cual no lo lee) y no me perdiera la posicion en la pantalla que queria y funciono xd

    Gracias por interesarte.

    Un Abrazo.


    ResponderEliminar
  24. Genial los botones, gracias y una felicitación por el site tan útil.

    ResponderEliminar
  25. Hola Oloman,

    ¿Cómo consigues que en tu blog el salto de página (más)este situado justo a continuación del texto y no salte de linea?

    Un abrazo,

    ResponderEliminar
    Respuestas
    1. Hola. Sólo con esto:
      .jump-link a {
      display: inline;
      }

      Eliminar
    2. He colocado el css que me indicas donde me dices, incluso he mirado que no hubiera etiquetas "br /" justo antes de "!--more--" en el post, y me sigue saltando de línea.

      También he probado en el html de la plantilla colocarlo, como en la tuya, dentro de un "span" ya que en la mía está dentro un "div", pero salta igual...

      De todas maneras, gracias por ayudarme.

      Un abrazo

      Eliminar
    3. He estado repasando mi propio código y es que además, mis sumarios están también hechos con un SPAN. Si los tienes con un DIV o con P, es posible que te siga pasando eso que dices. Un float:right no falla nunca, pero aunque te lo pondría en la misma línea, te lo llevaría al extremo derecho.

      Eliminar
  26. Hola a tod@s,

    Fantástico este Blog que ayuda a los blogueros torpes en la materia.

    Mi pregunta... ¿podría conseguir un botón de este estilo en la opción de "deja un comentario"|"1 comentario"|"x comentarios"? Quiero mejorar el diseño en este sentido y desconozco como poder aplicarlo.

    Gracias por la ayuda!

    ResponderEliminar
    Respuestas
    1. Holal. Es exactamente igual que para el salto de leer más, pero usando la clase correspondiente en lugar de la .jump-link a

      Normalmente será la .post-comment-link a, aunque dependerá de la que use tu blog en concreto.

      Eliminar
  27. Hola!! Gracias por tus post!! Es maravilloso cómo explicas todo con tanta facilidad!! Hasta ahora todo me ha ido bien, pero llevo ya unos dias intentando poner el boton de leer más, con gradientes y relieve suave pero en morado. Lo que pasa es que no me sale ningun boton en el blog, me sigue apareciendo el leer mas en letra... lo he intentado mil veces y no se que puedo estar haciendo mal... Lo he intentado tanto en la edicion HTML como en el diseñador de plantillas en avanzado, en CSS

    Lo he colocado sin más, sabes qué podría estar haciendo mal? muchisimas gracias por tu ayuda!!!



    www.thefashionclubvip.blogspot.com

    ResponderEliminar
    Respuestas
    1. La culpa la tiene un código HTML que anula lo que pusiste para el jump-link. Está justo antes de esto último y lo distinques porque va entre etiquetas < >. Borra todo eso que ahí sólo sirve para que no funcione lo otro. Borra ahí todo lo que va entre esos símbolos (y también los símbolos), dale a Vista Previa para asegurarte de que lo hiciste bien y listo.

      Eliminar
  28. Muchísimas gracias!!! Ha funcionado, eres un crack!! Gracias de verdad

    ResponderEliminar
  29. Buenas tardes me sucede lo mismo que a "The Fashion Club" pero no se como solucionarlo. mi blog es http://www.pasadosderosca.es/

    Pd: Felicidades por ta grandisimo blog

    ResponderEliminar
    Respuestas
    1. A diferencia de lo que le pasaba a The Fashion Club, en tu blog no veo que haya ningún estilo (CSS) añadido para que cambie el aspecto del Leer más. El sitio dónde insertarlo es antes de la etiqueta de cierre /SKIN de tu plantilla o bien desde las opciones avanzadas del Diseñador de plantillas. Personalmente prefiero el primer lugar de los dos indicados.

      Eliminar
  30. Hola Oloman! antes que nada muchas gracias por todos tus aportes!! me sirvieron muchisimo!
    Tengo una duda con este boton de "leer mas".. queria saber si se puede ocultar o quitar de algunas entradas en particular. No lo quiero quitar en todas sólo en algunas. Yo edité el texto del boton y en vez de poner "leer mas" lo cambie por "descargar" el problema es que tengo unos cuantos posts (10) que no coinciden con el texto "descargar" y seria genial si se puede eliminar este boton para esas entradas en particular. (o si se puede cambiar el texo tambien estaría bueno)

    Espero que me puedas ayudar! (te paso mi blog para que lo veas http://mivideotecadvdrip.blogspot.com.ar )

    Gracias por todo y saludos!

    ResponderEliminar
    Respuestas
    1. Hola. Aquí tienes una condición que te permite seleccionar una entrada en concreto. Dentro de ella podrías poner unas etiquetas STYLE para añadir un .jump-link a {display:none;} Con eso ocultarías ese enlace en esa entrada en concreto y repetir el proceso para otras entradas. Si no son muchas te puede servir.

      Eliminar
  31. Como puedo usar estos estilos para una mi web html(no blog)?

    ResponderEliminar
    Respuestas
    1. Exactamente de la misma manera. Sólo tienes que asignar al enlace que te sirve de corte la clase "jump-link" y luego copiar el CSS que te interese en tu hoja de estilo. Si ya tienes una clase asignada entonces lo que habría que hacer sería sustituir en el CSS el selector jump-link por el tuyo.

      Eliminar
  32. 1º Oloman Gracias por tus tutos y el currele.

    He probado unos de tus botones de leer mas en concreto este:

    "Botón realista con efecto pulsación"

    Lo añadi el codigo al ccs todo correcto, pero en vez de decir el titulo del boton: " Leer Más ".

    Sale en el boton con titulo: " Más información >>"

    Pruebalo tu y veras testealo,, sive igual pero me gustaria mas el Titulo "Leer Más " la gente lo conoce más ahi manera de modificarlo gracias.

    ResponderEliminar
  33. Gracias ya lo econtre como modificarlo.

    Es tan fácil cómo ir a Diseño -> Dentro del cuadro "Entradas de blog" Editar -> Texto del enlace de la página de entrada y escribimos el texto que más nos guste, le damos a Guardar y listo. Usualmente se suele poner "Leer más" o "Seguir leyendo".

    ResponderEliminar
    Respuestas
    1. Así es. Lo descubriste antes de que yo te lo dijera. Es sencillo cuando se sabe dónde buscar ;)

      Eliminar
  34. He copìado el codigo y me funciona pero con los post u entradas que tienen comentarios, sale el boton de " Leer Más ".

    Los post u entradas que no tienen comentarios no me sale el boton de "Leer Más".

    Es defecto del sistema de blogger??

    Se puede arreglar??

    Yo cuando publico una entrada,quiero que los usuarios entren a comentar la entrada aunque aun no tenga ningun post.

    Ya me confirmareis gracias por vuestro trabajo.


    ResponderEliminar
    Respuestas
    1. ¿También lo arreglaste? No veo que exista ya ese problema. Todos los posts, tengan o no tengan comentarios vienen hoy con su "Leer más"

      Eliminar
  35. Gracias ahora todo bien,, gracias por tu tiempo y trabajo .

    Ya me saldran mas dudas en otros aspectos de personalizar mi blog.XD

    ResponderEliminar
  36. gracias por el tutorial... pasate por el blog http://elsecretodelabuenalectura.blogspot.com/

    la verdad es que no salia como queria asi que lo mezcle con otro tutorial que encontre por ahi :D

    ResponderEliminar
  37. Hola, he añadido el botón naranja pero quisiera centrarlo, qué código debo poner en CSS www.comounaprincesa.com

    Gracias.

    ResponderEliminar
  38. Veo otro distinto, pero si quieres añadir el último de esta entrada (naranja), entonces sólo tienes que añadir al selector ".jump-link a {...}" un "margin: 0 auto;"

    ResponderEliminar
  39. Muy buena Oloman, no abra alguna forma de cambiar el lugar donde por defecto la plantilla nos pone el Leer más, digamos que si tengo una imagen y al lado una imagen, pero quiero que el Leer mas este ubicado debajo de las letras que no cubren el mismo tamaño de la imagen se encuentre ahi. O si pudiera poner el Leer mas al lado de la fecha que se encuentra en la parte superior, arriba del titulo, pero obiamente que no se muestre en las paginas estaticas(que creo que son el post o la entrada con el cuerpo completo)

    Haber si hay alguna guia por ahi, Gracias siempre aportando cosas muy buenas.

    ResponderEliminar
    Respuestas
    1. Disculpa me equivoque "digamos que si tengo una imagen y al lado letras"

      Eliminar
    2. Un "float: right;" para ".jump-link a" debería ser suficiente, pero si lo quieres situar con precisión absoluta, añade a .post-body un "position: relative;" y luego a ".jump-link a" le añades posicionamiento absoluto o relativo y con top, bottom, left y right, ya lo sitúas exactamente dónde quieras.

      Eliminar
  40. Que tal amigo mi problema es que pongo el estilo pero al momento de actualizar la pagina no ocurre nada y sigue igual este es el estilo que deseo utilizar
    .jump-link a {
    text-decoration: none;
    font-weight: bold;
    text-shadow: rgba(255, 255, 255, .5) 0 1px 0;
    padding: 4px;
    margin: 4px;
    position: relative;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255, 255, 255, 0) ), to( rgba(255, 255, 255, 0.7) )), url(noise.png);
    background-image: -moz-radial-gradient(top, ellipse cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
    background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255, 255, 255, 0) ), to( rgba(255, 255, 255, 0.7) ));
    -webkit-transition: background .2s ease-in-out;
    -moz-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
    color: #666 !important;
    background-color: #BFBFBF;
    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* sombra inner */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color borde */ rgba(0,0,0,0.2) 0 .5em 5px;
    -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* sombra inner */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color borde */ rgba(0,0,0,0.2) 0 .5em 5px;
    box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* sombra inner */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color borde */ rgba(0,0,0,0.2) 0 .5em 5px;
    }
    .jump-link a:hover {
    background-color: hsl(0, 0%, 83%);
    }
    .jump-link a:active {
    background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
    background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
    background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
    -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* sombra inner */
    rgba(0,0,0,0.4) 0 .1em 1px, /* borde */
    rgba(0,0,0,0.2) 0 .2em 6px; /* sombra */
    -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* sombra inner */
    rgba(0,0,0,0.4) 0 .1em 1px, /* borde */
    rgba(0,0,0,0.2) 0 .2em 6px; /* sombra */
    box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* sombra inner */
    rgba(0,0,0,0.4) 0 .1em 1px, /* borde */
    rgba(0,0,0,0.2) 0 .2em 6px; /* sombra */
    }

    Este es mi Blog para que puedas ayudarme saludos
    http://www.infoutilidades.net/

    ResponderEliminar
  41. En tu caso es todo igual pero debes sustituir todos los "jump-link" por "readmorecontent", pues este último es el nombre del selector que usa tu plantilla.

    ResponderEliminar
  42. Hola buenas tardes,
    Habré modificado fotos y Url y ahora no puedo modificar ni quitar (que es lo peor) la imagen que había creado para el botón Leer más. Llevo horas intentando corregirlo, quitándolo de la plantilla pero sigue saliendo la señal gris redondo de prohibido. Me puedes ayudar por favor?
    Muchas gracias.
    Anne.
    http://annecharrierevintage.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Sospecho que ya lo has arreglado Anne. Ahora mismo en tu plantilla tienes esta:
      http://4.bp.blogspot.com/-sprnt71Z6ZE/UvjqOgucpII/AAAAAAAAEZg/o4bat1Bedfc/s1600/Seguir+leyendo.jpg

      Eliminar
  43. Hola me sale ,un tutorial genial,pero solo tengo un problema no me queda la imagen centrada ,me queda a la izquierda ,hay alguna manera de centrarlo?? gracias .
    http://www.fashionismylifebyestefania.com/

    ResponderEliminar
    Respuestas
    1. Claro. Añade a tu CSS esto:
      .jump-link {
      text-align: center;
      }

      Y si es una imagen, pues según la medida. Si por ejemplo es de 100px de ancho:
      .jump-link {
      width: 100px;
      margin:0 auto;
      }

      Eliminar
  44. Hola... muchas gracias, la verdad es que ha quedado chulísimo. Pero ahora me ha surgido un problema. Te cuento: tenía instalado también linkwithin y no sé por qué, ni en que momento, se me quitó. Ahora ha vuelto, y resulta que si lo veo con el post abierto el linkwithin es normal, pero si se ve en el post cerrado (con el botón de seguir leyendo) el linkwithin adquiere los mismos atributos (colores, desplegado) que el botón de seguir leyendo. ¡Qué cosa más rara! Así que desinstalé linkwithin y lo volví a instalar (que por cierto ahora no se deja instalar con un gadget html, si no que tengo que entrar a editar plantilla y copiar el código), pero aún así sigue estando raro, rarito. ¿Se te ocurre algo que no sea lo obvio, quitar una cosa o la otra?
    Gracias
    (mi blog http://www.decorandoparalossentidos.com/)

    ResponderEliminar
    Respuestas
    1. Hola Patricia. El problema es que has metido el código de Linkwithin dentro de la caja destinada al enlace Leer más y claro, en ese caso ese gadget adopta el mismo estilo que has definido para el enlace.
      Busca esta línea en tu plantilla <div class='jump-link'> y luego localiza su cierre (</div>). El código del Linkwithin estará por ahí en medio y realmente lo debes poner o bien después de ese cierre, o bien (y casi mejor), dentro de la caja post-footer.

      Eliminar
    2. Lo siento no me sale.
      El linkwithin lo tengo antes del cierre de body y no entre div class='jump-link'.../div, he probado cambiándolo a poner entre div class='post-footer'.../div, pero nada.
      He probado poniendo el código del botón leer más en Css, en ...,y en ..., pero nada.
      Finalmente he vuelto a poner linkwithin antes del cierre de body, y a la espera de alguna solución para insertar el código del botón leer más de nuevo.
      Gracias de todas maneras. No obstante, creo que algo hago mal, o entiendo mal ya que no se casi nada de edición.

      Eliminar
    3. Ahora que me diste el dato de que tienes el Linkwithin antes del cierre del body, por fin di con el problema. Tú usas un cargador mediante javascript y por tanto no insertas manualmente el código de Linkwithin, sino que esa utilidad lo carga por tí... dónde no debe.

      La solución creo que podría ser añadir a tu plantilla esta línea dónde quieras que salga la caja de entradas relacionadas:
      <div class='linkwithin_div'></div>

      A la pregunta ¿dónde lo quiero?, creo que lo mejor sería ponerla dentro de esto:
      <div class='post-footer-line post-footer-line-3'>
      AQUI LA LINEA DE ANTES
      </div>

      Eliminar
    4. Gracias mil, lo probaré (ahora no, que ya son las 4:00 y aunque sea un buho, no tanto).

      Eliminar
  45. Hola, he conseguido ponerlo, pero no se como hacer para que me aparezca en el centro en vez de a la izquierda, se me queda así:

    http://allaboutmebypat.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Pat, busca en tu código esto:
      .jump-link a {
      display: block;
      color: #fff;
      font-size: 15px;
      line-height: 80px;
      text-align: center;
      text-decoration: none;
      width: 80px;
      height: 80px;
      background: darkgrey;
      padding: 0;
      margin: 0 auto;
      border: 2px solid;
      -webkit-border-radius: 40px;
      -moz-border-radius: 40px;
      border-radius: 40px;
      }

      Y ese margin: 0; cámbialo por un margin: 0 auto;

      Y también elimina esto que encontré en tu blog y que no sirve para nada:
      .jump-link a {
      float: center;
      }

      Eliminar
    2. Hecho! Perfecto, muchisimas gracias :))))

      Eliminar
  46. Amigo Como elimino el Read More que se encuentra en mi Bloc creo que es un script y quiero borrarlo sin que se cambie los resumenes a pantalla completa que debo hacer

    ResponderEliminar
    Respuestas
    1. Este es mi Blog http://espeli.blogspot.com/

      Eliminar
    2. Hola. Lo más fácil para no tener que tocar el script es que lo ocultes con CSS incluyendo esto en tu plantilla:
      .news-thumb-wrapper a+a {
      display: none;
      }

      Eliminar
  47. Hola oloman, me gustarìa que me ayudaras para poner un boton de "leer mas" en ves de letras, pero busco en mi plantilla y no encuentro ninguno de los còdigos que dices, por favor necesito ayuda mi pàgina es: http://www.larecetademary.com/

    ResponderEliminar
    Respuestas
    1. No los tienes porque en principio no existen en ella, Maribel. Lo que tienes que hacer precisamente es añadir esos códigos a tu plantilla y automáticamente se cambiará el texto estándar por estos formatos que propuse.

      Eliminar
    2. ok, pero donde pongo el còdigo?? muchas gracias.

      Eliminar
  48. Gracias, Oloman, una buena colección de botones para todos los gustos.

    En algunos de mis Blogs, yo uso botones animados al estilo de iOS (en realidad son checkboxes modificadas), ya que van acorde son su temática.
    Si queréis echarles un vistazo, aquí os dejo el enlace: http://apps.comingtouch.com/

    Un saludazo y felicidades por tu gran Blog.

    ResponderEliminar
    Respuestas
    1. Gracias Jose. Realmente esos efectos para los checkbox siempre me han gustado ;)

      Eliminar
  49. Hola para poder cargar estos estilos que tendría que poner en mi html?

    ResponderEliminar
    Respuestas
    1. Hola Nadia. Eso no es HTML, sino CSS. Echa un vistazo a este post que es dónde explico dónde se puede añadir en Blogger cada código según su lenguaje.

      Eliminar