Efeito CSS nas imagens do Blog (Versão 1)

► +A +/- -A
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:


]]></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.
► Postagens Relacionadas:

16 Comentários

gustavo disse...

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:34
Caio Vinicius disse...

Que bom que Gostou do Nosso Blog Gustavo, Obrigado por Comentar.

6 de março de 2012 às 12:20
Daniel disse...

WOw, Ótimo efeito, realmente muito elegante gostei muito Obrigado parabéns pelo blog


Abraços!

9 de março de 2012 às 09:02
Caio Vinicius disse...

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:10
Daniel disse...

Não há de que, até... :D

Queria 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

9 de março de 2012 às 12:16
Caio Vinicius disse...

:D. Daniel, Que tipo de Ícone por exemplo?

9 de março de 2012 às 12:27
Hannah G3 disse...

eu achei aqui ó: http://garotoonerd.blogspot.com/2011/12/tutorial-mini-gif-no-titulo-do-post.html

10 de março de 2012 às 21:19
Caio Vinicius disse...

Hannah Ele não precisara mais, pois já publiquei o post tutorial ensinando como fazer. Até mais.

12 de março de 2012 às 06:42
Clederson Bispo disse...

Caio Vinícios como faço para por esta frase em cima do meu Nome (Descrição) e por este fundo azul?
Obs: sou adm do meu Web Site

31 de maio de 2012 às 10:08
Clederson Bispo disse...

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:39
Caio Vinicius disse...

Olá 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:

#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!

31 de maio de 2012 às 12:13
Caio Vinicius disse...

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:

http://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 ..

31 de maio de 2012 às 12:23
Clederson Bispo disse...

Muito obrigado pela ajuda ^^

10 de junho de 2012 às 19:23
Clederson Bispo disse...

Ocorreu tudo certo, grato pela ajuda novamente ^^

10 de junho de 2012 às 19:24
Caio Vinicius disse...

Não há de que Clederson!

Até mais, Fica com Deus ... Volte Sempre!

11 de junho de 2012 às 06:29
Atalaias de Cristo disse...

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:31

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!