Ver entrada completa. Blogger LightBox: Se sobreponen las imágenes - Solución

Eso se debe a que tenemos distintos elemento con una capa superior a la capa que lleva la ventana modal tipo LighBox de Blogger.

Lo solucionamos cambiándole el valor a la propiedad z-index de los distintos elementos que se superponen a la capa de la ventana modal tipo LighBox de Blogger.

O podemos agregarle un valor superior a la capa de la ventana modal tipo LighBox de Blogger.

Para hacer eso solo hay que agregar un código al CSS de nuestra plantilla.

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML.

Buscar ]]></b:skin> y justo arriba pegar el siguiente código:

.CSS_LIGHTBOX{z-index:9999999999!important;}

Ir viendo con vista previa antes de guardar.

Tal ves sea necesario agrandar el valor 9999999999.

Leer sobre la propiedad z-index

Ver entrada completa. Blogger LightBox: Ya esta disponible y con opción deshabilitar

 Después de quitarlo por sugerencia de algunos usuarios en el foro de ayuda de Blogger.

Ayer en buzz.blogger.com avisan que esta disponible nuevamente con la opción de habilitar o deshabilitar.

También dicen que han mejorado algunos errores.

Si sos uno de esos usuarios que les gusta el nuevo LightBox de Blogger, no hay que hacer nada para habilitarlo ya que la opción está por defecto.

Pero si por alguna razón quieres deshabilitar lo puedes hacer de la siguiente forma:

Si utilizas la nueva interfaz:

Ir a Configuración, Entradas y comentarios, y cambian en Open images in Lightbox el Si por No.

Guardan la configuración.

Si utilizas la vieja interfaz:

Ir a Configuración, Formato, y cambian en Open images in Lightbox el Si por No.

Guardan la configuración.

Y listo, ya no tienen mas el nuevo LightBox de Blogger. ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Seguidores Blogger, Twitter y Facebook flotando a la derecha

Hace un tiempo Ciudad Blogger publicaba una entrada de cómo se hace El Fanbox de Facebook, flotante y con efecto deslizante.

Me gusto mucho la forma que se mostraba flotando, pero lo que no me gusto es que para darle el efecto hay que utilizar una librería, la cual enlentece la carga en un blog (mientras no la utilizamos para otra cosa), y en lo personal el efecto no es algo que me llame mucho la atención.

Ahí se me ocurrió que se podía hacer de otra forma; sin utilizar la librería, solo con hover, al igual que lo hacemos para cambiar una imagen al pasar el cursor por encima. Peroooo, como el contenedor mostrado es un iframe con script no funciona bien en Internet Explorer (este navegador siempre complicando las cosas), entonces decidí sustituir el hover con eventos javascript.

Y ya que estábamos; pensé (a veces lo hago), y por que no utilizar esto no solo para mostrar el Fanbox de Facebook.

Lo primero que hice fue crear las imágenes que las pueden descargar desde acá:

Y el resultado final fue el siguiente:

Vamos a mostrar los Seguidores de Blogger, Comentarios de Twitter y el Fanbox de facebook.

Se muestra solo una pestaña fija a la derecha, y al pasar el cursor se abre mostrando el gadget.

¿Cómo se hace...?

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Sustituir blink con JavaScript

 La etiqueta blink, es utilizada en ocasiones para mostrar un texto parpadeando.

También se puede utilizar el valor blink de la propiedad text-decoration, que podemos asignar a un texto por medio de un estilo CSS.


El problema con utilizar la etiqueta o valor blink es que no funciona con Internet Explorer.

Les voy a mostrar 3 formas que podemos sustituir blink con JavaScript.

Forma 1:

Ir a Diseño, Elementos de la página (vieja interfaz) y añadir un gadget HTML/Javascript.

Poner el siguiente código:

<div id='blink' style="text-align:center;">

<a href="http://vitua.blogspot.com/" target="_blank"><span style="color: red;font-size:18px;">Visite:</span> <span style="color: blue;font-size:24px;">VituaRadio</span></a>

</div>

<script language="JavaScript">
function blink_uno() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_dos()',1000);
}
function blink_dos() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_uno()',1000);
}
blink_uno();
</script>

Lo que pongas dentro del div con la ID blink va a parpadear.

Puede ser texto, imagen, etc...

Yo en el ejemplo puse un enlace centrado con distinto tamaño y color en el texto.

La velocidad se regula cambiando 1000, cuando mayor sea el numero mas lento será.
(1000 = 1 Segundo.)

Ejemplo:

Visite: VituaRadio

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. PicMarkr: Marcas de agua en imágenes online

PicMarkr le permite añadir marca de agua personalizada (imagen o texto) a sus imágenes en línea y gratis.

Es útil cuando se necesita para proteger sus derechos de autor o si desea agregar comentarios a sus fotos.

Muy fácil, solo en 3 pasos.

1- Subimos la foto.

2- Personalizamos el tipo de marca de agua.

3- Descargamos o compartimos la foto.

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Botones de Sigueme en Twitter en español

¿Cómo funcionan los botones de Twitter?
Incorporar un botón de Twitter en tu web es muy sencillo. Simplemente pon el nombre de tu cuenta de Twitter a continuación y podrás copiar y pegar el código de cualquier botón en tu web, blog, firma de foro, etc.. Así cuando pulsen en el, irán directamente a tu cuenta de Twitter y podrán convertirse en tus followers! Eso es todo, ¡felices Twitteos!

http://botones.gigatwitter.com/

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Menú sencillo con imágenes y texto

