Tutorial: Efeito no gadget da "Equipe" ou do "Autor"

Oie doces de 3 sabores!
Como vão?
Desculpem ter estado tão ausente nestas semanas, mas tive provas e o tempo não deu.
Descobri este tutorial no blog Kawaii World, que é muito foda e eu totalmente recomendo :)
Vamos ver como fica?

Agora vamos aprender, como se faz^^


1 - Vá em Design > Editar HTML > Clique em F3 e digite na caixinha que apareceu, no topo da página isto:

]]></b:skin>

2 - E antes da tag, cole isto:

figure {
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0 10px 10px 0;
  -moz-transition: all 0.6s ease;
}
figcaption {
  position: absolute;
margin-bottom: 10px;
  background: #000000;
  background-color: #000000;
  color: #FFFFFF;
  padding: 3px 3px;
  opacity: 0;
  -webkit-transition: all 0.8s ease;
  -moz-transition:    all 0.8s ease;
  -o-transition:      all 0.8s ease;
}
figure:hover figcaption {
  opacity: 0.9;
}
figure:before {
  content: "?";
  position: absolute;
  font-weight: 800;
  background: #ff55a9;
  background: #ff55a9;
  text-shadow: 0 0 5px white;
  color: #FFF;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -moz-transition: all 0.6s ease;
  opacity: 0.75; }
figure:hover:before {
  opacity: 0;
}
.cap-left:before {  bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

Vamos entender:

  background: #000000;
  background-color: #000000;

 São o fundo da caixinha quando passa o mouse.

  color: #FFFFFF; 

Essa é a cor da letra da caxinha.

content: "?";

"?" é o que aparece dentro da bolinha logo no inicio. Troque por o que quiser.

 background: #ff55a9;
  background: #ff55a9; 

É a cor do fundo da bolinha.

color: #FFF;  

Cor do símbolo da bolinha.

3 - Para finalizar, adicione um gadget de HTML/Javascript e cole o seguinte nele: 

<figure class="cap-left">

<img src="LINK DA IMAGEM" alt="" />

<figcaption>TEXTO</figcaption>

</figure>

Pronto! Agora edite ao seu gosto e jeitinho ok? 

Espero que tenham gostado, pretendo postar mais coisas esta semana.

Aproveitem, que este efeito é lindo!

Beijos, Blair