0
Si ya tienes el "Leer Mas" de Blogger pero no te gusta la forma en que se ve entonces puedes personalizar un poco su apariencia editando un poco el estilo CSS.
Como añadir estilo al "Leer Mas..." :
1. Lo primero que tienes que hacer es ir a tu plantilla: Diseño > Edicion de HTML
2. Cuando estes en tu plantilla busca este codigo: ]]></b:skin>
3. Arriba de ese codigo debes pegar el siguiente estilo CSS de manera que te quede asi:
Este codigo hara que tu "Leer Mas..." se vea alineado a la derecha y que se vea asi:
Ahora si quieres cambiar personalizar los colores explicare como funcionan los codigos del estilo CSS
.jump-link {
float: right; EL ATRIBUTO "RIGHT" COLOCA EL LEER MAS A LA DERECHA, PUEDES CAMBIARLO POR "LEFT"
padding: 4px 6px;
border: 2px solid #81BEF7; ES EL COLOR DEL BORDE
background: #CEE3F6; ES EL COLOR DEL FONDO
}
.jump-link a {
color: #FFFFFF; ESTE ES EL COLOR DE LAS LETRAS "LEER MAS"
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
border: 2px solid #BE81F7; COLOR DEL BORDE AL ESTAR EL MOUSE ENCIMA
background: #E3CEF6; COLOR DEL FONDO AL ETAR EL MOUSE ENCIMA
}
Ahora si quieres editar los colores lo unico que tienes que hacer es cambiar los codigos de los colores, aqui tienes la paleta de colores Hexadecimales
Como añadir estilo al "Leer Mas..." :
1. Lo primero que tienes que hacer es ir a tu plantilla: Diseño > Edicion de HTML
2. Cuando estes en tu plantilla busca este codigo: ]]></b:skin>
3. Arriba de ese codigo debes pegar el siguiente estilo CSS de manera que te quede asi:
.jump-link {
float: right;
padding: 4px 6px;
border: 2px solid #81BEF7;
background: #CEE3F6;
}
.jump-link a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
border: 2px solid #BE81F7;
background: #E3CEF6;
}
.jump-link a:hover {
}
]]></b:skin>
Este codigo hara que tu "Leer Mas..." se vea alineado a la derecha y que se vea asi:
Leer Mas...
Ahora si quieres cambiar personalizar los colores explicare como funcionan los codigos del estilo CSS
ESTA PARTE DEL CODIGO ES LA QUE LE DA EL ESTILO GENERAL AL LEER MAS:
.jump-link {
float: right; EL ATRIBUTO "RIGHT" COLOCA EL LEER MAS A LA DERECHA, PUEDES CAMBIARLO POR "LEFT"
padding: 4px 6px;
border: 2px solid #81BEF7; ES EL COLOR DEL BORDE
background: #CEE3F6; ES EL COLOR DEL FONDO
}
ESTA PARTE DEL CODIGO LE DA EL ESTILO AL LINK DE LEER MAS
.jump-link a {
color: #FFFFFF; ESTE ES EL COLOR DE LAS LETRAS "LEER MAS"
text-decoration: none;
font-weight: bold;
}
ESTA PARTE DEL CODIGO LE CAMBIA EL ESTILO AL ESTAR EL MOUSE ENCIMA DEL LEER MAS:
.jump-link:hover {
border: 2px solid #BE81F7; COLOR DEL BORDE AL ESTAR EL MOUSE ENCIMA
background: #E3CEF6; COLOR DEL FONDO AL ETAR EL MOUSE ENCIMA
}
Ahora si quieres editar los colores lo unico que tienes que hacer es cambiar los codigos de los colores, aqui tienes la paleta de colores Hexadecimales
0Comentarios!