Nessa postagem trago aqui como colocar o efeito Shadowbox nas imagens, videos e links do seu Blog. Vou estar mostrando um modo diferente do que encontrei na internet onde dizem que para o efeito funcionar devemos hospedar os arquivos na internet, pois se hospedarmos direto no template ele não funciona, mas ao fazer testes com os arquivos hospedados na internet o efeito só funcionou com o Firefox, e por isso estou usando esse efeito no meu blog TecWindows.com,
com os arquivos hospedado diretamente dentro do meu template, pois assim funciona em todos os navegadores.
Se você quer Primeiro conhecer como esse efeito funciona viste essa página do meu outro Blog.
http://www.tecwindows.com/2011/11/wallpapers-windows-xp-pack-1.html
Agora para colocar esse efeito no seu Blog você deve fazer o seguinte.
1º - Baixe os Script a ser usado. Para baixar o Script clique aqui >>Aqui<<
2º - Extraia os arquivos com Winrar.
3º - Abra somente o Arquivo shadowbox.script e deixe aberto.
Feito esses passos agora vamos ao Blog.
Primeiro abra o painel do seu Blog e vá em Modelo. Sempre bom lembrar que antes de qualquer edição no template é bom salvar uma cópia completa, por segurança.
>> Como Salvar Uma Cópia do Template do Blog
Depois de salvar uma cópia do template agora clique em Editar html e marque a opção Expandir modelos de widgets.
Agora procure pela tag </head> e siga os passos abaixo.
1º - Acima da tag </head> cole esse código.
2º - Ainda logo acima da tag </head> cole também o seguinte código.
Aconselho que não mexer no codigo para não debilitar sua funcionalidade, a não ser que saiba o que está fazendo.
O local marcado em vermelho é a forma de apresentação das imagens veja qual pode ser.
Drag: Faz que a imagem aparaça em tamanho origial, muito boa para quem usa imagens para tutoriais ou Wallpapers. Porém se a resolução da imagem for muito alta aparecerá uma mãozinha pra que o leitor possa arrastar a imagem para cima, para baixo e para os lados para ver completamente.
Resize: Com está opção a imagem vai aparecer sempre com o mesmo tamanho não importando assim se a imagem tem uma resolução muito alta, o que eu quero dizer é que mesmo que a imagem tenha 1024x768 ou 1900x1200 as imagens vão aparecer do mesmo tamanho ao usar esse efeito, esse é o que mais recomendo.
Feito essa parte é só salvar.
Agora vomos aos códigos a serem usados para que o efeito funcione.
Para as imagens os códigos são os seguintes.
Agora o próximo código para imagens.
Para adicionar várias imagens é só repetir o código quantas vezes você precisar. Exemplo para 4 imagens.
Para videos do YouTube.
YouTube....
Eu testei todos esses códigos em varios tempates do Designer de Modelo do Blogger e funcionou em todos, testei támbem em meu template oficial que já tem dois scripts Jquery hospedadados para o funcionamento do meu Slide-Show e meu Box-Flutuante e não deu nenhum conflito.
Navegadores que testei.
Todos funcionaram sem nenhum conflito. Mas é sempre bom tomar cuidado para não colocar os mesmos Scripts 2 vezes para na casar conflito.
com os arquivos hospedado diretamente dentro do meu template, pois assim funciona em todos os navegadores.
Se você quer Primeiro conhecer como esse efeito funciona viste essa página do meu outro Blog.
http://www.tecwindows.com/2011/11/wallpapers-windows-xp-pack-1.html
Agora para colocar esse efeito no seu Blog você deve fazer o seguinte.
1º - Baixe os Script a ser usado. Para baixar o Script clique aqui >>Aqui<<
2º - Extraia os arquivos com Winrar.
3º - Abra somente o Arquivo shadowbox.script e deixe aberto.
Feito esses passos agora vamos ao Blog.
Primeiro abra o painel do seu Blog e vá em Modelo. Sempre bom lembrar que antes de qualquer edição no template é bom salvar uma cópia completa, por segurança.
>> Como Salvar Uma Cópia do Template do Blog
Depois de salvar uma cópia do template agora clique em Editar html e marque a opção Expandir modelos de widgets.
Agora procure pela tag </head> e siga os passos abaixo.
1º - Acima da tag </head> cole esse código.
<script type='text/javascript'>Esse código serve para hospedarmos os scripts dentro do nosso template. Agora copie todo o código shadowbox.script que foi aberto nos paasos que fizemos acima e cole no lugar do texto em vermelho.
//<![CDATA[
Código shadowbox.script Aqui
//]]>
</script>
2º - Ainda logo acima da tag </head> cole também o seguinte código.
<style>Essa é a folha de estilo ( Css ) coloquei aqui para facilitar, pois como pede ver já está com as imagens hospedadas, mas se você quiser hospedar as imagens em um site de sua preferência fique a vontade.
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/Menu%20Alternativa%20Extreme/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/Menu%20Alternativa%20Extreme/close.png);}
#sb-nav-next{background-image:url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/Menu%20Alternativa%20Extreme/next.png);}
#sb-nav-previous{background-image:url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/Menu%20Alternativa%20Extreme/previous.png);}
#sb-nav-play{background-image:url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/Menu%20Alternativa%20Extreme/play.png);}
#sb-nav-pause{background-image:url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/Menu%20Alternativa%20Extreme/pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}</style>
<script type='text/javascript'>
Shadowbox.init({
handleOversize: "resize",
modal: false
});
</script>
Aconselho que não mexer no codigo para não debilitar sua funcionalidade, a não ser que saiba o que está fazendo.
O local marcado em vermelho é a forma de apresentação das imagens veja qual pode ser.
Drag: Faz que a imagem aparaça em tamanho origial, muito boa para quem usa imagens para tutoriais ou Wallpapers. Porém se a resolução da imagem for muito alta aparecerá uma mãozinha pra que o leitor possa arrastar a imagem para cima, para baixo e para os lados para ver completamente.
Resize: Com está opção a imagem vai aparecer sempre com o mesmo tamanho não importando assim se a imagem tem uma resolução muito alta, o que eu quero dizer é que mesmo que a imagem tenha 1024x768 ou 1900x1200 as imagens vão aparecer do mesmo tamanho ao usar esse efeito, esse é o que mais recomendo.
Feito essa parte é só salvar.
Agora vomos aos códigos a serem usados para que o efeito funcione.
Para as imagens os códigos são os seguintes.
<a href="URL DA IMAGEM" rel="shadowbox">O código acima e para usar em imagens sozinhas, em vermelho é onde deve colocar o link da imagem e em azul é onde você pode ajustar altura e largura da miniatuara.
<img src="URL DA IMAGEM" width="200" height="200"></a>
Agora o próximo código para imagens.
<a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM1" rel="shadowbox[galeria]"><img style=" title="SEU-TITULO-AQUI" border="0" alt="" src="URL DA IMAGEM1" width="150" height="150"></a>Esse é o código usado para uma galeria de imagens, onde está em verde é onde você de escolher um titúlo para sua imagem.
Para adicionar várias imagens é só repetir o código quantas vezes você precisar. Exemplo para 4 imagens.
<a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM1" rel="shadowbox[galeria]"><img style=" title="SEU-TITULO-AQUI" border="0" alt="" src="URL DA IMAGEM1" width="150" height="150"></a>Agora o código para os videos.
<a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM1" rel="shadowbox[galeria]"><img style=" title="SEU-TITULO-AQUI" border="0" alt="" src="URL DA IMAGEM1" width="150" height="150"></a>
<a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM1" rel="shadowbox[galeria]"><img style=" title="SEU-TITULO-AQUI" border="0" alt="" src="URL DA IMAGEM1" width="150" height="150"></a>
<a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM1" rel="shadowbox[galeria]"><img style=" title="SEU-TITULO-AQUI" border="0" alt="" src="URL DA IMAGEM1" width="150" height="150"></a>
Para videos do YouTube.
<a rel="shadowbox;width=853;height=507;" title="TITULO DO VÍDEO" href="http://www.youtube.com/v/CODIGO DO VIDEO&rel=0&autoplay=1"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="SEU-TITULO-AQUI" border="0" alt="" src="URL-DA-IMAGEM-MINIATURA-DO-VIDEO" width="150" height="150"></a>Para videos Do Vimeo.
<a rel="shadowbox;width=853;height=507;" title="TITULO DO VÍDEO" href="http://vimeo.com/moogaloop.swf?clip_id=ID DO VIDEO&autoplay=1"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="SEU-TITULO-AQUI" border="0" alt="" src="URL-DA-IMAGEM-MINIATURA-DO-VIDEO" width="150" height="150"></a>Para videos do Google.
<a href="http://video.google.com/googleplayer.swf?docid=CODIGO DO VIDEO&autoplay=1&hl=pt&fs=true" title="TITULO DO VÍDEO" rel="shadowbox;width=853;height=507"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="SEU-TITULO-AQUI" border="0" alt="" src="URL-DA-IMAGEM-MINIATURA-DO-VIDEO" width="150" height="150"></a>O código ou a Id do video se trata apenas desse trecho do link. É só copiar e colar no local indicado.
YouTube....
http://www.youtube.com/watch?v=-_amHsC9Tvg&feature=relatedVimeo....
http://vimeo.com/31449517Google Videos....
http://video.google.com/videoplay?docid=-570340003958234038Agora o código para os links.
<a title="TITULO-AQUI" href="URL-DA-IMAGEM" rel="shadowbox">TEXTO DO LINK AQUI</a>Agora é só aproveitar, com certeza o efeito shadowbox não nos deixa a desejar, ele é perfeito para deixar nosso trabalho mais elegante e profissional.
Eu testei todos esses códigos em varios tempates do Designer de Modelo do Blogger e funcionou em todos, testei támbem em meu template oficial que já tem dois scripts Jquery hospedadados para o funcionamento do meu Slide-Show e meu Box-Flutuante e não deu nenhum conflito.
Navegadores que testei.
Firefox....
Google Chrome.....
Internet Explorer 9....Todos funcionaram sem nenhum conflito. Mas é sempre bom tomar cuidado para não colocar os mesmos Scripts 2 vezes para na casar conflito.
