Oi. Quem aí gosta de mágica? Pois hoje eu trouxe uma para vocês, só que como eu não sei fazer mágica de verdade, tem que ser com HTML e CSS para texto e imagem mesmo rsrsrs... é o famoso truque de fazer desaparecer e aparecer alguma coisa. E olha que não vamos precisar nem de coelho e cartola...¬¬'
Faremos isso (passe o mouse na imagem e no texto abaixo):

Quando você passar o mouse sobre este texto ou na imagem, vão sumir!

E aí todos dizem: oooOOOOOh! kkk...
Primeiro: o CSS, que é o que faz todo o truque. Nele estará definido tudo sobre bordas, cores, posicionamento, sombras...vou deixar pré definido aqui, mas podem alterar a vontade. Adicione-o acima de ]]></b:skin>:
.magic {
border-radius: 10px;
border: 2px solid #e3a2fa;
box-shadow: 2px 2px 3px #f2b3ff;
float: center;
text-align: center;
font-family: 'Lobster';
font-size: 22px;
font-weight: bold;
color: #c288d1;
text-shadow: 1px 2px 3px #fff;
background: url(http://3.bp.blogspot.com/-2oyL8LCWVv4/T4W97FkQGkI/AAAAAAAAGes/FwytiB0MOI8/s1600/bg8.gif)repeat;
width: 305px;
-webkit-transition: 2s;
}
.magic:hover {
-webkit-transition: 2s;
-webkit-transform: rotate(0deg);
opacity:.01;
} 

Visualize seu blog e salve. Ainda não acontece nada. Para aparecer, adicione esse código em um novo gadget HTML/JavaScript ou em qualquer lugar que aceite HTML:
<center>
<div class="magic">
<center><img src="URL DA IMAGEM"></center>
TEXTO!
</div></center> 

Note que tudo o que estiver dentro dessa div class vai desaparecer. Pode ser aplicado em várias coisas, como em menus, blockquotes e até no cabeçalho! Basta posicionar o gadget em seu Layout onde quer que apareça, ou mudar o nome magic para blockquote, menu...
No caso de um menu, você pode deixar assim, por exemplo:


Meu Blog Twitter Facebook

O CSS é o mesmo do primeiro código, só mudei onde estava escrito "magic" para "magicmenu". O que muda é só o HTML, mais ou menos assim:

<a class="magicmenu" href="URL"> Título do Link </a>

Use o mouse como varinha mágica e a criatividade para criar vários efeitos em seu blog ;3

9 Comentários

  1. ótimo tuto!Amei o efeito!
    segue lá?
    http://u-nlocked.blogspot.com.br/

    ResponderExcluir
  2. Adorei! . Amore que blog mais lindo esse seu, muito fofo e perfeito, as postagens e o layout tudo perfeito! Seguindo.
    Beijos, aguardo sua visita-> Morangos Silvestres

    ResponderExcluir
  3. Oi Roberta! To seguindo seu blog, será que tem como você fazer um tutorial de como você deixou o título da postagem, marcadores e comentários desse geito acima do post? Agradeço se me ajudar! Beijos, tchau. Cupcake Sonhador

    ResponderExcluir
    Respostas
    1. Oie ^^ Já postei. Dá uma olhadinha nos Tutoriais em Marcadores e Comentários Abaixo dos títulos dos posts personalizados.
      Lá eu mostrei como posicionar e deixar coloridinho :3
      Beijinhus...

      Excluir
  4. Obrigada meninas!!! Fico super feliz com vocês aqui e que tenham gostado ^^ Beijus...

    ResponderExcluir
  5. nooosaaa O.O primeira vez que eu vejo e nem é tçao difícil rsrs
    mas acho que vou usa-lo isso no próximo lay *3* acho que vai ficar uma fofura rsrs
    BJS.<3
    http://souotomeecomorgullhoo.blogspot.com.br/

    ResponderExcluir
  6. Oi Roberta-chan, lembra de mim né? ^^/\^^
    Gostei do tutu, posso dizer que não conhecia, e fica bem legal, fiquei passando o mouse várias vezes em cima da imagem *0*
    #Kissus e feliz 2013 atrasadoo!
    cotidianodeumabarbie.blogspot.com

    ResponderExcluir
  7. hahaha eu disse 'ooooh que mágico' kk, amei o tutorial! :) você sempre tem tutoriais ótimos e seu layout sempre fica incrível!

    Adolescente Nerd

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart