Wow!! a pasado mucho tiempo desde mi ultima entrada, lamentablemente mi trabajo y mis estudios me atoran un poco a la hora de escribir aquí. Aunque siempre busco un tiempo para poder desarrollar mi blog.
Bueno, comencemos hablando de esta entrada. En este tutorial veremos como agregarle cada entrada una caja separadora. Muchas plantillas que eh visto de bloggers noto que no tienen un caja separadora de entrada.
Este poseso de separación de entradas se logro tan solo con un poco de CSS. Logrando que cada entrada este separada con un bonito relover, esto consiste una ves que pasa el mouse por una entrada esta cambiara de color.
Comencemos:
- Paso 1: Vamos a Blogger>> Plantilla>> Editar HTML>>
- Paso 2: Buscamos la siguiente linea (Ctrol +F)
►<b:skin></b:skin>
- Paso 3: Dentro de ►<b:skin></b:skin> buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
- Paso 4: Justo por encima de ]]></b:skin> pegamos el siguiente codigo CSS.
.post {
background:#FFFFFF;
border: 2px solid #000000;
padding-right:7px;
padding-left:7px;
}
.post:hover {
border: 2px solid #FF0000;
}
.post:active {
border: 2px solid #0004FF;
}
- Paso 5: Guardamos los cambios realizados
Rojo es el ancho del borde separador
(h) nice template from maskolis
ResponderEliminarComo le puedo hacer para poner ese efecto en los widget se podrá ?
ResponderEliminar@Vico Maters Claro solo tienes que agregar este código justo encima de
ResponderEliminar]]></b:skin>
Código:
.sidebar {
background:#FFFFFF;
border: 2px solid #000000;
padding-right:7px;
padding-left:7px;
}
.sidebar:hover {
border: 2px solid #FF0000;
}
.sidebar:active {
border: 2px solid #0004FF;
}