21 agosto 2013

Efeito Caption (Afiliados e Adm's)


Oiin >< gente hoje eu estava visitando o Kawaii Word e vi um tutorial muito bom e útil para aqueles blogs que várias pessoas postam.P ara ficar mais organizado e para os leitores poderem reconhecer quem está lá, sempre procuramos esses tipos,porém podem ser usados nos afiliados (Você Escolhe ^-^).Ao passar o mouse sobre a imagem, aparece uma legenda bem pequena e super fofa, pode ser usado em imagens pequenas e maiores também de qualquer tamanho.
Imagem tirada do blog Kawaii World
Vamos ao Tutorial ?
1. Vá até editar HTML e procure por ]]></b:skin>. Acima dessa tag que você encontrou, cole o seguinte:

@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;}

O 2 equivale ao espaço de imagem para imagem. O 000 equivale a cor do fundo da legenda. O fff representa a cor da fonte. Edite e salve.

2. Crie um gadget de HTML/JavaScript e nele, cole:

<imagem class="caption">
<img src="LINK DA IMAGEM" />
<captioon>Legenda Aqui</captioon></imagem>

Edite e salve.
Kissus ♥

4 comentários:

  1. Realmente é muito fofo! *0*
    Amei o tuto! :3
    Beijinhos!

    http://blogbecauseimagirl.blogspot.com.br/

    ResponderExcluir
  2. Dar um ar muito cute no blog.
    Fica muito lindo mesmo!
    Beijos!

    ResponderExcluir