Efeitos Par Autores De Blog

Oiii Cupcakes De Morango Com Calda De Chocolate!

Como Vão? Espero Que Bem Bom O Noso Blog Estava Passando Por Dificuldades E Por Isso Fiz Outro Layout Não é Um Layout Tão Liindo Mais Para Mim TÁ Legal E Hoje Trago Um Tutorial De Varios Efeitos Para Autores Para Seu Blog Vamos Ver?

Efeito Autores

(Veja a preview aqui.):

1. Vá até editar HTML e procure por ]]></b:skin>. Acima dessa tag, cole o seguinte:

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

Como sempre, está em negrito as partes importantes a serem mudadas. Edite todas essas informações em negrito e depois salve. Não se assuste com o tamanho do código, não é difícil.

2. Em um gadget de HTML/JavaScript, cole o seguinte e salve:

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

Efeito Shine

(Clique aqui para ir até a preview e ver o efeito.)

1. Vá até editar HTML e procure por ]]></b:skin>. Acima dessa tag, cole:

.image_shine{    width:  LARGURApx;    height: ALTURApx;    margin-right: 5px;    margin-bottom: 5px;    position: relative;    float: left;    border: 3px solid #CORDABORDA;}.hover_shine{    width:115px; height: 115px;    background-image: url(http://i.minus.com/iuvzYDPlYu8RR.png);    position: absolute;    background-position: -265px 0;    left:0px; top:0px;    background-repeat:no-repeat;}.hover_shine:hover{    background-position: 10px 0;    -webkit-transition: background-position .9s ease;       -moz-transition: background-position .9s ease;         -o-transition: background-position .9s ease;            transition: background-position .9s ease;}

Edite, como sempre, as partes em negrito e depois salve. É claro que se você entender outra parte do código e quiser mudar, pode fazer como quiser. Estou apenas dando-lhes o mais importante.

2. Em um gadget de HTML/JavaScript, cole:

<div class="image_shine"><img src="LINK DA IMAGEM"/><a href="LINK" title="TITULO"><div class="hover_shine"></div></a></div> 

E

Efeito Nebulla

Clique aqui para ir até a preview do efeito.

1. Procure por ]]></b:skin> e acima dessa tag, cole o seguinte:

figure {    margin: 3px;    width: LARGURApx;    height: ALTURApx;    overflow: hidden;    position: relative;    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;}

Nesse código existe muita coisa a ser editada, mas destaquei apenas os mais importantes. Recomendo que a largura e altura sejam ambas 108px, pois se você mudar, vai ter que trocar o left e bottom da faixa. Após editar tudo que está em negrito, salve.

2. Em um gadget de HTML/JavaScript, cole:

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

Edite agora os códigos em negrito e em largura da foto coloque a mesma largura do código anterior. Salve e seu gadget estará pronto. Se houverem dúvidas, tirem pelos comentários.

Efeito Zooming

Para ver, cliquem aqui.

1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole:

#zooming {width:110px;height:110px;display: inline-block;
position:relative;} #zooming img {position:absolute;width:110px;height:110px;-webkit-transition-duration: .80s;} #zooming:hover img{ -webkit-transform:scale(1.5);
-moz-transform:scale(1.5); -o-transform:scale(1.5);
opacity:0.3;-webkit-transition-duration: .70s;} .zoomingout {float:center;width:110px;height:110px;
border: 2px solid #e4a2c7;
overflow:hidden;-webkit-transition-duration: .59s; } .zoomingout:hover {float:center;width:110px;height:110px;
border: 2px solid #e377b4;
overflow:hidden;-webkit-transition-duration: .59s; } #palavras a.header {
width:110px;height:110px;margin-left:-1px;opacity:1;margin-top:-0px;padding:4px;text-align: center;color:#bb4487;font-size: 10px;padding: 5px 2px 10px 2px ;
} #palavras {
width:110px;height:110px;margin-left:-1px;opacity:1;margin-top:-0px;padding:4px;text-align: center;color:#434343;font-size: 10px;padding: 5px 2px 10px 2px ;
}

O código é bem básico, não tem nem o que explicar. Vão editando até acharem as preferências que gostem.

2. Em um gadget de HTML/JavaScript, cole e edite como quiser:

div id="zooming" class="zoomingout"><img src="LINK DA SUA IMAGEM" class="image4" /><div id="palavras"><a href="link" class="header">TEXTO EM ROXO OU OUTRA COR</a><br />TEXTO TEXTO TEXTO</div></div> 

Pronto!!! Espero Que Gostem De Todos

E O Credito Da Postagem E Dos Codigo Vão Para O: Kawaii World