Ola leitor, esta e uma postagem onde voce tem a liberdade de dar uma sugestao de postagem para o cblogger. Como voce ja deve ter percebido, deixamos de atualizar o blog diariamente, e para que isto nao continue acontecendo, pedimos que voce deixe um sugestao para postagem via comentario. Se preferir, indique sites de widgets e outras ferramentas uteis ou tambem sites que oferecem diversos codigos em CSS, Javascript e HTML para que de alguma forma, aproveitarmos o codigo e adaptando para uma nova funcionalidade para o blog, mas claro, citando as devidas fontes. Introducao Ha alguns meses atras, o blogger disponibilizou e oficialmente liberou um novo recurso para a plataforma, o lightbox padrao. O lightbox, por sua vez, e o mais basico possivel, mas nao deixa de cumprir a funcao de uma lightbox normal. Apesar de apresentar um barra de navegacao entre as imagens bem basica, o recurso conta um sistema bem leve e compativel com os demais navegadores. Mas na minha opniao, o que realmente faltou foi um efeito de transicao entre as imagens. Mas ate entao nao me manifestei em fazer alguma coisa pra mudar isso, porem, hoje vou mostrar como dar uma personalizada na lightbox nativa do blogger e deixar no seu jeito, como por exemplo trocar a cor do fundo da lightbox, aumentar a barra de navegacao e etc. Lembrando que iremos usar apenas CSS. Sendo assim, vamos ao tutorial e fique atento a cada passo para fazer tudo direitinho. Mas antes faca o seguinte: 1. Acesse o Painel principal do seu blog e va em: Configuracoes -> Postagens e comentarios -> ative a opcao para mostrar imagens com a lightbox. 2. Entre no Editar HTML do seu blog e procure por: <body> Agora acima dela cole: <style> </style> Todos os codigos que estiverem mais abaixo vao ser colados entres essas duas tags: Ex: <style> Aqui vaos os codigos </style>. Agora vamos aos codigos para personalizacao: Trocando a cor do fundo da lightbox Vamos comecar pelo fundo, trocando sua cor e seu nivel de transparencia. Para isso, cole o codigo abaixo entre as tags <style> e em seguida veja como modificar atraves da legenda. .CSS_LIGHTBOX_BG_MASK {opacity: 0.5 !important;background-color: #222 !important;} Legenda: Vemelho: Nivel de transparencia (0.0 retira o fundio e o valor 1 deixa-o sem transparencia).Azul:Cor do fundo em hexadecimal. Colocando sombra e borda nas imagens da lightbox Este aplica sombra nas imagens da lighbox juntamente com uma borda. Cole o codigo abaixo entre as tags <style>. .CSS_LIGHTBOX_SCALED_IMAGE_IMG {cursor: pointer;outline: 5px solid #fff !important;box-shadow: 0px 0px 19px 5px #111;}Legenda:Vermelho: Espessura da borda, quando maior mais grossa e vice-versa.Azul: Cor da borda em hexadecimal.Verde: Cor da sombra em hexadecimal. Personalizando a barra de navegacao entre as imagens Este trecho de codigo abaixo permitira que voce altere a barra de navegacao da lightbox. Cole o codigo entre as tags <style> .CSS_LIGHTBOX_FILMSTRIP {background:#991d1d !important;;line-height: 0;overflow: hidden;position: relative;width: 100%;height: 60px;} Legenda:Vermeho: Cor do fundo da barra de navegacao em hexadecimal.Azul: Altura da barra (quanto maior o numero mais alto a barra e vice-versa). Trocando a imagem do botao Fechar O codigo