Linkbão Oi Torpedo Oi Torpedo Web Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online Resultado Lotofacil Resultado Lotogol Resultado Mega-sena baixa-facil Resultado Loterias Fofocas E-Scripter Claro Torpedo

4/12/2010

doutorblogs-Efeitos de imagem Hover na blogosfera!

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

galerinha achei essa dica muito intereçante para brincar com as maguens no nosso blogs e é um efeito sensacional  confira a abaixo .

Efeitos de imagem Hover na blogosfera!

Image-Hover-Effect-for-blogVocê pode ter visto um capotamento imagem efeito em muitos profissionais e blogs comerciais. Ao rolar , quero dizer que quando você paro seu cursor do mouse sobre a imagem, a imagem de fronteira de cor e estilo / muda a aparência. Bem, usando algumas CSS simples que você pode adicionar alguns efeitos surpreendentes para o seu Blog Images. Sem perder tempo vamos pular direto para os passos a serem seguidos.

Este tutorial usa um padrão simples para adicionar os códigos ou seja, primeiro você precisa adicionar um código CSS acima ]]> </b:skin> e então você precisa adicionar um código HTML como pequenos class = "xyz" para o código da imagem dentro de suas postagens. É isso aí! :>

Em primeiro lugar vê-los em ação!

Live demo: - 10 Efeitos Hover Amazing imagem!

Como adicionar o Top 10 Amazing Image Effects Hover Mouse Para Blogger?

Para tal, siga estes passos,

  1. Ir para o Blogger > Layout> Editar HTML
  2. Pesquisar ]]> </b:skin>
  3. E agora cole qualquer um dos seus preferidos CSS: código acima ]]> </b:skin>

Now whenever you write a post, simply upload an image in your blogger Editor and then switch to the Edit HTML mode and search for this code <img and paste the HTML: code of your preferred Image effect just after <img as shown below,

image-hover-effects

Número # 1

CSS:

. Simple1 (
padding: 5px;
fronteira : 1px solid # ccc;
)
. simple1: hover (
padding: 5px;
background-color: # ccc;
)

HTML:

class = "simple1"

Número # 2

CSS:

. Simple2 (
padding: 5px;
background-color: # ccc;
fronteira : 1px solid # DDD;
)
. simple2: hover (
padding: 5px;
background-color: # eee;
fronteira : 1px solid # 666;
)

HTML:

class = "simple2"

Número # 3

CSS:

. Negros e brancos (
padding: 5px;
fronteira : 1px solid # ccc;
)
. negros e brancos: hover (
padding: 5px;
background-color: # fff;
fronteira : 10px solid # 000;
)

HTML:

class = "preto-branco"

Número # 4

CSS:

. Tracejada (
padding: 5px;
fronteira : 1px solid # ccc;
)
. tracejada: hover (
padding: 5px;
background-color: # fff;
fronteira : 2px tracejada # 000;
)

HTML:

class = "dashed"

Número # 5

CSS:

. Top-bottom (
padding-top: 5px;
padding-bottom: 5px;
beira -top: 3px solid # DDD;
beira -bottom: 3px solid # DDD;
)
. top-bottom: hover (
background-color: # fff;
fronteira -top: 3px solid # 000;
fronteira -bottom: 3px solid # 000;
)

HTML:

class = "top-bottom"

Número # 6

CSS:

.cortina (
padding-top: 10px;
padding-bottom: 10px;
beira -top: 2px solid # DDD;
background-color: # 000;
beira -bottom: 2px solid # DDD;
)
.cortina :hover (
background-color: # fff;
fronteira -top: 3px solid # 000;
fronteira -bottom: 3px solid # 000;
)

HTML:

class = " cortina "

Número # 7

CSS:

. (Vermelho
padding: 5px;
fronteira : 1px solid # ccc;
)
. vermelha: hover (
padding: 5px;
background-color: # E71305;
fronteira : 10px solid # DDD;
)

HTML:

class = "vermelho"

Número # 8

CSS:

. Fadein (
filter: alpha (opacity = 100);
-moz opacidade: 1,0;
opacidade: 1.0;
fronteira : 0;
)
. Fadein: hover (
filter: alpha (opacity = 50);
-moz opacidade: 0,30;
opacidade : 0,30;
fronteira : 0;
)