Ir a Diseño, Elementos de la página (vieja interfaz) y añadir un gadget HTML/Javascript.

Poner los siguientes códigos:

Estilos del menú:

<style>
#menu_Vicente {
margin-left: 70px;     /* MARGEN DESDE LA IZQUIERDA */
position:relative;
z-index:1000 }

#menu_Vicente .menu_Vicente_inner {
position:relative;
border:1px dotted #112233;       /* BORDE DEL MENÚ */
/* IMAGEN DE FONDO DEL MENÚ - SE PUEDE CAMBIAR POR UN COLOR  */
background:url(http://2.bp.blogspot.com/-x4EIXtS9gss/Tooabn4UylI/AAAAAAAAAMk/cfiL7OPI3iA/s1600/navigator.png);
float: left;
height: 80px;
overflow: hidden;
padding: 0 10px; }

#menu_Vicente ul {
position:relative;
height:80px;
overflow:hidden;
margin: 0 20px 0 0;
padding: 0 0 0 20px; }

#menu_Vicente li {
float: left;
border:0;
list-style: none!important;
margin: 0;
padding-top: 12px; }

#menu_Vicente li a {
color: #fff;       /* COLOR DEL TEXTO */
cursor: pointer;
display: block;
font-size: 11px;
height: 40px;
padding-top: 35px;
text-align: center;
text-decoration: none;
width: 65px; }

#menu_Vicente li a:hover {
color: #6699FF; }      /* COLOR DEL TEXTO AL APOYAR EL CURSOR */

#menu_Vicente li a.selected {
color: #6699FF; }      /* COLOR DEL TEXTO INICIO */

                       /* ACÁ CAMBIAMOS LAS IMÁGENES DEL MENÚ */
#menu_Vicente li.home a { background:url(http://3.bp.blogspot.com/-L9fg3xfnaXg/TooaaYGV6RI/AAAAAAAAAMY/VGK0tvU1E78/s1600/home.png) no-repeat top center; }
#menu_Vicente li.Oferta a { background:url(http://3.bp.blogspot.com/-x0GOUXsBfmc/TooabPgqeII/AAAAAAAAAMg/OBpnq2zd73s/s1600/map.png) no-repeat top center; }
#menu_Vicente li.Servicios a { background:url(http://3.bp.blogspot.com/-8dt4ZGCjC0U/Tooaas4MNgI/AAAAAAAAAMc/0UaJL9klYlA/s1600/image.png) no-repeat top center; }
#menu_Vicente li.Noticias a { background:url(http://4.bp.blogspot.com/-_cGS6tXL0zQ/Tooab_7y6mI/AAAAAAAAAMo/NR5IGxCAGJw/s1600/people.png) no-repeat top center; }
#menu_Vicente li.Informes a { background:url(http://2.bp.blogspot.com/-pUCtMTEb3Xs/TooaZ8-kphI/AAAAAAAAAMU/jhhbeijtBWo/s1600/help.png) no-repeat top center; }
#menu_Vicente li.contact a { background:url(http://3.bp.blogspot.com/-jnNEloDgqr0/TooaZg9tbzI/AAAAAAAAAMQ/0a8hGgzObAg/s1600/email.png) no-repeat top center; }
</style>

Enlaces del menú:

<div id="menu_Vicente">
<div class="menu_Vicente_inner">
<ul>
<li class="home">
<a class="selected" href="#">Inicio</a>
</li>
<li class="Oferta">
<a href="#">Ofertas</a>
</li>
<li class="Servicios">
<a href="#">Servicios</a>
</li>
<li class="Noticias">
<a href="#">Noticias</a>
</li>
<li class="Informes">
<a href="#">Informes</a>
</li>
<li class="contact">
<a href="#">Contacto</a>
</li>
</ul>
</div>
</div>

Cambiamos # por los enlaces de las páginas y el texto a mostrar.

Ejemplo:

<a href="http://loseasi.blogspot.com/p/contacto.html">Contacto</a>

Si queremos que la página abra en otra pestaña le agregamos target="_blank":

<a href="http://...../contacto.html" target="_blank">Contacto</a>

Mover el gadget a un lugar apropiado; por ejemplo arriba de las entradas.

• Inicio
• Ofertas
• Servicios
• Noticias
• Informes
• Contacto

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Botones sociales de Taringa!

Taringa! es una comunidad virtual donde puedes compartir todo lo que se te ocurra y en el cual puedes obtener mucha información, programas etc...

Me parece una buena opción para que tu blog sea visto por miles de usuarios que entran diariamente.

Comparte más información y agrega los botones sociales de Taringa! a su sitio Web.

Ahora tus visitantes pueden recomendar tu sitio en Taringa! de manera muy fácil.
Solo tienes agregar el botón social de Taringa! en tu web para que los usuarios de Taringa! puedan recomendar a sus seguidores tu mejor contenido.

Sigue los pasos a seguir para comenzar:

http://www.taringa.net/widgets/compartir ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Me fui a pescar y miren lo que me pasaba

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Nuevas opciones en vistas dinámicas

Anteriormente vimos el anuncio de las: Vistas dinámicas de tu blog

Magazine:                                                     Classic:

  Clic en las imágenes para ver los ejemplos.

Puedes elegir uno de los diseños y cambiar la plantilla desde el "Diseñador de Plantillas"

Ir a Plantillas, Dynamic Views y elegir uno de los 7 diseños.

Tener en cuenta:

• En navegadores antiguos no va a funcionar, ej: Internet Explorer 7 e inferiores.
• No vas a poder editar el diseño ni agregar gadget.

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »