Modificar plantillas Dynamic View - Blogger

En este post os voy a poner varias formas de modificar las nuevas plantillas de Blogger llamadas Dynamic View (Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapsnot, Timeslide). La personalización de estas plantillas no es comparable a las anteriores y únicamente* podremos modificarlas usando las opciones del editor de plantillas o modificándolas mediante CSS.

*La pestaña avanzada del Editor de plantillas si deja modificar algo la plantilla, pero sólo colores, tipo de letra, tamaño e imagen de fondo.

El estilo sobre el que se basan las modificaciones es el Flipcard pero se pueden aplicar a otras plantillas con pequeñas variaciones. Para ello partiendo del Escritorio de Blogger: clicamos en Diseño (esto abrirá el editor de plantillas), luego en Avanzado, bajamos hasta la última opción Añadir CSS y pegamos ahí el código que queramos añadir.

También podéis usar "display: none !important;" para ocultar cualquier cosa que no os guste, simplemente cambiando el elemento de la plantilla por otro.

Mover el Título hacia la derecha 150px.

.title {
margin-left: 150px !important;
}

Ocultar la descripción del Header.

.header-bar .title h3 {
display: none !important;
}

Ocultar el botón Send feedback.

.feedback {
display: none !important;
}

Ocultar el menú de vistas dinámicas.

#Classic.ss, #views ul li:first-child ,
#Flipcard.ss, #views ul li:nth-child(2),
#Magazine.ss, #views ul li:nth-child(3),
#Mosaic.ss, #views ul li:nth-child(4),
#Sidebar.ss, #views ul li:nth-child(5),
#Snapsnot.ss, #views ul li:nth-child(6),
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}
#views {
display:none!important;
}

Ocultar el menú de vistas dinámicas y el inferior (Recent,Date,Label, Author).

#controls ul#groups li {
display:none!important;
}
#views {
display:none!important;
}

Ocultar la barra vertical del menú.

#header #pages::before {
border-left: none!important;
}

Aumentar el tamaño de la letra de las etiquetas a 18px.

.group-label a{
font-size: 18px !important;
}

Añadir logo a la izquierda del título (Cambiar la URL  por la de vuestro logo).

.header-bar {
background-image: url("URL del logo") !important;
background-position: left center;
background-repeat: no-repeat;
}

Poner la parte de detras de las diapositvas en negro (Ratón encima).

.items .item .card .back {
background: #000000;
}

- Si queréis ver los códigos aplicados pasaros por este Blog: http://espacio-o.blogspot.com/

Imagen: Richard Cotrina