lunes, 23 de julio de 2012

Eliminar el Lightbox de blogger y/o Personalizarlo

Hoy traigo un tutorial en 2 xD se trata de eliminar o desactivar el ligthbox de bloguer o personalizarlo si decides no eliminarlo okis ^^

Primeramente que es lightbox de blogger??
Bueno seguramente has notado que desde ya hace unos meses blogger agrego este tipo de vista cuando haces clic sobre una imagen se muestra con un fondito negro.. a mi en lo personal no me gusta x.x..he aqui la imagen ...


para eliminar esto nos vamos a

Diseno Edicion Html Editar Plantilla

buscamos </head> y pegamos este codigo justo antes de el

<script type='text/javascript'>
//<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmouseover=function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
this.onmouseover = null;
}
}
}
if (window.addEventListener) {
window.addEventListener('load',killLightbox,undefined);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>

Despues solo das clic guardar y listo desaparecera lo negro del ligthbox ^^

Para los que ya usan la nueva interfaz es mas sencillo

Se van a Configuracion
Entradas y Comentarios abriR imagenes en lightbox, elegir la opcion NO

imagen guia



Ahora para las que decidan quedarse con el lightbox y quieran personalizarlo empezemos xD

Asi queda personalizado



incluso puedes algun wallpaper que te guste se vera muy bonito. ^^

okii entonces nos vamos a Edición HTML de la plantilla y antes de ]]></b:skin> pega el siguente codigo:

/* Lightbox de Blogger
----------------------------------------------- */
/* Color de fondo de la pantalla */
.CSS_LIGHTBOX_BG_MASK {
background-color: #E0ECF8 !important;
opacity: 0.9 !important;
filter: alpha(opacity=90) !important;
}

/* Estilos de las imágenes */

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #FFF !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 10px 10px 5px
#000000;
-moz-box-shadow: 10px 10px 5px
#000000;
box-shadow: 10px 10px 5px
#000000;
}

/* Icono para cerrar la ventana modal */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(
URL de la imagen) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Color de fondo de la barra de miniaturas */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #000 !important;}

/* Color del texto de la información de la imagen */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {color: #000 !important;}

/* Color del índice (número de imágenes) */
.CSS_LIGHTBOX_INDEX_INFO {color: #000 !important;}


Rosa: Color del fondo de la pantalla
** Si quieres que tenga una imagen remplaza esa linea por esta **

background-image:url(URL DE TU FONDO O IMAGEN) !important;


Azul: color de la sombra de la imagen

Lila: Ahi debes poner la direccion de una imagen de cerrar ** es opcional ** si no pones imagen solo aparecera la crucecita de cerrar osea esta "X"

Verde: Ahi cambias el color del fondo de la barrita donde se muestran las imagenes en miniatura.

** Si quieres una imagen en vez de color remplaza esa linea por esta **

background-image:url(URL DE LA IMAGEN) !important;}


Credito de la informacion
ciudad blogger


6 comentarios:

  1. Interezante truco... lo intentare luego :D
    y por sierteo un premio mas te espera en mi blog.. cuidate linda besos

    http://mundo-lov.blogspot.com.ar/2012/07/premios.html

    ResponderEliminar
  2. Hola Annyz ♥ Quería preguntarte algo ^^ ¿Como se llama la canción que suena al entrar a tu blog? ... La verdad es que es muy dulce y quede encantada n///n ... Gracias y besos ~

    ResponderEliminar
    Respuestas
    1. se llama dango daikozoku es de un anime llamado clannand

      Eliminar
  3. gran aporte auqnue a mi almenos no me da problema eso de lightbox, pero a mas de uno le debe complicar la existencia igual agradezco el aporte

    ResponderEliminar
  4. Muchas gracias !! Justo me habian dado ganas de ver ese anime despues de ver Toradora ^^ ...

    ResponderEliminar
  5. Annyz :( al tener la versión nueva puse el código en el Css, donde pone avanzado, en la personalización de la platilla, si lo pongo ahi, la barra donde están las imágenes, si me cambia de color, pero el fondo, tanto si pongo color o imagen no se cambia >.< si lo pongo directamente en la plantilla no se cambia nada, espero que me puedas leer, que puedo hacer? muchos besos! :)

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.