Como Fazer um layout Parte 6 -Efeito afiliados, e autoras)

Oi Gente!
Estou ensinando em vários Tutoriais a colocar efeitos,etc no seu blog, agora vou mostrar aqui 1 efeito para autoras e 3 para afiliados, se fizer direitinho vai ficar lindinho >.<
Beijinhos Glamurosos!

Cole o seguinte código acima da tag  ]]></b:skin> :

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

Para usar o efeito, é só adicionar um gadget de HTML/Javascript e colar nele o código abaixo:

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

Créditos: Tutoriais Mrs
----------------------------------------------------------------------------------------------------------------------------------

Efeito Single:

Procure por ]]></b:skin> e acima dessa tag cole:

@-webkit-keyframes bubble { 25%   { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}50% { -webkit-transform: rotate(50deg); }}@-moz-keyframes bubble {25%   { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}50% { -webkit-transform: rotate(50deg); }}@-o-keyframes bubble {25%   { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}50% { -webkit-transform: rotate(50deg); }}@-ms-keyframes bubble {25%   { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);} 50% { -webkit-transform: rotate(50deg); }}
.bb{padding:1px;}.bb:hover{-webkit-animation: bubble 1s;-moz-animation: bubble 1s;-o-animation: bubble 1s;-ms-animation: bubble 1s;}

Depois abra o Java e cole:

<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="bb" /></a> 

Créditos: Chovendo Diamantes

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

Efeito igual ao do blog!

1- Vá em >> Modelo >> Editar HTML. Aperte CTRL+F ou F3 e procure por ]]></b:skin> .

E logo acima dessa tag cole o seguinte código:

/*** efeito shake por htmlstrew ***/@-webkit-keyframes shake {0%, 100% {-webkit-transform: translateX(0);}10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-3px);}20%, 40%, 60%, 80% {-webkit-transform: translateX(3px);}}.mamu {width:auto; margin-left:5px;}.mamu:hover {-webkit-animation: shake 1.3s;-moz-animation: shake 1.3s;-ms-animation: shake 1.3s;} 

2- Agora, adicione um gadget HTML/JavaScript e cole isso:

<a href="LINK" title="Nome"><img class="mamu" src="URL DA SUA IMAGEM" /></a><a href="LINK" title="Nome"><img class="mamu" src="URL DA SUA IMAGEM" /></a><a href="LINK" title="Nome"><img class="mamu" src="URL DA SUA IMAGEM" /></a><a href="LINK" title="Nome"><img class="mamu" src="URL DA SUA IMAGEM" /></a>

Créditos: DL

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

Efeito Nebulla (Fica Melhor para autoras)

Cole o seguinte código acima da tag  ]]></b:skin> :

border: 3px solid #CORDABORDA;    margin-right: 3px;    float: left;}figcaption {    font-family: verdana;    font-size: 11px;    position: absolute;    display: block;    width: 111px;    height: 20px;    left: 267px; bottom: 6px; text-align: center; color: #CORDAFONTE;    text-shadow: none; background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/78-1.png); border: 3px solid #CORDABORDADAFAIXA; line-height: 20px;    box-shadow: rgba(0,0,0,.5) 0 2px 8px; -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -o-transform: rotate(-45deg); transition-duration: 60s; -webkit-transition-duration: .60s;}figure:hover figcaption { left: 35px;bottom: 10px;}

Então, aonde desejar o efeito, cole o código abaixo:

<a href="SEULINK"><figure><img src="LINKDAFOTO" width="LARGURADAFOTO" alt=""/><figcaption>NOME</figcaption></figure></a>

Créditos: Tutoriais Mrs
----------------------------------------------------------------------------------------------------------------------------------
Efeito Autoras 2

No Blogger, vá em Design > Editar HTML. Tecle Ctrl F e procure por ]]> e em cima dele cole:

.equipe {

-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear; /* Efeito fade */-webkit-box-shadow: 0 0 .3em #000000; /* Sombra */filter:alpha(opacity=65); /* Opacidade */-moz-opacity:0.65;opacity:0.65;cursor: crosshair; /* Cursor */}.equipe:hover {-webkit-box-shadow: 0 0 .3em #000000; /* Sombra */-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear; /* Efeito fade */-webkit-border-radius: 72px; /* Bordas arredondadas */-moz-border-radius: 72px;border-radius: 72px;filter:alpha(opacity=100); /* Opacidade */-moz-opacity:1.0;opacity:1.0;cursor: crosshair; /* Cursor */}

Salve. Vá em layout > Adicione um gadget de HTML/ Javascript e cole nele o seguinte código:

<a href="URL DO PERFIL" target="_blank"><img src="IMAGEM 1" border="0" class="equipe" title="NOME 1"/></a> <a href="URL PERFIL 2" target="_blank"><img src="IMAGEM 2" border="0" class="equipe" title="NOME 2"/></a><a href="URL DO PERFIL 3" target="_blank"><img src="IMAGEM 3" border="0" class="equipe" title="NOME 3"/></a> <a href="URL DO PERFIL " target="_blank"><img src="IMAGEM 4" border="0" class="equipe" title="NOME 4"/></a>

 é isso meninas espero que gostem !!

Beijos e até mais :)

Créditos: Desabafos e Tutos