jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais.
Seu lema é escrever menos e fazer mais.
Com ele é possível criar vários efeitos no seu Blog,está semana vou procurar mais efeitos com o jquery para blogger hoje vai ser o primeiro da serie, o efeito de hoje é exibir uma imagem pequena que ao passar o mouse ou rato ele ficará maior então vamos aplicar este lindo efeito:
1.Faça login no Blogger
2.Acesse a area Layout->Editar html
Agora com as tecla Ctrl e F pesquise o código abaixo:
]]></b:skin> Agora antes do código acima insira o código abaixo:
/* Blogger Zoom Gallery By AllBlogTools.com */ ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect border: none; /* Get rid of border on hover */ }Agora procure pela código abaixo:
</head> E antes dele coloque o código abaixo:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script>Salve as alterações.
Inserindo imagens e criando uma micro galeria
1.Vá para Layout->Elementos da página->Adiciona um Gadget->Html/JavaScript
E coloque o código abaixo dentro do Gadget fazendo as alterações necessárias
<ul class="thumb"> <li><a href="#"><img src="picture 1 Link" alt="" /></a></li> <li><a href="#"><img src="picture 2 Link" alt="" /></a></li> <li><a href="#"><img src="picture 3 Link" alt="" /></a></li> <li><a href="#"><img src="picture 4 Link" alt="" /></a></li> </ul>Notas: O código em vermelho é o link da imagem se não quiser adicionar um link a imagem deixe como está, o código em verde é o url da imagem deve ser substituído pelo url da imagem desejada ex: http://i30.tinypic.com/zx1fn8.png, para inserir mais imagens repita está linha abaixo antes do código </ul> :
<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li> Para ver um demo do script clique aqui
Referência: Allblogtools,Wiki
10 Comentários
Bom dia!
" A grandeza vem não quando as coisas sempre vão bem para você,mas a grandeza vem quando você é realmente testado, quando vocêsofre alguns golpes, algumas decepções, quando a tristeza chega.
Porque apenas se você esteve nos mais profundos vales você poderáum dia saber o quão magnífico é se estar no topo da mais alta montanha."
Um boa semana para você.
Abraços forte
@Principe Encantado Obrigado para você também!!!
Perfeito, estou usando em meu blog para anunciar! Aproveito para dizer que o blog está sensacional! Abraaços!
@Jonathan Hess Muito obrigado!!
Ola amigo como faço para colocar estas imagens no post?
Não quero coloca-las como gadget
Tem como colocar está galeria no post...se tiver faça um tutorial e entre em contato comigo.Mesmo assim foi bem interesante!
As imagens não estão apareçendo,no começo achei que era o tamanho,mas não...peguei imagens pequenas mas não apareçeu do mesmo jeito;
Eu fiz tudo certinho, aparece somente as miniaturas, elas não aumentam ao passar o mouse em cima.
O que deu errado? Tentei tanto no gadjet como no html de um a página adicionada no blogger.
@Beatriz Marks
Estou com o mesmo problema, recebeu resposta?
Olá.
Não sei se é o script mas o efeito não está mais funcionando,ou pelo menos não no meu blog.
Sabe o que é?
www.pilhado.com
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.