¿Cómo personalizar la plantilla Vistas Dinámicas en Blogger?

En este post os es enseñaré como modificar la plantilla de Blogger Vistas dinámicas añadiendo códigos CSS.

La plantilla Vistas Dinámica de Blogger es una de las más creativas que tiene, pero nos ofrece muchísimas menos opciones de personalización. Otra opción si no nos gustan la plantillas que tiene Blogger podemos recurrir a descargar una de otras páginas como BTemplates e importarlas a nuestro blog, pero estas también son difíciles de personalizar si no tenemos experiencia.

Si habéis optados por Vistas Dinámicas, os habéis dado cuenta de que hay gadgets que no funcionan (contador de visitas, por ejemplo), no podemos personalizar la barra de entradas en la vista Sidebar, no podemos personalizar el cajón de gadgets, no podemos cambiar el diseño... Lo único que nos permite es cambiar el color del título, de la cabecera...y otras pequeñas cosas.

Una de las cosa que quería modificar pero no me lo permitía es eliminar las vistas ( Classic, Sidebar, Magazine, Snapshot...) Vi varios videoturoriales y llegué a la conclusión de tenía que hacerlo editando la HTML. Estuve varias horas probando pero no me funcionaba así que paré. Días más tarde vi en otro blog que Blogger no dejaba editar el HTML de Vistas Dinámicas, y lo único que podía hacer para personalizar es añadir CSS. Esto está en Plantillas>Personalizar>Avanzado> Añadir CSS.

#1 Eliminar vistas (Classic, Flipcard, Magazine)

Tienes que dejar el código de las que quieres eliminar.

#1 y #2

#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;

}

#2 Cambiar el nombre y el tamaño de las vistas.

     Pondremos el nombre que queramos en sitio de su nombre antiguo, que lo que está en azul en el código de abajo. En caso de que en hayamos eliminado alguna, no pondremos su párrafo (desde el # hasta el }. Lo verde es el tamaño de la fuente.

#views ul li a, #views .menu-heading, .ss{

font-size: 0px !important;

}

#views ul li:nth-child(1) a:after{

font-size: 14px !important;

content: "Classic**";

}

#views ul li:nth-child(2) a:after{

font-size: 14px !important;

content: "Flipcard**";

}

#views ul li:nth-child(3) a:after{

font-size: 14px !important;

content: "Magazine**";

}

#views ul li:nth-child(4) a:after{

font-size: 14px !important;

content: "Mosaic**";

}

#views ul li:nth-child(5) a:after{

font-size: 14px !important;

content: "Sidebar**";

}

#views ul li:nth-child(6) a:after{

font-size: 14px !important;

content: "Snapshot**";

}

#views ul li:nth-child(7) a:after{

font-size: 14px !important;

content: "Timeslide**";

}

.menu-heading:after{

font-size: 14px !important;

content: "Views**";

}




Antes

#3 Ampliar el ancho de la barra de Sidebar.

.sidebar #sidebar{

width: 250px !important;

}

.sidebar #content{

margin-left: 250px;

}




Después






















#4 Añadir una barra de desplazamiento (Scrool bar) en la Sidebar.

Puedes escoger tu tamaño también: 12px, 20 px...

.sidebar #sidebar, .ss{

margin-top: 12px !important;

overflow-y: scroll !important;

}




Puedes consultar otros muchos códigos en la siguiente página web: Southern Speakers v3.0