Mostrando entradas con la etiqueta trucos. Mostrar todas las entradas
Mostrando entradas con la etiqueta trucos. Mostrar todas las entradas

9 mar 2012

Botón "Ir Arriba" con jQuery que aparece y desaparece


En esta ocasión veremos cómo poner el botón de "Ir Arriba" en el blog pero con la particularidad de que se encuentra oculto, sólo aparece cuando se baja la página y desaparece otra vez cuando se regresa a la parte superior del blog. Además, al funcionar con jQuery el desplazamiento de la página se vuelve con un efecto deslizante. Puedes verlo funcionar en este mismo blog en la parte inferior izquierda, al bajar el scrollbar aparecerá el ícono para subir, una vez que subas al hacer click desaparecerá de nuevo.

Para ponerlo en tu blog entra en la Edición HTML y antes de </head> agrega jQuery:



Si ya lo tuvieras omite ese paso.

Ahora antes de ]]></b:skin> agrega los estilos:



Por último, antes de </body> agrega el script:



Guarda los cambios y listo.

En color verde puedes ver dónde se modifica la distancia y el tamaño del botón. En caso de que quieras poner otra imagen distinta, cambia la URL en color azul por la de tu imagen; si haces eso deberás cambiar el ancho y alto del botón donde se indica de acuerdo a las medidas de tu imagen.

El ícono de la flecha estará del lado inferior derecho, si lo quisieras a la izquierda cambia
right: 30px; por left: 30px;
Y si lo quisieras arriba cambia bottom: 30px; por top: 30px;

Recuerda, que si ya tienes jQuery no debes poner el primer código, de lo contrario tendrás problemas de incompatibilidad.

tomado de ciudadblogger.com/

29 oct 2009

Ocultar la barra Navbar de Blogger automaticamente

Si observas en este blog he quitado el Navbar de Blogger de forma permanente pero si quieres conservala podemos hacer que se oculte de manera automática, es decir, el Navbar de Blogger solo aparecerá cuando pasemos el cursor por encima la ubicación del navbar, desapareciendo de manera automática.

Una forma de hacer esto es la siguiente:

1º. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.


. Ahora buscamos el código:

.
.
body {

.
.

3º. Justo arriba de este código, pegamos el siguiente código:

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}


El código para el blogger clásico es:

#b-navbar {
opacity:0.0;
filter:alpha(Opacity=0)
}
#b-navbar:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}


Finalmente guardamos y vemos que el Navbar solo aparecerá cuando pasemos el cursor por encima la ubicación del navbar, desapareciendo de manera automática.

vía: blogandweb.com

13 nov 2008

Insertar un Video de Youtube como Gadget en Blogger


En ocasiones puede ser muy buena la idea de mostrar un video de Youtube como Gadget en nuestro weblog para ello sigue los siguientes pasos:

  1. Ingresa a la opción Elementos de la Página de Diseño de tu blog, clic en la opción de Añadir gadget > elige Html/javascript y pega el código que nos proporciona Youtube de la opción Insertar.
  2. Ahora que tienes el código de Youtube copiado en la ventana del gadget solo tienes que cambiar los valores que por defecto son: ancho= 425 y alto=344 por el ancho y alto del módulo en el que desees insertar el gadget. Para el caso de Lineablogger... ...

Finalmente solo haz clic en Guardar y ver el resultado. Para nuestro blog observa en la parte derecha.

24 dic 2007

Widget que muestra los "Nuevos Comentarios ", para tu blogger

Este widget le mostrará los comentarios recientes sobre tus blogs de Blogger.

Sigue los siguientes pasos:

1. Ingresa al panel de tu blog: Plantilla>> Elementos de la página>> y Añadir un Elemento a la página>> Html / JavaScript..

2. Copie e inserte el código de abajo:



3. Escriba su propia dirección en el campo azul del html como indica abajo:

…src=”http://yourblog.blogspot.com/feeds/comments/default…

4. Añade un título y Guardar.

Puedes cambiar el número de comentarios de 5, que está por defecto en el intervalo de 4-8. Cambiando... ...
… a_rc=5;var m_rc=false;var n_rc=true;var…
En el Html copiado.

Visita: http://www.madtomatoe.com/recent-comments-widget-for-blogger/