Hola como estáis? Está tarde vuelvo a mi blog!! Por fin después de estar unas semanas ausentes ya vuelvo y con mucha fuerza, hoy os voy a enseñar a como personalizar el gadget de archivo y que no se vea tan simple. Estoy muy contenta de la acogida que ha tenido este blog, para mi es algo fantástico nunca pensé que tuviera, tanta acogida. Hoy vamos a personalizar el gadget del blog siempre ha sido el básico gadget que siempre he querido diseñar pero que nunca he podido, pues toqueteando he descubierto una forma de hacerlo, y muy sencillo, ya sabéis como personalizar, el blog enmarcando los gadgets los comentarios, y como quitar el publicado por'' como sabéis siempre lo hago muy sencillo para que así no os tengáis que complicar mucho la vida, así que vamos a por el tutorial, recordar esta tarde vuelvo a mi blog de Creaciones tentativas, con una entrada que os encantará, os espero allí no faltéis!
Vamos a diseñar los archivos de estás 4 formas yo ya lo he echo en un blog que luego os enseñaré y a quedado chulisimo. Pero cada uno le puede cambiar el color y la anchura, donde quiere que vaya centrado, etc,
Para obtener el resultado así marcáis Jerarquía que lo encontrareis en el gadget de archivo, vamos al siguiente paso. El azul es el más complicado los demás son mas sencillos.
Una vez ya le hayáis marcado, en Jerarquía vamos a personalizarlo con el color que más te guste y que encaje para tu blog, cada uno es libre de hacerlo como quiere recordar que quedan tres maneras más de como personalizarlo así que si no te gusta la primera pasas a la segunda, a la tercera o a la cuarta.
Codigo para añadir en CSS:
/* Estilos del Archivo jerarquía */
#BlogArchive1 {
display: block;
width: 300px;
margin: 10px 0;
padding: 0;
border: 1px solid #cccccc; /*el borde*/
background-color: #DCFCFC;/*el color de la caja o contenedor*/
}
#BlogArchive1 h2 {
padding:12px;
margin: 0;
border: 1px solid #ffffff; /*borde del título*/
font-size: 15px;
color: #2A1B0A;
background: none;
text-shadow: 1px 1px 1px #ffffff;
background-color: #ADEEEE;
}
#BlogArchive1 ul.hierarchy {
line-height: 1.0em; /*para controlar la separación entre lineas*/
}
#BlogArchive1 {
display: block;
width: 300px;
margin: 10px 0;
padding: 0;
border: 1px solid #cccccc; /*el borde*/
background-color: #DCFCFC;/*el color de la caja o contenedor*/
}
#BlogArchive1 h2 {
padding:12px;
margin: 0;
border: 1px solid #ffffff; /*borde del título*/
font-size: 15px;
color: #2A1B0A;
background: none;
text-shadow: 1px 1px 1px #ffffff;
background-color: #ADEEEE;
}
#BlogArchive1 ul.hierarchy {
line-height: 1.0em; /*para controlar la separación entre lineas*/
}
COSAS QUE SE PUEDEN CAMBIAR?
Que es lo que está en color naranja: Lo que está en color naranja podéis cambiarlo, el widht es como lo queréis de grande, podéis ajustarlo a vuestro gusto. El margin, es el margen , pero si queréis que no cambie con solo ponerlo en CSS se os quedará como está en la fotografía.
AZUL OSCURO:
El color del borde que queráis, recordad que podéis cambiar el solid, por el dashed o el 1 px por la anchura que os guste más.
LILA OSCURO:
El color de la caja, o contenedor como le queráis llamar.
VERDE:
El color del borde del titulo.
LILA CLARO:
El tamaño de la fuente, eso es fácil de cambiarlo con su respectivo color.
ROSA FUCSIA:
ya vamos a tocar dentro de la caja, así que lo de text shadow es la sombra del texto, la podéis personalizar a vuestro gusto!
/* Estilos para el widget del Archivo, estilo lista */
#BlogArchive1 {
margin: 14px 0;
padding: 0;
border: 1px solid #cccccc; /*borde de la caja*/
}
#BlogArchive1 h2 {
padding: 14px 0 9px 7px; /*padding para ampliar el espacio del titulo*/
margin: 0;
border: 1px solid #ffffff; /*el borde del título*/
font-size: 17px; /*El tamaño de la fuente del t tulo*/
color: #2A1B0A; /*color de la fuente del título*/
background-color: #D29AD2; /*color de fondo del título*/
text-shadow: 1px 1px 1px #ffffff; /*sombra en el texto*/
}
#BlogArchive1_ArchiveList ul.flat li {
display: block; /*creamos el bloque*/
width:276px; /*el ancho del bloque, tendrás que ajustarlo*/
font-size: 16px; /*el tamaño de la fuente*/
color: #2A1B0A; /*el color de la fuente*/
padding: 10px !important;/* para ampliar el bloque*/
margin:0;
text-decoration: none;
text-align: left; /*alineamos el texto a la izq. si quieres centralo pon: center*/
background-color: #ECC1EB; /*el color de fondo*/
transition: all 1.0s linear; /*las transiciones para cada navegador*/
-o-transition: all 1.0s linear;
-moz-transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
border-bottom: 1px solid #ffffff; /*borde abajo para cerrar la caja*/
border-left: 1px solid #ffffff; /*borde blanco a la izq.*/
border-right: 1px solid #ffffff; /*borde blanco a la derecha*/
}
#BlogArchive1_ArchiveList ul.flat li a {
text-decoration: none;
color: #2A1B0A;
}
#BlogArchive1_ArchiveList ul.flat li:hover {
background-color: #EE7DCC; /*el color del fondo para el efecto hover*/}
Estilo: Minimalista
/* Estilos para el widget del Archivo, estilo lista */
#BlogArchive1 {
margin: 14px 0;
padding:0;
/*border-left: 8px solid #293034; */
background: none;/*el color de la caja o contenedor*/
}
#BlogArchive1 h2 {
padding: 5px 6px; /*padding para ampliar el espacio del titulo*/
margin: 0;
text-align: right;
border-bottom: 3px solid #293034;
border-right: 7px solid #293034;
font-size: 16px; /*El tamaño de la fuente del titulo*/
color: #2A1B0A; /*color de la fuente*/
text-shadow: 1px 1px 1px #ffffff; /*sombra en el texto*/
}
#BlogArchive1_ArchiveList ul.flat li {
display: block; /*creamos el bloque*/
width:272px; /*el ancho del bloque, tendrás que ajustarlo*/
font-size: 15px; /*el tamaño de la fuente o letra*/
color: #2A1B0A; /*el color de la fuente*/
padding: 10px !important;/* para ampliar el bloque*/
margin: 0;
text-decoration: none;
text-align: left; /*alineamos el texto a la izq. si quieres centralo pon: center*/
background: none; /*el color de fondo*/
transition: all 1.0s linear; /*las transiciones para cada navegador*/
-o-transition: all 1.0s linear;
-moz-transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
border-bottom: 1px dashed #293034; /*borde abajo*/
border-left: 8px solid #293034; /*borde-izq.*/
}
#BlogArchive1_ArchiveList ul.flat li a{
text-decoration: none;
color: #2A1B0A;
}
#BlogArchive1_ArchiveList ul.flat li:hover {
background-color:#ef11fd; /*el color de fondo efecto hover*/
}
Estilo: Minimalista II
/* Estilos para el Archivo, estilo lista */
#BlogArchive1 {
margin: 14px 0;
padding:0;
}
#BlogArchive1 h2 {
padding: 5px 8px; /*padding para ampliar el espacio del titulo*/
margin: 0;
text-align: left;
border-bottom: 3px solid #293034;
border-left: 8px solid #293034;
font-size: 15px; /*El tamaño de la fuente del titulo*/
color: #2A1B0A; /*color de la fuente*/
text-shadow: 1px 1px 1px #ffffff; /*sombra en el texto*/
}
#BlogArchive1_ArchiveList ul.flat li {
display: block; /*creamos el bloque*/
width:272px; /*el ancho del bloque, tendrás que ajustarlo*/
font-size: 19px; /*el tamaño de la fuente o letra*/
color: #2A1B0A; /*el color de la fuente*/
padding: 10px !important;/* para ampliar el bloque*/
margin:0;
text-decoration: none;
text-align: left; /*alineamos el texto a la izq. si quieres centrarlo pon: center*/
background: none; /*el color de fondo*/
transition: all 1.0s linear; /*las transiciones para cada navegador*/
-o-transition: all 1.0s linear;
-moz-transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
border-bottom: 1px solid #293034; /*borde abajo*/
border-right: 8px solid #293034; /*borde-izq.*/
}
#BlogArchive1_ArchiveList ul.flat li a{
text-decoration: none;
color: #2A1B0A;
}
#BlogArchive1_ArchiveList ul.flat li:hover {
background-color:#e41b00; /*color de fondo efecto hover*/
}
Estilo: Pixelado
/* Estilos del Archivo estilo lista */
#BlogArchive1 {
margin: 14px 0;
padding:0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7VTPj2BXvYxgjYGQjhQTTSrJfC_LPPDCuvgx8AlrZBQe_uecGlASewPV3MVmiAvHaPRIkdW4zwi3Y_JdowAsn7KddyO9ggLSneoni3u8IO5zPP-0JBPYk6UvvGq88UCxYsnve9GGtGhWB/s400/h2-pixelado.png) repeat-x top left;
}
#BlogArchive1 h2 {
padding: 0 4px; /*padding para ampliar el espacio del titulo*/
margin: 0;
display: block;
width: 90px;
position: relative;
top:0;
left: 97px; /*para centrarlo, tendrás que ajustarlo*/
background:#ffffff; /*el color del fondo, tienes que poner el color de fondo de donde lo tengas colocado, para igualarlo*/
text-align: center;
line-height: .95em;
font-size: 17px; /*El tamaño de la fuente del titulo*/
color: #2A1B0A; /*color de la fuente*/
text-shadow: 1px 1px 1px #ffffff; /*sombra en el texto*/
}
#BlogArchive1_ArchiveList ul.flat li {
display: block; /*creamos el bloque*/
width:285px; /*el ancho del bloque, tendrás que ajustarlo*/
font-size: 19px; /*el tamaño de la fuente*/
color: #2A1B0A; /*el color de la fuente*/
padding: 7px !important;/* para ampliar el bloque*/
margin:0;
text-decoration: none;
text-align: left; /*alineamos el texto a la izq. si quieres centralo pon: center*/
background: none; /*el color de fondo*/
border-bottom: 1px dotted #293034; /*borde abajo*/
}
#BlogArchive1_ArchiveList ul.flat li a{
text-decoration: none;
color: #2A1B0A;
}
#BlogArchive1_ArchiveList ul.flat li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI4q-Qkh0Eae18oXiDJse-jYztqSIQbUvwAYlBqonq2brphFA_cc-U_RLN5VrZM7-J2znmaDG1n6htrActD_HiT5CggtOURGmC6bQo2Nd43TMT7cWRK4vLSMkOkQP9qGufeBchH7JT1iUg/s400/h2-pixel.png) repeat;
}
Paso 2: Desde tu escritorio, ve a Diseño ► Diseñador de plantillas ►Avanzado ► Añadir CSS...
Paso 3: Agrega ahí, en el campo, el código del estilo que te gusto, has los ajustes necesarios en el ancho de los bloques, es decir, donde dice, por ejemplo (varia según el estilo)...
width:285px; /*el ancho del bloque, tendrás que ajustarlo*/
...para que cuadre perfectamente, si quieres, cambia los colores de los fondos bordes, etc.
Paso 4: Guarda los cambios en APLICAR AL BLOG.
Hasta pronto,
Un beso.
¡Hola, María! ^^
ResponderEliminar¡Qué chulo te ha quedado el nuevo diseño! :D No lo había visto aún ^.^
Me alegro muchísimo de que el blog haya tenido buena acogida. Es simplemente maravilloso que publiques tutoriales para ayudar a personas que, como yo, no tienen ni idea de cómo personalizar el blog :D
Como siempre: todo súper bien explicado :DD ¡Muchísimas gracias! :D
¡Un besazo muy grande y que pases un buenísimo fin de semana! :)