Yo! Como vao hoje queridos bunnie's? Venho trazer a segunda postagem do dia, faz tempo que nao posto assim em sequencia. Bom saindo um pouco dos menus, venho trazer um efeito legal para imagens, pode ser tanto usado em gadgets como em postagens, fica muito lindo. Trata-se de um efeito de pre-visualizacao em movimento das imagens dos posts, que funciona a base de um script desenvolvido por Alen Grakalic, autor do site CSS Globe em conjunto com o JQuery. Porem o codigo que apresento aqui e uma adaptacao com um pouco d CSS do Mundo Blogger. Ver Galeria de Imagens Para conseguir este efeito, e necessario a incorporacao de javascript a base da biblioteca JQuery e insercao de codigos CSS em seu template. Para ver o efeito na ativa clique no menuzinho acima. 1) Va ate o HTML do seu blog, clique dentro da area do codigo e ative a pesquisa selecionando Ctrl+F, procure por </head>, e acima dele cole:<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 variaveis determinam a distancia 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>2) Agora vamos aplicar o estilo no caso o CSS, ainda no HTML do seu blog, clique dentro da area do codigo e ative a pesquisa selecionando Ctrl+F, agora pesquise por ]]></b:skin>, assim que achar acima dele cole o codigo abaixo:ul#imagepreview{margin:0;padding:0;}ul#imagepreview li {list-style:none;float:left;display:inline;margin-right:10px;}#preview{position:absolute;border:1px solid #ccc; /*---Edite cor da borda---*/background:#000; /*---Edite cor de fundo---*/padding:5px;display:none;color:#fff; /*---Edite cor da fonte---*/}Salve as aplicacoes e futuramente volte para personalizar ao seu gosto.3) Agora va em Layout e abra um novo Gadget Java/Script e dentro cole:<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>No codigo acima, as partes destacadas correspondem a largura e altura da imagem miniatura do post. Se preferir, voce pode ajustar esses valores. Se quiser aplicar mais imagem, basta colar esse codigo quantas vezes desejar antes do </ul>:<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>___________________(Entendendo o codigo)___________________# Procure evitar a utilizacao de imagens grandes demais, pois quanto maior for a 1a imagem (a que aparece no pop up), quando o mouse passar em cima dela, mais proxima ela ficara do rodape da tela no monitor. Isto porque a imagem do pop upa se movimenta. Se usar imagens enormes, pode acabar deixando a imagem cortada na parte inferior conforme haja rolagem na tela. (Resolva o problema na proxima explicacao).# Se quiser controlar o tamanho 1a imagem (a que aparece no pop up), procure por ]]></b:skin>, e acima dele cole: #preview img{ width: 339px; height: auto; } na parte marcada em azul e o tamanho da largura da imagem, coloque a largura que deseja. a parte marcada em verde e a altura, esta no