HTML:

class = "Fadein"

Número # 9

CSS:

. Fadein2 (
filter: alpha (opacity = 50);
-moz opacidade: 0,30;
opacidade: 0,30;
fronteira : 2px solid # 000;

)
. Fadein2: hover (
filter: alpha (opacity = 100);
-moz opacidade: 1,0;
opacidade: 1.0;
fronteira : 2px solid # 000;
)

HTML:

class = "Fadein2"

Número # 10

CSS:

. Thumbnail (
position: relative;
z-index: 0;
)
. miniatura: hover (
background-color: transparent;
z-index: 50;
)
. span thumbnail (
position: absolute;
background-color: # 7AA1C3;
padding: 0px ;
left:-1000px;
fronteira : 1px cinza sólido;
visibility: hidden;
color: white;
text-decoration: Nenhum;
)
. thumbnail span (img
fronteira width: 0;
padding: 0px;
)
. miniatura: hover span (
visibilidade : visible;
top: 0;
left: 5px;
)

HTML: Para saber como aplicar esse efeito de popping em detalhe ler este post -> Pop-up do efeito da imagem

<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>

Você pode gostar de brincar com estes códigos, usando MBT HTML Editor . Eu espero que você irá encontrar neste tutorial bastante útil para reforçar ainda mais a sua experiência de blogging cool:>>

fontes e previlegio mybloggertricks

 

Technorati Marcas: ,,,,,
Bookmark and Share

5 comentários:

João Lucas Chaves on 29 de agosto de 2010 21:33 disse... ( Responder comentário )

Eu fiz tudo erto e aqui não funcionou, alguma ideia do que pode ser?

doutorblogs on 29 de agosto de 2010 22:33 disse... ( Responder comentário )

@João Lucas Chaves

olá João lucas, pode ter sido na colocação do códigos a falta de alguma letra no código ou o seu template não é compatível com ele,veja no começo link Live demo: - como funciona.
os códigos estão todos em ordem.
um forte abraço e obrigado por nos visitar e lhe convido para ver nosso outro brogs : http://parcerialink.blogspot.com/

João Lucas on 29 de agosto de 2010 23:18 disse... ( Responder comentário )

Pois, eu imaginei que poderia ter sido isto também, então testei em outros blogs-teste para ver como ficava e também não funcionou. Não existe alguma coisa que pode fazer não funcionar além do template? Pois eu testei em mais de dois e não funcionou em nenhum navegador. Obrigado

doutorblogs on 30 de agosto de 2010 07:19 disse... ( Responder comentário )

@João Lucas

bom dia João lucas, vou dar uma verificada aqui assim que tiver resolvido eu postarei aqui o mais rápido possível ok.
muito obrigado por me avisar, querendo responda pelo link (responder comentário).
uma ótima semana para você e eu arrumando outro código postarei também.

João Lucas Chaves on 30 de agosto de 2010 22:05 disse... ( Responder comentário )

Obrigado. Estarei no aguardo!
Até mais.

Postar um comentário

seja bem vindo ao mundo do doutorblogs, e sendo asim espéro ser merecedor de suas amizades e lhe convido para visitar mais e ser um dos Seguidor de nosso blogs.
atenciosamente douotrblogs.

Copie o código referente a imagem e cole
:-A :-Z :-C :-X :-E
:-F :-G :-H :-I :-J
:-K :-L :-M :-N :-O
:-P :-Q :-R :-( :-T
:-a :-e :-i :-o :-w

uma lista com as últimas postagens que ira gostar.

Hello visitante seja bem vindo sua presença é um prazer

ads ads ads
 

Recommended links

  • ads
  • ads
  • ads
  • ads

DOUTOR. Copyright © 2009 Gadget Blog is Designed by Ipietoon Sponsored by Online Business Journal

Creative Commons License
This work is in the Public Domain.
Linkbão Oi Torpedo Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online torrent Resultado Dupla Sena Resultado Loteria Federal Resultado Loteca Resultado Lotofacil Resultado Lotogol Resultado Lotomania Resultado Mega-sena Resultado Quina Resultado Timemania baixa-facil Link-facil Resultado Loterias