.

3 de febrero de 2014

Personalizar los gadgets de las Vistas Dinámicas de Blogger

Escrito por
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.

4 comentarios:

  1. Muy Util tu información... gacias

    ResponderEliminar
  2. Muy bueno el post ¿Sería posible que uno de los gadget, por ejemplo el de etiquetas, estuviese abierto cuando se carga la página?

    ResponderEliminar
    Respuestas
    1. Hola Manuel, no se hacer lo que me preguntas. Me imagino que se podría conseguir que esté abierto al empezar (o siempre abierto) con un algún tipo de código javascript, un lenguaje que no conozco bien. Si encuentras a alguien que sepa hacerlo, dejanos un enlace. Un saludol

      Eliminar
  3. Hola Joan!
    Tu post me ha servido muchísimo, porque lo cierto es que no me gustaba para nada que los recuadros de los gadget se vieran oscuros, más cuando mi blog es de color pastel.
    El tema es que tengo un "inconveniente". Entre los gadget hay una línea negra que los separa, algo sí como el caracter pipe "|" que se usa como divisor entre la opciones de VD y la página de "pagina principal o inicio" cuando aplicas páginas estáticas, pero en este caso está en forma horizontal.
    No sé si me estoy explicando muy bien.
    Pero ahora que le apliqué color a los recuadros de gadget estas lineas se ven en negro. Te dejo una imagen para que puedas verlo mejor. http://goo.gl/vTl0MT
    (está alojada den blogger y acortada con google).
    Ojalá puedas darme una mano, de no poder no importa.
    Gracias nuevamente por este post!
    Saludos.

    ResponderEliminar

Bienvenido, en este blog encontrarás información para crear y personalizar tu blog de Blogger o Wordpress, además de artículos sobre Internet, las nuevas tecnologías, programación con HTML y CSS, educación y otros temas. Espero que los tutoriales, artículos y recursos del blog te resulten útiles. Si quieres mantener el contacto puedes hacerlo a través de mis cuentas de Twitter o Google Plus.