Tuto: Efeito Caption

Postagem reescrita. Espero que gostem.

Olá chicletes de cereja. Hoje trouxe um efeito novo para vocês: Caption. Eu acho ele muito meigo e fica muito bom em elite para afiliados e para gadget de autoras. Para visualizar o efeito clique aqui [www] & vá ao gadget onde está escrito "Efeito Caption". Espero que gostem dele tanto quando eu :3


Abra seu HTML acho que não preciso ficar repetindo isso né? e dê F3. Procure pela tag ]]></b:skin>.
Acima dela cole esse código:

@font-face {font-family: "04b03"; src: url('http://static.tumblr.com/qbzesex/2tSm7y7gy/04b_03_.ttf'); format("truetype");}imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 2px 2px 0;}captioon {position: absolute; background: #000; color: #fff; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; text-align: center; line-height: 10px; font-size: 8px; font-family: "04b03", small-fonts; text-shadow: 1px 1px 3px #000;}imagem:hover captioon {opacity: 0.75;}imagem:hover:before {opacity: 0;}.caption:before {bottom: 10px; right: 10px;}.caption captioon {bottom: 3px; right: 30%;}.caption:hover captioon {right: 0px;}
Modifique as partes em negrito. Agora vá Layout e "crie" um gadget de HTML/Javascript. Nele cole o seguinte código:

<imagem class="caption"><img src="LINK DA IMAGEM" /><captioon>Legenda Aqui</captioon></imagem>
Modifique as partes em negrito e salve. 
Caso use-o dê os créditos ao TSD* e ao Kawaii World.

2 comentários:

  1. Oi amor, você me pediu afiliação faz um tempinho lá no blog. Na época não tínhamos vagas mas agora abriram 3, então dá uma olhadinha das regras ( http://me-ilumine.blogspot.com.br/p/afiliados.html ) e me coloca? já coloquei!

    -beijos

    ResponderExcluir