Hace ya algún tiempo que Google introdujo en su aplicación de Blogger las vistas dinámicas. Seguro que si tienes algún blog en blogger le habrás dado alguna vez un vistazo. Básicamente se trata de unas plantillas que permiten al usuario administrar la manera de ver el blog.
De todas las vistas dinámicas que hay, sin duda alguna, la más vistosa y útil de todas es la llamada Flipcard. Una plantilla que muestra en pequeños cuadrados el contenido de las entradas y que cuando pones el ratón encima aparece automáticamente la información de esta.
Pero hay una cosa que no gusta a nadie de estas plantillas y concretamente de la plantilla Flipcard y es que no se puede editar el contenido de la plantilla para modificar y mejorar el aspecto de esta... bueno, o no del todo. A continuación os cuento algunas cosillas que se pueden hacer para mejorar el aspecto de la Flipcard y que quede así de chulo:
Bueno, vamos allá. Lo primero es definir la zona de trabajo. Lamentablemente como he dicho antes desde la edición de la plantilla poco podremos hacer en las vistas dinámicas, por lo tanto toca plan 'B'. Lo que haremos en ir al Menú Plantilla > Personalizar > Avanzado > Añadir CSS y aquí podemos hacer lo siguiente:
- Si queremos cargarnos lo de [Recientes][Fecha][Etiqueta][Autor]:
.flipcard #controls{
display: none !important;
}
Una cosa importante que debes recordar siempre es que detrás del último ' } ' has de hacer un 'Intro', si no no funciona.
- Si queremos eliminar todos excepto [Etiqueta] (que es lo más normal) tendríamos que poner este otro código:
#groups li:nth-child(1), #groups li:nth-child(2), #groups li:nth-child(4){
display: none !important;
}
- Si lo que queremos es cambiar el texto de Recientes, Fecha, Etiqueta y/o autor por otro que vosotros queráis deberíais añadir esto:
#controls ul#groups li{
font-size: 0px;
}
#groups>li:nth-of-type(1):after{
content: "Reciente";
font-size: 14px;
}
#groups>li:nth-of-type(2):after{
content: "Fecha";
font-size: 14px;
}
#groups>li:nth-of-type(3):after{
content: "Etiqueta";
font-size: 14px;
}
#groups>li:nth-of-type(4):after{
content: "Autor";
font-size: 14px;
}
Cambiar el texto que está en rojo por lo que queráis.
Y por último,
- Si queréis personalizar la cabecera del blog:
.header-bar {
background-color:#ffffff !important; /* Esto cambia el color de fondo de la cabecera */
background-image:url(URL de la imagen) !important; /* Añadir la imagen de fondo */
background-repeat:no-repeat; /* Por si quieres que la imagen se repita o no (poner sólo repeat) */
height:90px !important; /* Esta es la altura de la cabecera */
border-bottom:25px solid #3b464b; /* Esta es la altura y el color de la cinta negra que hay debajo de la cabecera */
}
Bueno y hasta aquí la entrada de hoy. Sobre todo acordaros de añadir siempre un Intro al final del código.
Compártelo
Hola! Tengo una duda... Tengo el diseño dinámico flipcard y quiero que las previsualizaciones de las entradas en el página principal se vean más alargadas. Para ello, intento buscar el "height" de dicha etiqueta div, pero no la encuentro. ¿Alguna idea? Gracias por su atención.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarA ver si puedes ayudarme.
ResponderEliminarQuiero que las "cards" se adapten al tamaño de la imagen que tiene la entrada. He visto que se puede establecer un tamaño fijo, pero si en la plantilla pongo "auto" pasa olímpicamente y no se adapta al tamaño. ¿Cómo se puede hacer?.
Gracias.
Me encantó tu post, me resolvió mi problema sobre la forma de agrupar (Recientes-Fecha-Etiqueta-Autor).
ResponderEliminarmuchas gracias
Hola, amigo, entre a tu página librosbiblioteca-eat, y quise bajar unos de los manuales de construcción y me fue imposible. Al parecer los enlaces están caídos. Iba a hacer el comentario en esa página pero no encontré donde hacerlo. Si puedes remediarlo te lo agradecería. Gracias
ResponderEliminarhttp://mensaje-visual.blogspot.com/