Código CSS y JS para sidebar flotante en Blogger

anferro

1

Ómicron

SEO

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

Suscripción a IA

• 12 May 2014

• #1

Hola betas la verdad ya me canse de buscar tutoriales para poner un widget o el sidebar flotante

La verdad no lo he conseguido alguien conoce un codigo con un poco de css y javascript que pueda servir para estos casos muchas gracias

 

sanmen1593

Lambda

SEO

Verificación en dos pasos activada

Verificado por Whatsapp

• 12 May 2014

• #2

¿Utilizando alguna plantilla? ¿O estás creando una propia?

 

kanikase

Préstamo

Ómicron

Programador

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

• 12 May 2014

• #3

HTML:

<script>
//<![CDATA[
$(function() {
var $flotargadget = $("#ID-DEL-GADGET-A-FLOTAR"),
$window = $(window),
offset = $flotarbotones.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotargadget.css({'position' : 'fixed', 'width' : '640px', 'top' : '0px'});
} else {
$flotargadget.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>
<style>
#ID-DEL-GADGET {
background:#333; /* Color de fondo del gadget */
z-index:2;
width:300px; /* Ancho del gadget */
}
</style>

Eso si lo que quieres es que flote al hacer scroll :distant:

 

E

Edwin Antonio Tapia Rebolledo

Épsilon

Programador

• 12 May 2014

• #4

Me se un código pero no tiene el tope, es decir pasa por arriba del footer y todo eso.
Te dejo en donde lo vi, quizás ahí puedan decir, si viene me avisas.

Cómo hacer que el gadget de Páginas se haga flotante al bajar el scroll | Ciudad Blogger - Trucos y tutoriales para tu blog

 

anferro

1

Ómicron

SEO

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

Suscripción a IA

• 13 May 2014

• #5

en la #ID-DEL-GADGET-A-FLOTAR seria reemplazar por HTML1

 

E

enghels

Delta

Diseñador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 30 Abr 2015

• #6

Aquí explico como hacerlo
Como fijar o hacer flotar un widget en blogger - Enghels | El blog sin limites

Yo mismo lo probe :encouragement:

 

kanikase

Préstamo

Ómicron

Programador

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

• 1 May 2015

• #7

enghels dijo:

Aquí explico como hacerlo
Como fijar o hacer flotar un widget en blogger - Enghels | El blog sin limites

Yo mismo lo probe :encouragement:

Hacer clic para expandir...

Comentas en uun post de hace casi un año XD

 

J

JesusEC

Préstamo

Iota

Redactor

• 2 May 2015

• #8

enghels dijo:

Aquí explico como hacerlo
Como fijar o hacer flotar un widget en blogger - Enghels | El blog sin limites

Yo mismo lo probe :encouragement:

Hacer clic para expandir...

Wow, si que estas buscando tráfico. Esos post, ya estaban muy olvidados jejeje

 

E

enghels

Delta

Diseñador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 27 Nov 2015

• #9

kanikase dijo:

HTML:

<script>
//<=!=[=C=D=A=T=A=[
$(function() {
var $flotargadget = $("#ID-DEL-GADGET-A-FLOTAR"),
$window = $(window),
offset = $flotarbotones.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotargadget.css({'position' : 'fixed', 'width' : '640px', 'top' : '0px'});
} else {
$flotargadget.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]=]=>
</script>
<style>
#ID-DEL-GADGET {
background:#333; /* Color de fondo del gadget */
z-index:2;
width:300px; /* Ancho del gadget */
}
</style>

Eso si lo que quieres es que flote al hacer scroll :distant:

Hacer clic para expandir...

En que parte se pone ese codigo?