27 abril 2014

Como desplazar un widget con la página

deslizar gadget con la página

A veces, creamos entradas con mucho contenido y muy largas generándose un vacío en la sidebar y podría ser interesante mantener visible un widget que quede accesible en todo momento para el usuario.

Para solucionar esto podríamos utilizar un script en el contenedor que queremos tener siempre visible, ya sea un menú, redes sociales, etc...

Instalación

Lo primero será situar el widget al final de la sidebar.
Luego localizamos en la plantilla el "id" o nombre del elemento al que queremos añadir el script.
En nuestra plantilla ->Edición HTML sin expandir los elementos veremos algo como esto:

<b:widget id='HTML4' locked='false' title='' type='HTML'>...</b:widget>
<b:widget id='HTML9' locked='false' title='Anúnciate aquí' type='HTML'>...</b:widget>
<b:widget id='HTML1' locked='false' title='Partidos S.F.C.' type='HTML'>...</b:widget>
<b:widget id='Label1' locked='false' title='¿Que buscas?' type='Label'>..</b:widget>

Lo que está en rojo es la "id" de cada widget, imaginemos que vamos a ponerle el script a nuestras etiquetas "Label1".Una vez entendido la "id" de cada widget, colocaremos antes de </body> el siguiente script:

<script type='text/javascript'>
$(function () {
var offset = $(&quot;#Label1&quot;).offset();
var topPadding = 0;
$(window).scroll(function () {
if ($(window).scrollTop() &gt; offset.top) {
$(&quot;#Label1&quot;).stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
})
} else {
$(&quot;#Label1&quot;).stop().animate({
marginTop: 0
})
}
})
});
</script>

Reemplazaremos el "id" del widget, que en el código es Label1, por el que queremos mostrar. Guardamos cambios y listo.
El widget ahora debería desplazarse con la página.

La demo la podéis observar en mi sidebar.

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

14 comentarios

que tal genio ..me ha llamado la atención ya que la pasar el cursor sobre las cualkier imagen incluso la de los comentarios dan un efecto de giro,,como lo puedo implementar yo en mi blogger ?? gracias genio

Juan para ese efecto debes añadirle al css del hover de las imágenes este pequeño código:
transition:all 0.2s ease-in-out; -moz-transform: rotate(300deg);-webkit-transform: rotate(300deg);transform: rotate(300deg);-moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s;

PERDON X LA INGNORANCIA GENIO PERO NO SE EN DONDE ESTA EL HOVER DE LAS IMAGENES NI COMO PUEDO AÑADIRLE DICHO CODIGO

PERDON X LA INGNORANCIA GENIO PERO NO SE EN DONDE ESTA EL HOVER DE LAS IMAGENES NI COMO PUEDO AÑADIRLE DICHO CODIGO

Juan, realiza una copia de la plantilla y me la mandas por email.
Cuando tenga tiempo te lo miro.

Antonio ? Puedes verme por que no puedo poner mi perfil y lo tengo puesto y no aparece muchas gracias por lo que haces .no logre ver lo que es y me esta llevando tiempo un saludo

ya lo solucione lo había eliminado en la platila . gracias

Juan el efecto rotatorio en las entradas del blog es más complicado porque deberías cambiar el script de los resúmenes automáticos.
En cuanto a los comentarios solo debes añadir este código al css de tu plantilla:
.comments .avatar-image-container :hover {-moz-transform: rotate(300deg);-webkit-transform: rotate(300deg);transform: rotate(300deg);-moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s;}

Gracias genio, en caso de borrar el script de los resúmenes automáticos cual seria el nuevo script ??

Juan sería ya más complicado y tendría que detenerme bastante tiempo en ver la plantilla y acoplarlo, cosa de la cual ahora no dispongo.

Disculpe la ignorancia pero tengo un problema con mi widget desplazable, que nunca se termina sigo y sigo baja apesar que ya termino el post. A que se debe eso?


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"