Olá Queridos Leitores, Hoje no nosso Artigo, eu vou ensinar como Adicionar um Efeito bastante legal em seu blog, ou seja este tutorial fará que ao Visitante/Leitor ao passar o mouse sobre a imagem do seu Blog ela ficara com um efeito de zoom. Então Vamos aprender a instalar este efeito em seu Blog.
Instalando ao Blog
1. Faça o Login no Blogger
2. Em seguida vá na Aba Modelo
3. Depois Clique no Botão Editar HTML
4. E procure pela seguinte Tag:
]]></b:skin>
5. E Acima dela adicione o seguinte código:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: black;
padding: 5px;
left: -100px;
border: 5px double gray;
visibility: hidden;
color: #ffffff;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 10px;
}
6. Clique em Salvar, e Se estiver tudo Certo Clique em Salvar Modelo.
7. Agora para usar o código nas imagens use o seguinte código:
<a class="thumbnail" href="#thumb"><img src="URL_DA_IMAGEM" width="100px" height="80px" border="0" /><span><img src="URL_DA_IMAGEM" /><br />Legenda da Imagem</span></a>
Avisando: As partes destacadas de Vermelho é aonde você devera substituir pela URL da imagem, a Parte destacada de Azul você devera substituir pela legenda da imagem.
Pronto, Artigo Finalizado.
Até mais Pessoal. Fiquem Com Deus.
15 Comentários
Olá Caio, esse post está muito bom! excelente! gostei muito do código e irei utiliza-lo em meu blog, muito obrigado por deixar esse código. Abraço na alma amigo!
28 de março de 2012 às 14:48Parabéns pelo ótimo blog que desenvolveste.
Olá Daniel, Fico Bastante Agradecido por me elogiar, Afinal, Seu Blog anda muito Bem! Agradeço por gostar do Post. Até mais. Um Abração na Alma. :D
28 de março de 2012 às 14:59Vlw cara isso que eu procurava pro meu blog. o efeito é demais quando passa o mouse, ele gira, bem legal cara, no meu teve um problema porque meu template é ruim, mas eu concertei ele. abraço gostei do artigo.
1 de abril de 2012 às 16:46Vlw cara isso que eu procurava pro meu blog. o efeito é demais quando passa o mouse, ele gira, bem legal cara, no meu teve um problema porque meu template é ruim, mas eu concertei ele. abraço gostei do artigo.
1 de abril de 2012 às 16:47Obrigado por elogiar meu Blog :D. Obrigado por participar. Até mais. Fica com Deus. Abraços.
1 de abril de 2012 às 16:52Muito bom esse efeito de zoom em imagens ao passar o mouse, dá mais destaque a elas!
7 de abril de 2012 às 23:41Ótimo tutorial Caio.
Olá Herlan, Muito Obrigado por participar dos nossos posts, e novamente Obrigado por comentar em nosso Blog. Até mais, Fica com Deus amigo!
8 de abril de 2012 às 11:48Caio. a tag ]]> não esta funcionando mais em meu blog, você sabe o que seria esse erro ?
9 de abril de 2012 às 18:39O.o Como não? Como assim ela não esta funcionando? Me explique bem a situação que acho que talvez eu poderei ajudar, que eu saiba ela que funciona para que todo o CSS do blog se mantenha junto com o Style ou seja ]]>.
10 de abril de 2012 às 13:47Até mais, Espero sua resposta. Boa Sorte e Fica com Deus.
Desculpe pela demora, sempre que aplico o css ele não funciona atraves dessa tag
14 de abril de 2012 às 18:32Hmmm, Entendi .. Isto eu acho que já aconteceu comigo, Tente fazer isto: Cole o CSS antes de qualquer código que você possuir antes da Tag Style (]]>) E provavelmente o erro sumirá!
15 de abril de 2012 às 19:50Como ? não entendi, você pode me ajudar a concertar ? pode fazer isso pra mim ? eu não consigo, eu agradeço.
15 de abril de 2012 às 21:16Sim! Ajudo Izaque, Só basta você me adicionar como Administrador do seu Blog e quando eu terminar você me tira como Administrador, acho que o método que vou fazer, provavelmente dará certo! Envie o E-mail de solicitação para: tecnoblog.contato123@gmail.com .
15 de abril de 2012 às 21:21Até mais. Abraços!
Atenção: Como falei, não tenho toda certeza que oque vou fazer dará certo! Mas se Deus Quiser Dará Certo :D!
Já adicionei Caio, mas você terá que aceitar primeiro para eu colocar como adiministrador, aceite la e eu coloco.
16 de abril de 2012 às 13:08Pronto, Tudo Feito, Agora eu Irei Tentar arrumar!
16 de abril de 2012 às 13:49Postar 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!