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