Efeito para autores

Yoo,  Boa noite ! Deu a louca na minha mãe, todo dia ela quer me tirar a internet para eu estudar, o pior é que eu não estudo mesmo e tiro notas baixas então não posso reclamar.
Bom, vou ensinar a colocar o efeito autores no seu blog
Espero que gostem ! Preview 
Créditos:  ♥ 


  Para adicionar esse efeito basta ir ate seu HTML, usando o atalho Ctrl+F procure por 
]]></b:skin>. Acima dessa tag, cole:

.view {cursor: pointer;height: ALTURApx;margin: 1px;overflow: hidden;position: relative;text-align: center;width: LARGURApx;display: inline-block;}.view img { /* a imagem */display: inline-block;position: relative;-moz-transition: all 0.6s ease-out;-webkit-transition: all 0.6s ease-out;-o-transition: all 0.6s ease-out;transition: all 0.6s ease-out;opacity: 1;filter: alpha(opacity=100);}.view:hover img { /* se "anima quando passamos o mouse em cima */-moz-transform: rotate(620deg) scale(0);-webkit-transform: rotate(620deg) scale(0);-o-transform: rotate(620deg) scale(0);-ms-transform: rotate(620deg) scale(0);transform: rotate(620deg) scale(0);opacity: 0;filter: alpha(opacity=0);}.view .mask {background-color: #CORDOFUNDO;height: ALTURApx;left: 0;position: absolute;overflow: hidden;top: 0;width: LARGURApx;-moz-transform: rotate(0deg) scale(1);-webkit-transform: rotate(0deg) scale(1);-o-transform: rotate(0deg) scale(1);-ms-transform: rotate(0deg) scale(1);transform: rotate(0deg) scale(1);-moz-transition: all 0.4s ease-out;-webkit-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;transition: all 0.4s ease-out;opacity: 0;filter: alpha(opacity=0);}.view:hover .mask {-moz-transform: translateY(0px) rotate(0deg);-webkit-transform: translateY(0px) rotate(0deg);-o-transform: translateY(0px) rotate(0deg);-ms-transform: translateY(0px) rotate(0deg);transform: translateY(0px) rotate(0deg);-moz-transition-delay: 0.4s;-webkit-transition-delay: 0.4s;-o-transition-delay: 0.4s;transition-delay: 0.4s;opacity: 1;filter: alpha(opacity=100);}.view h4 {background-color: #CORDAFAIXA;opacity: 0.8;color: #CORDOTÍTULO;text-align: center;position: relative;font-family: handy;text-transform: uppercase;font-size: 8px;margin: 9px 0 0 0;padding: 5px 0;-moz-transform: translateY(-200px);-webkit-transform: translateY(-200px);-o-transform: translateY(-200px);-ms-transform: translateY(-200px);transform: translateY(-200px);-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}.view:hover h4 { /* título é mostrado */-moz-transform: translateY(0px);-webkit-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-moz-transition-delay: 0.7s;-webkit-transition-delay: 0.7s;-o-transition-delay: 0.7s;transition-delay: 0.7s;}.view p { /* o texto permanece oculto */color: #fd0505;font-family: pf arma five;font-size: 8px;margin: 0;padding: 15px;position: relative;text-align: center;-moz-transform: translateY(-200px);-webkit-transform: translateY(-200px);-o-transform: translateY(-200px);-ms-transform: translateY(-200px);transform: translateY(-200px);-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}.view:hover p { /* texto é mostrado */-moz-transform: translateY(0px);-webkit-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-moz-transition-delay: 0.6s;-webkit-transition-delay: 0.6s;-o-transition-delay: 0.6s;transition-delay: 0.6s;}.view a.info { /* o link permanece oculto */background-color: #CORDOBOTÃO;border-radius: 5px;box-shadow: 0 0 2px #e4e2e5, 0 0 5px #e4e2e5 inset;color: #FFF;display: inline-block;padding: 2px 10px;text-decoration: none;margin-top: 8px;font-family: handy;font-size: 8px;-moz-transform: translateY(-200px);-webkit-transform: translateY(-200px);-o-transform: translateY(-200px);-ms-transform: translateY(-200px);transform: translateY(-200px);-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}.view a.info:hover {box-shadow: 0 0 5px #968ca3;}.view:hover a.info { /* link é mostrado */-moz-transform: translateY(0px);-webkit-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-moz-transition-delay: 0.5s;-webkit-transition-delay: 0.5s;-o-transition-delay: 0.5s;transition-delay: 0.5s;}
O cogido é grande, mas edite apenas oque está em negrito. Depois de tudo pronto, salve. Então vá ate seu Layout e abra um gadget de HTML/JavaScript, cole o seguinte:

<div class="view"><img src="URL DA FOTO" /><div class="mask"><h4>NOME</h4><a href="LINK" class="info">Visite!</a></div></div>

OBS: Se você baixou o nosso layout free ( Blue ) apenas  faça a segunda parte ! 
( adicione um HTML/ javaScript.. )

Espero que tenham gostado ! Beijos


4 comentários:

  1. Acho PERFEITO esse efeito e.e Adoro ele, e é super fácil, -qq

    ~ Kisses

    - 4 Seconds.

    ResponderExcluir
  2. Esse efeito é ótimo Para quem não trabalha sozinho no blog . Eu não uso pois trabalho sim sozinho no meu ;/
    www.umbranco.com.br

    ResponderExcluir