Como personalizar o Lightbox de imagem no Blogger

 Recentemente, mostramos como desativar o Lightbox de imagem , mas não falamos sobre uma maneira de personalizar o Lightbox de imagem no blogger. Como o blogger é uma plataforma flexível , podemos substituir a folha de estilo Lightbox existente para personalizá-la e torná-la semelhante ao seu site. Isso lhe dá liberdade suficiente para alterar o estilo do Lightbox de acordo com suas necessidades desejadas. Neste artigo, mostraremos como personalizar o Image Lightbox no Blogger.

Antes de começarmos a trabalhar com nosso tutorial, reunimos duas capturas de tela abaixo demonstrando como seu Lightbox apareceria antes e depois de aplicar a personalização. Certamente ficaria mais elegante e polido.

A primeira coisa que você precisa fazer é fazer login na sua Conta do Google e ir para Blogger ›› Modelo ›› Editar HTM L. Agora, dentro da codificação do modelo, procure a tag ]]></b:skin> e logo acima dela cole a seguinte parte da codificação da folha de estilo. (Observação: no CSS a seguir, adicionamos comentários para ajudá-lo a identificar como você pode personalizar diferentes aspectos do seu Lightbox, como cor do texto, cor do plano de fundo, botão Fechar e etc).

/* MBL Blogger Lightbox

———————————————– */

/* Background Color */

.CSS_LIGHTBOX_BG_MASK {

background-color: #ffffff !important;

background-image: url(image-url-address) !important;

opacity: 0.8 !important;

filter: alpha(opacity=90) !important;

}

/* Images Border */

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {

outline: 0px solid #fff !important;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 0px 0px 5px #000000;

-moz-box-shadow: 0px 0px 5px #000000;

box-shadow: 0px 0px 5px #000000;

}

/* Close Button */

.CSS_LIGHTBOX_BTN_CLOSE {

background: url(image-url-address) no-repeat !important;

width: 24px !important;

height: 24px !important;

}

/* Thumbnails Bar Color */

.CSS_LIGHTBOX_FILMSTRIP {

background-color: #eaeaea !important;

border-top:1px solid #d2d2d2!important;

}

/* Text Color */

.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {

color: #000 !important;

}

/* Index Info (number of images) */

.CSS_LIGHTBOX_INDEX_INFO {

color: #555555 !important;

}

Parabéns: Salve o modelo pressionando o botão laranja “Salvar modelo” localizado na parte superior da tela. Agora você personalizou com sucesso sua imagem Lightbox com apenas uma técnica CSS simples.

Esperamos que este tutorial possa ter ajudado você a aprender como personalizar uma caixa de luz de imagem no blogger. Conta pra gente se você já está usando essa técnica? No MyBloggerLab, desabilitamos o Lightbox porque ele interfere enquanto uma pessoa está lendo um tutorial longo. No entanto, quem tem papéis de parede ou sites de portfólio pode usá-lo livremente. Se você gostou deste artigo, compartilhe-o com seus amigos no Facebook, Twitter.