Olá leitor do Tecnoblog, hoje venho ensinando como incluir um efeito bastante legal em seu Blog, o efeito que você irá incluir e uma Pré-visualização da imagem com JQuery, neste efeito ao você passar o mouse acima da imagem, irá abrir uma Pop-Up, com um efeito parecido Transition, para observar a imagem em um tamanho maior!
Uma dica bastante eficaz e fazer o Backup de seu template!Instalando o Javascript
Este script funciona com a biblioteca do JQuery na versão 1.4.2, caso você já tenha ela instalada em seu blog, não precisará instala-la novamente.
1. Faça o login no Blogger em vá em modelo, Depois vá em Editar HTML
2. E procure pela seguinte tag:
</head>
3. E Acima dela adicione o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[this.imagePreview = function(){/* CONFIG */
xOffset = 200; // distancia do topo //yOffset = 30; // distancia a esquerda //
// estas duas variáveis determinam a distância popup a partir do cursor// se precisar ajuste para obter o resultado correto
/* END CONFIG */$("a.preview").hover(function(e){this.t = this.title;this.title = "";var c = (this.t != "") ? "<br/>" + this.t : "";$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");$("#preview").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px").fadeIn("fast");},function(){this.title = this.t;$("#preview").remove();});$("a.preview").mousemove(function(e){$("#preview").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px");});};
$(document).ready(function(){imagePreview();});//]]></script>
Aplicando o CSS
1. E ainda na aba Modelo e Editar HTML, procure pela seguinte tag:
]]></b:skin>
2. E Acima da tag citada acima adicione o seguinte código:
ul#imagepreview{margin:0; }ul#imagpadding:0;epreview li {;float:left;dilist-style:nonesplay:inline;px;}#preview{pomargin-right:10sition:absolute;ccc; /*---Edite cor da borda---*/background:#000;border:1px solid # /*---Edite cor de fundo---*/padding:5px;display:none;color:#fff; /*---Edite cor da fonte---*/}
Ativando o efeito nas imagens do Blogger
Para utilizar este efeito na imagem dentro do post e necessário que ela esteja hospedada em algum site em que hospeda imagens, Como o Picasa Web, e este efeito deve ser adicionado na post através da opção HTML do post.
E para utiliza-lo insira o seguinte código:
<ul id="imagepreview">
<li><a href="URL-DA-IMAGEM-QUE-DEVE-APARECER-NO-POPUP" class="preview"><img src="URL-DA-IMAGEM-MINIATURA" width="200" height="200" alt="" /></a></li> <li><a href="URL-DA-IMAGEM-QUE-DEVE-APARECER-NO-POPUP" class="preview"><img src="URL-DA-IMAGEM-MINIATURA" width="200" height="200" alt="" /></a></li>
</ul>
Pronto, Terminamos qualquer duvida comente!
JavaScript por: Alen Grakalic - CSS Globe
Personalização por: Clau - Mundo Blogger
4 Comentários
Cara, não funfou no meu não, ao instala o efeito a imagem ficou no rodapé do meu blog. Me ajuda ai!
26 de dezembro de 2011 às 11:20Olá Luiz qual Script além do Jquery você usa em seu blog?
26 de dezembro de 2011 às 12:16Eu estava vendo aqui no meu template eu uso o scriptaculous o prototype e o Jquery, eu só uso eles.
26 de dezembro de 2011 às 13:57Luiz realmente o problema e este!
26 de dezembro de 2011 às 15:00Ao você usar o Jquery juntamente com o scriptaculous, no mesmo template, entram em conflito, como já aconteceu comigo.
O Prototype junto com o Jquery entram em conflito entre si.
Preste bem atenção ao instalar um widget em que envolva scripts em seu blog, observe o seu template os scripts em que mantem seu blog funcionando corretamente.
Pois blogs que possuem muitos scripts, com certeza irão entrar em conflito.
Obrigado pelo comentário e siga as dicas que citei acima :) !
Postar um comentário
Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!