Personalizar los gadgets de las Vistas Dinámicas de Blogger

imagen del blog oficial Buzz.es

Hay pocas cosas que se puedan personalizar en la plantilla de vistas dinámicas de Blogger, por si que se pueden hacer algunos ajustes. Hoy me voy a centrar en la barra lateral de los gadgets para enseñarte los cambios que se que pueden hacer. Si sabes alguno más, deja tu comentario y así iré ampliando la información del artículo. Las características que vamos a poder modificar son la posición y los colores. Por ejemplo, dentro de la posición podemos mover la barra más abajo, se puede fijar y se puede cambiar de lado para que quede a la izquierda. También podemos hacer que no aparezca la barra de gadgets.

¿Dónde personalizar los gadgets de las vistas dinámicas de Blogger?

Para todo los cambios que te voy a proponer tenemos que usar un poco de CSS, pero no hace falta entrar en la plantilla. Lo que tienes que hacer es ir al editor de plantillas de Blogger, de allí vamos a la sección de Personalizar >> Avanzado >> Añadir CSS. Verás que a la derecha aparece una pantalla blanca, alllí tienes que pegar los códigos que te daré para cada opción. También puedes combinarlos y combinarlos a medida que comprendas mejor el lenguaje CSS.

Selectores de CSS para los gadgets de las Vistad Dinámicas
Los selectores de CSS es como el "nombre" que tiene cada parte del blog. Si sabes como se llama cada zona puedes darle instrucciones, para que cambie alguna de sus características. Si sabeis CSS seguro que con estos selectores podéis hacer más cambios de los que aquí vamos a ver.

Contenedor de los gadgets, incluyendo los desplegables.  .gadget-container
"Muelle" del Gadget, tiene un selector de tipo identidad. #gadget-dock
Iconos de los gadgets: .gadget-icons
Iconos seleccionados: .gadget-selected .gadget-icons
Titulo de los gadgets: .gadget-title, .ss


1. Hacer que desaparezca el gadget.
Si no quieres que se vea el gadget, sólo tienes que añadir el siguiente código. Lo que haces es mover los iconos a la derecha. Están pero no se ven, si en cualquier momento quieres que vuelvan a ser visibles sólo tienes que quitar el código CSS.

#gadget-dock{
right: -50px !important;
}


2. Fijar la barra de los gadgets.
Ya habrás observado que lo habitual es que la barra de gadgets desaparezca tras un instante si no tienes el cursor sobre él. Pero también es posible tener los iconos siempres visibles, sin que se esconda y el código es muy sencillo. En realidad hay dos códigos, el primero es el normal, para todos los que tengan la barra a la derecha.

#gadget-dock{
right: -0px !important;
}

El segundo es para los que tienen la barra de gadgets a la izquierda.

#gadget-dock{
left: 0px !important;
}

3. Desplazar la barra de gadgets.
También podemos desplazar la barra lateral hacia el interior para que no esté pagada al borde. O incluso hacia abajo. La propiedad right es para separarlo del lado derecho, la propiedad top para darle espacio por arriba. El valor de esa distancia la podemos dar en pixeles o en porcentajes.

#gadget-dock{
right: 50px !important;
top: 200px !important;
}

Si las distancias son en porcentajes tiene la ventaja de que se adaptará la distancia cuando se abra el blog en un smartphone o una tableta. Con este método podrías llevar el menú hasta la izquierda con un 93-96% de desplazamiento, pero el problema es que se seguirán abriendo hacia la izquierda y no se  verán.

#gadget-dock{
right: 5% !important;
top: 100px !important;
}

4. Abrir el menú hacia la derecha.

gadget-container:hover, .gadget-item.ss:hover, .gadget-item:hover .gadget-container, .gadget-selected .gadget-container { right: auto !important; }


5. Cambiar el gadget al lado izquierdo, hay varias posibilidades, la más sencilla que tengo sería esta.

#gadget-dock{ right: 93% !important; }
gadget-container:hover, .gadget-item.ss:hover, .gadget-item:hover .gadget-container, .gadget-selected .gadget-container { right: auto !important; }


6. Separar los desplegables de los gadgets.

.gadget-container { left: 50px !important;}

7. Dar color al fondo de los iconos. Se añade el código de abajo y se cambian los códigos #669966 por los colores que deseamos. La primera línea es para el icono antes de ser seleccionado, el segundo es para cambiar el color en cuanto se ponga el cursor encima del icono y el tercero para el color que tendrá cuando el icono ya ha sido seleccionado. Sólo tienes que usar las líneas de código que te interesen.

.gadget-icons {background: #669966 !important;}
.gadget-icons:hover {background: #669966 !important;}
.gadget-selected .gadget-icons {background: #669966 !important;}


8. Cambiar el color del desplegable. Es el color que se mostrará en la barra lateral que se abrirá a derecha o izquierda a modo de menú desplegable. Igual que antes hay que personalizar el código de color.

.gadget-title, .ss {background: #669966 !important;}

Además de todos estos pequeños cambios del CSS, se pueden modificar algunos aspectos de las transiciones gracias a una nueva propiedad CSS3. Pero esto no lo domino, así que queda pendiente de investigación para otro artículo. Espero que lo que he explicado sea claro y os resulte útil para vuestras plantillas de vistas dinámicas de Blogger. Si te ha gustado compártelo en las redes sociales.