Olá Amigos leitores, hoje neste artigo venho ensinando como adicionar um efeito bastante legal nas imagens do seu blog, com a ajuda do CSS é claro. Com muito trabalho consegui fazer este efeito, e como você percebe uso ele, então resolvi compartilhar com vocês, ele possui um movimento que ao passar o mouse em cima dele a imagem se move para baixo e se diminui, com um belo Opacity e um elegante Transition, que você poderá adicionar em qualquer lugar, que você desejar.
Instalando no Blog
Agora Vamos Aprender a como instalar este ótimo efeito em seu blog:
1. Faça o Login no Blogger
2. Vá em Modelo
3. Em seguida clique no botão Editar HTML
4. E procure pela seguinte Tag:
5. E acima dele Adicione o Seguinte Código:
Pronto, o CSS já foi Instalando, agora vamos aprender a como usa-lo.
]]></b:skin>
5. E acima dele Adicione o Seguinte Código:
/* ----- Efeito Imagens CSS ----- */
div.sidebar-img-gadget {
text-align:center;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
div.sidebar-img-gadget img {
opacity:1;
-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;transition: all 0.6s ease;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
div.sidebar-img-gadget img:hover {
opacity: .3;
-webkit-transition: all .8s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.5s ease;transition: all 0.6s ease;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8);-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;
}
Pronto, o CSS já foi Instalando, agora vamos aprender a como usa-lo.
Usando no Blog
Para Usa-lo em qualquer lugar do blog, nas posts, ou na sidebar etc. Usa-se o seguinte código:
<div class="sidebar-img-gadget" oncontextmenu="return false" ondragstart="return false"><a href="URL" target="_blank" style="font-size: 100%; "><img src="URL da imagem" border="0" alt="Imagem" /></a></div>
A Parte destacada de Vermelho será substituída pelo o link em que a imagem será redirecionada, e a parte destacada de Azul será substituída pela a URL da imagem.
Pronto pessoal, qualquer duvida ou agradecimento a fazer não deixe de comentar.
16 Comentários
Conheci seu blog Agora, E já Estou Gostando Dele. Este efeito é uma beleza de incrível parabéns.
5 de março de 2012 às 16:34Que bom que Gostou do Nosso Blog Gustavo, Obrigado por Comentar.
6 de março de 2012 às 12:20WOw, Ótimo efeito, realmente muito elegante gostei muito Obrigado parabéns pelo blog
9 de março de 2012 às 09:02Abraços!
Que bom que Gostou do Efeito Daniel, Fico muito Grato por participar do nossos posts. Até mais!
9 de março de 2012 às 12:10Não há de que, até... :D
9 de março de 2012 às 12:16Queria pedir, não sei se é conveniente agora, mas tem como ensinar como colocar um Ícone nos títulos dos gadgets e em outras partes do blog? Desde já Agradeço! :D
:D. Daniel, Que tipo de Ícone por exemplo?
9 de março de 2012 às 12:27eu achei aqui ó: http://garotoonerd.blogspot.com/2011/12/tutorial-mini-gif-no-titulo-do-post.html
10 de março de 2012 às 21:19Hannah Ele não precisara mais, pois já publiquei o post tutorial ensinando como fazer. Até mais.
12 de março de 2012 às 06:42Caio Vinícios como faço para por esta frase em cima do meu Nome (Descrição) e por este fundo azul?
31 de maio de 2012 às 10:08Obs: sou adm do meu Web Site
Tenho outra duvida gostaria de colocar minha caixa de pesquisa em lugar como o seu está. Porém meu cabeçalho não é dividido em 2. E a caixa se estende pelo blog :(
31 de maio de 2012 às 10:39Olá Clederson Bispo, neste caso você teria que acessar seu painel no Disqus e então ir em Settings (Traduzindo: Configurações) e Depois em Appearance (Traduzindo: Aparência) role até o final da página e adicione o seguinte código, alterando aonde se pede:
31 de maio de 2012 às 12:13#dsq-content .dsq-moderator .dsq-comment-header {
background: #1d4088;
}
#dsq-content .dsq-moderator .dsq-comment-header a:link,
#dsq-content .dsq-moderator .dsq-comment-header a:visited {
color: #ffffff !important; /* cor do nome do autor */
text-decoration:none !important;
}
#dsq-content .dsq-moderator .dsq-comment-header a:hover {
color: #ffffff !important; /* cor do nome do autor com o mouse em cima */
text-decoration:underline !important;
}
Até mais, Qualquer outra duvida não se preocupe, estaremos a sua disposição!
Olá Clederson Bispo, para isso você você deverá criar duas seções no cabeçalho do Blog, como você mesmo disse dividir em colunas, por isso recomendo que leia este tutorial do "Mundo Blogger" aonde você aprenderá a dividir o cabeçalho em duas colunas pelo designer do modelo, ou seja uma forma bem mais fácil de fazer o mesmo, segue o link abaixo:
31 de maio de 2012 às 12:23http://www.mundoblogger.com.br/2010/10/dividir-header-em-2-colunas-no-designer.html
P.S: Ao dividir o cabeçalho arraste o gadget da caixa de pesquisa até a outra coluna ao lado do cabeçalho!
Até mais, Abraços ..
Muito obrigado pela ajuda ^^
10 de junho de 2012 às 19:23Ocorreu tudo certo, grato pela ajuda novamente ^^
10 de junho de 2012 às 19:24Não há de que Clederson!
11 de junho de 2012 às 06:29Até mais, Fica com Deus ... Volte Sempre!
como faço para colocar esse efeito na imagem do meu cabeçalho onde fica meu logo no blogger
15 de fevereiro de 2015 às 23:31Postar 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!