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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
-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 */
}
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.
Y muchos más artículos interesantes si nos sigues en...
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¿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?
ResponderEliminarSe puede poner en cualquier parte dentro del CSS. En Blogger sería entre las etiquetas SKIN.
EliminarMuchísimas gracias por los estilos y la imaginación que tienes y compartes, reitero que creatividad Oloblogger :D
ResponderEliminarMuy bueno, ya esta en mi blog el ultimo, saludos Oloman
ResponderEliminarEstán buenísimos. Gracias.
ResponderEliminarGabriela.
Yo lo intenté pero en el "editor de plantillas" me aparece el cambio pero en el blog no :(.
ResponderEliminarUn abrazo.
¿Cóooomooo? Supongo que te refieres al nuevo "Diseñador de plantillas"
EliminarHe 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?
¡Solucionado!... No había guardado los cambios (que tonto soy, ainsss).
EliminarUn abrazo.
Ese tipo de cosas nos suceden a todos :D
EliminarExcelente 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.
ResponderEliminarMuchas gracias por irnos educando :)
Gracias, excelente aporte!
ResponderEliminar¡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?
ResponderEliminarSin 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;
EliminarSi no es una tipografía estándar entonces ya tendrás que cargarla previamente. Por ejemplo con la API de Google Fonts.
De acuerdo, ¡muchas gracias! ^^
EliminarEspectacular. Muy vistoso y bonito
ResponderEliminarMuy bueno. Gracias por compartir
ResponderEliminarEstá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 =)
ResponderEliminarClaro. 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.
EliminarYa lo he encontrado, ahora en un tiempo libre lo voy a probar. Gracias Oloman =)
EliminarGracias 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¿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...
EliminarExcelente. mil gracias. lo aplique en mi web y me gustó demasiado.
ResponderEliminarAmigo Oloman,
ResponderEliminarMe 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
Buenas Antonio. Aquí se explica un poco más: http://www.oloblogger.com/2011/02/modificar-el-aspecto-del-corte-mas.html
EliminarMe encantan! Muchas gracias por compartir tus ideas! Un saludo!
ResponderEliminarMuchas 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.
ResponderEliminarTe envío un afectuoso saludo.
Antonio
Utilizo el scrip de Ciudad Blogger
ResponderEliminarhttp://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.
Según vi allí, lo que hay que utilizar si usas ese código es:
Eliminar<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.
Pues no, no me funcionó, los estilos que tengo son estos:
Eliminarjump-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..."
Me preguntaste por el HTML y el que debes poner es el que te dije, el del primer párrafo de 17.1.
EliminarLuego 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?
tengo un problema, desaparecio el estilo css de mi "leer mas" y no le encuentro la solucion, podrias ver que es?
ResponderEliminarwww.melejsoft.blogspot.com
gracias!
Tienes un botón rectangular con fondo amarillo anaranjado. Supongo que ya lo encontraste.
EliminarDe todas formas, sólo tienes que buscar en tu plantilla ".jump-link" y te aparecerá la parte dónde lo tienes configurado.
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
ResponderEliminarEstos estilos son para los cortes &!--more--> de Blogger. Tú utilizas un sistema de sumarios con JavaScript y no este (ver enlace).
EliminarBusca 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.
Gracias...
Eliminarque tal!
ResponderEliminartengo 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;
}
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.
EliminarHola!
ResponderEliminarTe 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!
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.
EliminarPero 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
Hola q tal!
ResponderEliminarAntes 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/
Solucionado ¿no?
Eliminarhe logrado solucionarlo! gracias!
EliminarHola Oloman, felicidades por tu blog. Te escribo para hacerte una cosulta.
ResponderEliminarEn 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.
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 >
EliminarHize un apaño... xd
ResponderEliminarTambien 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.
Genial los botones, gracias y una felicitación por el site tan útil.
ResponderEliminarHola Oloman,
ResponderEliminar¿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,
Hola. Sólo con esto:
Eliminar.jump-link a {
display: inline;
}
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.
EliminarTambié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
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.
EliminarHola a tod@s,
ResponderEliminarFantá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!
Holal. Es exactamente igual que para el salto de leer más, pero usando la clase correspondiente en lugar de la .jump-link a
EliminarNormalmente será la .post-comment-link a, aunque dependerá de la que use tu blog en concreto.
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
ResponderEliminarLo he colocado sin más, sabes qué podría estar haciendo mal? muchisimas gracias por tu ayuda!!!
www.thefashionclubvip.blogspot.com
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.
EliminarMuchísimas gracias!!! Ha funcionado, eres un crack!! Gracias de verdad
ResponderEliminarBuenas tardes me sucede lo mismo que a "The Fashion Club" pero no se como solucionarlo. mi blog es http://www.pasadosderosca.es/
ResponderEliminarPd: Felicidades por ta grandisimo blog
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.
EliminarHola Oloman! antes que nada muchas gracias por todos tus aportes!! me sirvieron muchisimo!
ResponderEliminarTengo 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!
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.
EliminarComo puedo usar estos estilos para una mi web html(no blog)?
ResponderEliminarExactamente 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.
Eliminarmuy chulos :)
ResponderEliminar1º Oloman Gracias por tus tutos y el currele.
ResponderEliminarHe 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.
Gracias ya lo econtre como modificarlo.
ResponderEliminarEs 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".
Así es. Lo descubriste antes de que yo te lo dijera. Es sencillo cuando se sabe dónde buscar ;)
EliminarHe copìado el codigo y me funciona pero con los post u entradas que tienen comentarios, sale el boton de " Leer Más ".
ResponderEliminarLos 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.
¿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"
EliminarGracias ahora todo bien,, gracias por tu tiempo y trabajo .
ResponderEliminarYa me saldran mas dudas en otros aspectos de personalizar mi blog.XD
gracias por el tutorial... pasate por el blog http://elsecretodelabuenalectura.blogspot.com/
ResponderEliminarla verdad es que no salia como queria asi que lo mezcle con otro tutorial que encontre por ahi :D
Hola, he añadido el botón naranja pero quisiera centrarlo, qué código debo poner en CSS www.comounaprincesa.com
ResponderEliminarGracias.
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;"
ResponderEliminarMuy 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)
ResponderEliminarHaber si hay alguna guia por ahi, Gracias siempre aportando cosas muy buenas.
Disculpa me equivoque "digamos que si tengo una imagen y al lado letras"
EliminarUn "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.
EliminarQue 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
ResponderEliminar.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/
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.
ResponderEliminarHola buenas tardes,
ResponderEliminarHabré 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/
Sospecho que ya lo has arreglado Anne. Ahora mismo en tu plantilla tienes esta:
Eliminarhttp://4.bp.blogspot.com/-sprnt71Z6ZE/UvjqOgucpII/AAAAAAAAEZg/o4bat1Bedfc/s1600/Seguir+leyendo.jpg
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 .
ResponderEliminarhttp://www.fashionismylifebyestefania.com/
Claro. Añade a tu CSS esto:
Eliminar.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;
}
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?
ResponderEliminarGracias
(mi blog http://www.decorandoparalossentidos.com/)
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.
EliminarBusca 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.
Lo siento no me sale.
EliminarEl 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.
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.
EliminarLa 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>
Gracias mil, lo probaré (ahora no, que ya son las 4:00 y aunque sea un buho, no tanto).
EliminarHola, 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í:
ResponderEliminarhttp://allaboutmebypat.blogspot.com.es
Pat, busca en tu código esto:
Eliminar.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;
}
Hecho! Perfecto, muchisimas gracias :))))
EliminarAmigo 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
ResponderEliminarEste es mi Blog http://espeli.blogspot.com/
EliminarHola. Lo más fácil para no tener que tocar el script es que lo ocultes con CSS incluyendo esto en tu plantilla:
Eliminar.news-thumb-wrapper a+a {
display: none;
}
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/
ResponderEliminarNo 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.
Eliminarok, pero donde pongo el còdigo?? muchas gracias.
EliminarConceptos básicos: Dónde añadir el CSS o código para el estilo
EliminarGracias, Oloman, una buena colección de botones para todos los gustos.
ResponderEliminarEn 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.
Gracias Jose. Realmente esos efectos para los checkbox siempre me han gustado ;)
EliminarHola para poder cargar estos estilos que tendría que poner en mi html?
ResponderEliminarHola 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.
EliminarHola Calvoman, soy ese tipo que te mando a parir hace un tiempo, no te hagas drama, todo perdonado, Ahora tengo una dificultad, cuando intento colar ese codigo en Css y lo guardo, no me aparece en el blog, sigue siendo el mismo 'seguir leyendo' de siempre ¿Alguna idea?
ResponderEliminar¿Cómo es eso? ¿Vienes a mi "casa", me pones a caldo, no contestas a mi réplica y ahora cuando te interesa pedir ayuda me perdonas? Eres cojonudo tío.
EliminarLa respuesta a tu pregunta es que si no te funciona el CSS y no te aparece en el blog, con seguridad que no lo estás insertando en el lugar adecuado. Echa un vistazo por favor a este artículo en el que se explica todos los lugares dónde se puede añadir CSS en Blogger.
Y en cualquier caso, un sitio inequívoco en tu caso concreto, pienso que podría ser por ejemplo editando la plantilla, justo antes de:
/* Mobile
----------------------------------------------- */
Holaaa, estimado Oloman. ¿me puedes ayudar con una platilla? Ya viene con un salto con el nombre "continue reading", pero no lo puedo encontrar en el html... Espero que estés bien, ¡saludos!
ResponderEliminar