16 de mayo de 2016

Tutoriales: Coloca un gadget flotante


Les hablare de un tutorial muy divertido.. se trata de hacer que cualquier Gadget de nuestro blog sea flotante, en cualquiera de los laterales de nuestro blog. 

Esto lo aprendí de gracias a thecircus-x, aunque le he echo un par de cambios para que no solo este en la parte superior del blog, si no tambien en otros lados.
Primero que nada en nuestra plantilla debemos de buscamos el gadget que queremos que sea el flotante
  • Plantilla >> Edición HTML >> Ir al Widget
Eliges el Widget que quieres que sea flotante y el te llevara a su posicionamiento en el blog, una vez ahí copias el ID del Widget en una nota de blog. 
En la imagen pueden apreciar un ejemplo, lo que esta enmarcada en rojo es un ID. Solo debes de copiar lo que esta entre comillas
Una vez que ya tenemos el "ID"  nuevamente en nuestra plantilla  buscamos (Ctrl + F)
]]></b:skin>
Arriba de ella colocaremos el códigos para el efecto:

  • En la Derecha:

#IDDETUGADGET:hover {right: 0px;opacity: 1;-webkit-transition: all .5s;}
#IDDETUGADGET {
background: #fff; /* FONDO */
border-left: 30px solid #F781BE; /* COLOR DEL BORDE */
padding: 15px;
position: fixed;
top: 100px;
right: -220px;
width: 200px;
padding: 7px;
opacity: 0.90;
-webkit-transition: all .5s
}

  • En la izquierda:

#IDDETUGADGET:hover {left: 0px;opacity: 1;-webkit-transition: all .5s;}
#IDDETUGADGET {
background: #fff; /* FONDO */
border-right: 30px solid #8000FF; /* BORDE DERECHO */
padding: 15px;
position: fixed;
top: 100px;
Left: -220px;
width: 200px;
padding: 7px;
opacity: 0.90;
-webkit-transition: all .5s
}
  1. IDDETUGADGET: Ahí pegaras el ID de tu Gadget/Widget que guardaste en el blog de notas. 
  2. F781BE / 8000FF: Color de la barra que sobresale. | Colores HTML
  3. 100: Espacio entre la parte superior de tu blog. Con 300 estará casi en la mitad y con 600 en la parte inferior. 
Y listo, guardas todo y ya tienes tu gadget flotante.
Como pueden apreciar a muy fácil, yo generalmente lo utilizo para el formulario de contacto. Le da un aspecto más organizado y decorativo a los laterales.

No hay comentarios:

Publicar un comentario