Efeito Backy do Destaque

Quem quiser ter este efeito para fazer alguma coisa, tanto para colocar seus afiliados, enfim... quem quiser usá-lo é só clicar em mais informações ^-^ ...

Vá no painel do seu blog > Modelo > Editar HTML > prosseguir. Agora procure (Ctrl+F) pela Tag ]]></b:skin> e acima dele, cole:

imagem2 {margin: 3px; width: 100px; height: 100px; overflow: hidden; position: relative; border: 3px solid #CORDABORDA;float: left;}
nome2 {position: absolute; display: block; width: 300px; height: 30px;
top: 30px; margin-left: -20px; opacity: 0; text-align: center; color: #CORDOTEXTO; background: #fff; -webkit-transition-duration: 0.8s; border-top: 3px solid #CORDABORDA; border-bottom: 3px solid #CORDABORDA; line-height: 4px; text-transform: uppercase ; -webkit-transform: rotate(-15deg); font-size: 14px; font-family: 'play'}
imagem2:hover nome2 { left: 20px; top: 60px; bottom: 5px; opacity: 1; width: 103px; height: 20px; line-height: 20px; -webkit-transform: rotate(0deg)}

Entendendo o código:

width: 100px; e height: 100px; : Este código que se encontra logo na primeira linha, é o valor da Largura e Altura.

Depois de editar seu código, vá até Layout > Adicionar um Gadget > HTML/Javascript e cole:

<a href="LINK"><imagem2><img src="LINK DA IMAGEM" width="100px" /> <nome2>ESCREVA O QUE QUISER</nome2></imagem2></a>

E prontinho ! ^^

 

 Créditos : x x x x