09 julho 2012

Status com efeito hover


Hello babys! Quanto tempo né, fiquei esse tempo todo sem postar tudo por causa da falta de inspiração e nesse fim de semana fique doente,mais agora estou bem melhor! Enfim, hoje de manhã estava a procura de um tutorial bem legal e original, e não é que eu achei?!-clique aqui e veja o tutorial-, então eu dei umas modificas no código e criei o status com efeito hover! Bora conferir o tutorial? É só clicar em ''leia mais''
   
                   O efeito será assim:

Vá no HTML do seu blog e procure pela tag  ]]></b:skin> e logo abaixo cole o seguinte código:

}
#statusmg{
display: block;
font-size: 11px;
font-family: tahoma;
letter-spacing: 0;
border-bottom: 1px dotted #c9c9c9;
background-repeat: no-repeat;
text-indent: 5px;
vertical-align: middle;
text-decoration: none;
line-height: 15px;
cursor: text;
margin-bottom: 1px;
}
#statusmg:hover {
display: block;
font-size: 11px;
font-family: tahoma;
letter-spacing: 0;
border-bottom: 1px dotted #c9c9c9;
background-color: #E8E8E8;
text-indent: 5px;
vertical-align: middle;
text-decoration: none;
line-height: 15px;
cursor: text;
margin-bottom: 1px;


       Salve. Agorá vá no gadget  HTM/JavaScript e cole o código abaixo:


<div id="statusmg"><img src="http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/girl-1.gif" /> <b>Dona:</b> seu-nome</div>
<div id="statusmg"><img src="http://i205.photobucket.com/albums/bb186/mhilkas/Currently/visitando-2.gif" /> <b>Desde:</b> data-de-criação-do-blog</div>
<div id="statusmg"><img src="http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/pencil_right.gif" /><span style="font-weight:bold;">Meta</span>: sua-meta-de-seguidores</div>
<div id="statusmg"><img src="http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/browsingpink.gif" /> <b>Melhor visualização:</b>  navegador-que-melhor-visualiza-seu-blog</div>


 Se você quiser trocar de gif é só vir aqui nessa página que tem vérios minis gifs.
Visualize, se estiver tudo certinho salve :D


                                                                      Bjs

18 comentários:

Ingrid Sakamoto dos Santos disse...

Huum, adorei esse efeito hover! Quem sabe no meu próximo layout eu não faço um status com efeito hover? Haha

Comenta?
www.ingridsakamotodossantos.tk
Se puder quando você ir no blog comentar, você pode clicar no banner da Capuccine Store? É só você clicar e sair! É Menos de 1 minuto! Fico grata se fazer isso!

Ana Karoline Barbosa disse...

Adorei o tuto, tudo bem explicado e deixa o blog com um super visual \o/

http://morangosdespedacados.blogspot.com.br/

Priscilalirow disse...

que legal e fica bonito ne? amei
Beijinhos ♥

http://priscilalirow.blogspot.com.br/

Soraya disse...

Hello , Loloita , Omg!
Nossa Tú Ta , Feliz neer ? com um blog
desse OMG! Seguindo , OH! Vire Minha Também
By >.<
Smile Retrô ! Clika

Sabryna Assis disse...

Olá Patricia amei seu blog, achei muito fofo.
Seguindo você, poderia retribuir a visitinha???
http://angeldamoda.blogspot.com.br/

Beijoos!

♥Juh e Isa♥ disse...

oi!!
ame seu blog!
muito lindo mesmo!
*seguindo, segue de volta??
beijoks

thebestfriendsbrasil.blogspot.com

Plum disse...

Que legal, fica lindo!!

Giovanni Barbosa disse...

Oiii que tal uma parceria entre os nossos blogs?
Caso queira deixe um recado na minha cbox e não esquece de seguir..
Url:http://teenlittleworld.blogspot.com.br
Nome:Teenagers world

Dayane disse...

Adorei o tuto ♥
bjinhos
Participe do primeiro concurso do blog que esta rolando! clique aqui <---

Jéssica Rodrigues disse...

Ah que legal *-*

Beijos

http://www.byjessicarodrigues.com/

@jescrodgues

debs disse...

Nossa! tava procurando esse tutorial! adorei o post flor!
Beijos ~> Magic Touch

Nanda ♥ disse...

Oi Paty, como vai?
Olha eu só vim dizer que eu fiz, tudo direitinho, mas, ficou com um código gigante rosa por cima, no meu blog. Como eu faço para tirar? Ah e a propósito, adorei seu blog. Post muito criativo. Te adorei baby!

www.thecherrymagic.blogspot.com
Acessa aqui ^^^^^^^^^^^^^^^^^^^

Eduarda Tainá disse...

Muito bom o tutorial, é um efeito diferente *-*
Na Flor da Idade | Tudo Sobre Photoscape

Angel Poubel disse...

Adorei amiga :)
Ótima semana,
Big bj ;*
http://angelpoubel.blogspot.com.br

Victoria disse...

Caramba! Você é super talentosa, que lindo esse efeito! *_*
e esse lay lindo #comofas?
To seguindo claro, seu blog é realmente mágico hahahahah u.u
Tá rolando uma Gincana de Férias lá no CV e estou te convidando pra participar! As inscrições são só até o dia 15, então corre lá! Hahahaha >U<
Te espero lá viu? :3
Bezos, Vickie♥
-->www.chicletevioleta.blogspot.com.br

Ray disse...

Muito bom o tutorial. :D

http://caprichadasbr.blogspot.com.br/

Giulia Migliorini Estevao disse...

Adorei o hover! Vou tentar fazer! :)
Beijos, seguindo, retribui?

death-byfashion.blogspot.com.br

Doce Outono disse...

Ótima dica!

http://doceeoutonoo.blogspot.com.br/