tag:blogger.com,1999:blog-65468039890495031132024-02-07T03:03:26.199-03:00Tutoriais EfeitosUnknownnoreply@blogger.comBlogger32125tag:blogger.com,1999:blog-6546803989049503113.post-64597813804879916022014-05-20T01:21:00.006-03:002014-05-20T01:28:43.385-03:00Efeito Lite<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxiwMqGqcxxcerntPNDh8BDNugGT4OfeFwd28RzgdMJHVtkEQ6YHJ4mWBG9zK9Tea5_EnHMkp6d-GaoSdBf08W86S_slzphHZTjG8LmeV862SZqzPbUI3lEBW4DBH8ajhMhWUBZtl5IEo/s1600/image+legal-5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxiwMqGqcxxcerntPNDh8BDNugGT4OfeFwd28RzgdMJHVtkEQ6YHJ4mWBG9zK9Tea5_EnHMkp6d-GaoSdBf08W86S_slzphHZTjG8LmeV862SZqzPbUI3lEBW4DBH8ajhMhWUBZtl5IEo/s1600/image+legal-5.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Trouxe mais um efeito muito fofo para afiliados, autores, fotos da sidebar... Encontrei</div>
<div class="separator" style="clear: both; text-align: center;">
este efeito no sempre-te-amando.tumblr.com e disponibilizo aqui no blogger.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://text-tutoriaisefeitos.blogspot.com.br/">Preview</a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
Copie o código abaixo e coloque antes da tag ]]></b:skin></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
.efeito{padding: 8px 7px 8px 7px; display: inline-block;background:#C87373;border-radius:0pxmargin-top: 70px; -webkit-transition:all 0.7s;} .efeito:hover{background:#F5F83E;font-size: 14px; color:#FFFFFF;-webkit-transform: rotate(360deg); border-radius: 5px;opacity:.0; border-radius: 50px;}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Mude onde tem: Background e Color.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Para fazer o efeito aparecer copie o código abaixo e cole no gadget HTML/JAVA SCRIPT</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
<div a href="LINK" class="efeito"></div>
<div style="text-align: center;">
<img src="URL DE SUA IMAGEM"/></div></div>
<div style="text-align: center;">
<div a href="LINK" class="efeito"></div>
<div style="text-align: center;">
<img src="URL DE SUA IMAGEM"/></div></div>
</blockquote>
<br />
<div style="text-align: center;">
Kissus
</div>
<div style="text-align: center;">
<br /></div>
</div>
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-6546803989049503113.post-67402647356493463912014-05-20T00:37:00.004-03:002014-05-20T01:22:12.394-03:00Efeito Ploft<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06hzvPxIeosEBau9Gy246lZMNctAEa9_QpFMV3cq2ogw87CdpKQaUMGiBpz0PTpv62Y6496KQf9w_zt5OrYGGe7-SxRtYPw3RCBRb65apWCBtzIFTA-mCsPUabLbcMmqHK6FylEqG-f0/s1600/imagem+larguinha.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06hzvPxIeosEBau9Gy246lZMNctAEa9_QpFMV3cq2ogw87CdpKQaUMGiBpz0PTpv62Y6496KQf9w_zt5OrYGGe7-SxRtYPw3RCBRb65apWCBtzIFTA-mCsPUabLbcMmqHK6FylEqG-f0/s1600/imagem+larguinha.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Meia noite e eu aqui sem sono, logo amanhã que vai ser um dia cheio de coisas para fazer.</div>
<div class="separator" style="clear: both; text-align: center;">
Bem pessoal, estava olhando tumblrs de html, me deparei com este efeito e pensei:</div>
<div class="separator" style="clear: both; text-align: center;">
meus amigos vão gostar, por isso disponibilizo para vocês. Encontrei este efeito no tumblr</div>
<div class="separator" style="clear: both; text-align: center;">
Revolution Html por Fabrício|solucionar.tumblr.com.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://text-tutoriaisefeitos.blogspot.com.br/">Preview</a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<strong><em>Para usa-lo:</em></strong> copie os códigos abaixo e cole antes da Tag ]]></b:skin></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq">
<span style="font-family: inherit;">@-webkit-keyframes spaceboots {</span><span style="font-family: inherit;">0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }<br /> </span><span style="font-family: inherit;">20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }</span><span style="font-family: inherit;">40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }</span><span style="font-family: inherit;">80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }</span><span style="font-family: inherit;">100% { -webkit-transform: translateY(700px); opacity: 0; }</span><span style="font-family: inherit;">}</span><span style="font-family: inherit;">.ploft:hover,</span><span style="font-family: inherit;">.ploft:focus {</span><span style="font-family: inherit;"> -webkit-animation-name: spaceboots;</span><span style="font-family: inherit;"> -webkit-animation-duration:<strong> 1.7s</strong>;</span><span style="font-family: inherit;"> -webkit-transform-origin:50% 50%;</span><span style="font-family: inherit;"> -webkit-animation-iteration-count: infinite;</span><span style="font-family: inherit;"> -webkit-animation-timing-function: linear;</span><span style="font-family: inherit;">}</span><span style="font-family: inherit;">.ploft{display: inline-block;padding-top: 50px;}</span></blockquote>
<span style="font-family: inherit;"><br /></span>
Não mexa em nada se não tive um conhecimento vasto em Css, então sabe o que eu negritei ? pois bem lá é a velocidade do efeito, é a unica coisa que você pode mexer a seu gosto se não tiver tanto conhecimento assim, lembre-se quando menor o numero mais rápido é o efeito!<br />
<br />
Para colocar em seu blog, pegue o código abaixo e coloque no gadget HTML/JAVA SCRIPT<br />
<div style="text-align: center;">
<blockquote class="tr_bq">
<a href="http://<strong>sua url"</strong>><img width="<strong>auto"</strong> height="<strong>auto"</strong> class="ploft" src="<strong>url da imagem"</strong>></a><br />
<a href="http://<strong>sua url"</strong>><img width="<strong>auto"</strong> height="<strong>auto"</strong> class="ploft" src="<strong>url da imagem"</strong>></a></blockquote>
</div>
<br />
<div style="text-align: center;">
Kissus</div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-6546803989049503113.post-79020914705912101112014-05-19T20:17:00.001-03:002014-05-20T00:38:03.709-03:00Efeito Flipping<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_agXiKQkE6owKZgto-zuzhr2sbZ-n-yP1uGQVfFWlCsFBhgxwj4mObd6XLfr6xXLuiHauVsYbISDJ7tHget0mZ_jaE2eA9yQC7-xt1790F_hIdouO97wHLSmlE5DyiaFkYRjZLCX7dEY/s1600/larguinha.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_agXiKQkE6owKZgto-zuzhr2sbZ-n-yP1uGQVfFWlCsFBhgxwj4mObd6XLfr6xXLuiHauVsYbISDJ7tHget0mZ_jaE2eA9yQC7-xt1790F_hIdouO97wHLSmlE5DyiaFkYRjZLCX7dEY/s1600/larguinha.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Trouxe mais um efeito fofo, <span style="text-align: left;">quando se passa o mouse a imagem dá uma<span style="color: #38761d;"> </span></span><u style="text-align: left;"><span style="color: #38761d;">viradinha</span></u><span style="text-align: left;">, só que essa é mais elaborada que as outras e isso faz ficar bem bonitinha em uma elite ou nas imagens que você desejar.Vi esse efeito no <span style="color: #134f5c;">Kawaii World.</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><span style="color: #134f5c;"><a href="http://text-tutoriaisefeitos.blogspot.com.br/">Preview</a></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><span style="color: #134f5c;"></span></span></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<b>1.</b> Vá até editar HTML e procure por <head>. Abaixo da tag, cole esse código:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
<link href='http://static.tumblr.com/0xqvkot/MdKmj9am9/flippingkw.css' media='screen' rel='stylesheet'/></blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>2.</b> Agora procure por ]]></b:skin> e acima, cole: </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq" style="text-align: center;">
.efeitoflipping{<br />
padding: 3px;<br />
}<br />
.efeitoflipping:hover{<br />
-webkit-backface-visibility: visible !important;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-animation-name: flipping;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-backface-visibility: visible !important;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-animation-name: flipping;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-o-backface-visibility: visible !important;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-o-animation-name: flippink;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>backface-visibility: visible !important;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>animation-name: flipping;<br />
-webkit-animation-duration: 1s;<br />
}</blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<b>3.</b> Por fim, em um gadget de HTML/JavaScript, cole este código e substitua com o que se pede:</div>
<div style="text-align: center;">
<br /></div>
<blockquote class="tr_bq" style="text-align: center;">
<a href="<b>LINK</b>" title="<b>Nome do blog</b>"><img src="<b>LINK DA IMAGEM</b>" class="efeitoflipping"/></a></blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Kissus</div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-36540547818580346802014-05-19T18:22:00.000-03:002014-05-19T18:24:53.187-03:00Efeito Four Shares <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7v6ZY1Sie2BifqNa-zTk-RNx2Ymfw71MNXX4K00W9O7UerWA-LF7mO5cVxGCfl7LCOO0CjxImW6fZRsA0CEzvivsUEQJPrL1DnI21kBcTLqGWa_luXbVx6EXWhBg8paQ5xP_BuEzeauQ/s1600/Image10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7v6ZY1Sie2BifqNa-zTk-RNx2Ymfw71MNXX4K00W9O7UerWA-LF7mO5cVxGCfl7LCOO0CjxImW6fZRsA0CEzvivsUEQJPrL1DnI21kBcTLqGWa_luXbVx6EXWhBg8paQ5xP_BuEzeauQ/s1600/Image10.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Trouxe um efeito interessante, ao passar o mouse sobre a imagem ela se divide em outros quatro quadradinhos e saem da tela, mostrando outra foto por baixo. Encontrei no <i>Designs 4 You </i></div>
<div class="separator" style="clear: both; text-align: center;">
<i><a href="http://text-tutoriaisefeitos.blogspot.com.br/">Preview</a></i></div>
<div class="separator" style="clear: both; text-align: center;">
<i></i></div>
<a name='more'></a><i><br /></i>
<div class="separator" style="clear: both; text-align: center;">
Primeiro vá até editar HTML e procure por ]]></b:skin> acima dessa tag, cole:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
Clique <a href="http://static.tumblr.com/0xqvkot/pi6mbfsbw/four_shares.txt">aqui</a> para visualizar o código.</div>
<div style="text-align: center;">
Clique <a href="http://static.tumblr.com/0xqvkot/GzXmbfsz4/entenda.png">aqui</a> se precisar entender o código. </div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Depois de personalizar, crie um gadget de HTML/JavaScript e nele, cole:</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Clique <a href="http://static.tumblr.com/0xqvkot/wCYmbftb6/htmljavascript.txt">aqui</a> para visualizar o código.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Troque <u>"Seu link"</u> pelo link que vai redirecionar a imagem. Também troque <u>"Link da Imagem Principal"</u> pela url da sua imagem sem passar o mouse.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Kissus</div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-84589660191262602802014-05-19T14:01:00.002-03:002014-05-19T14:08:38.049-03:00Efeito Tree<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiB-GiTTrf4_qiENCYeleTCVKfF3PMjpmFic6-P_S59NONjZz4s49M5uA4LZzwT_u9QEKbOga9HhvTYcc2v6l7mY2_KV0Bc_6eXeRpnpHckjlWeKKhwTCx7Pnck8qfPIlFNSkjAQ4CoA/s1600/larguinha7-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiB-GiTTrf4_qiENCYeleTCVKfF3PMjpmFic6-P_S59NONjZz4s49M5uA4LZzwT_u9QEKbOga9HhvTYcc2v6l7mY2_KV0Bc_6eXeRpnpHckjlWeKKhwTCx7Pnck8qfPIlFNSkjAQ4CoA/s1600/larguinha7-1.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Trouxe para vocês o tutorial do <b>efeito tree</b>, que para quem não conhece é aquele efeito</div>
<div class="separator" style="clear: both; text-align: center;">
onde ao passar o mouse a linha se movimenta e desaparece. Pode ser usado nos autores e afiliados do blog. Fonte <i>Kawaii World</i></div>
<div class="separator" style="clear: both; text-align: center;">
<i></i></div>
<a name='more'></a><i><br /></i><br />
<div class="separator" style="clear: both; text-align: center;">
<i></i></div>
<div id="comida">
<center>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://static.tumblr.com/0xqvkot/XWpmsgcou/1850.png" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://static.tumblr.com/0xqvkot/Oixmsgcpe/1854.png" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://static.tumblr.com/0xqvkot/XWpmsgcou/1850.png" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://static.tumblr.com/0xqvkot/Oixmsgcpe/1854.png" /></a>
</center>
</div>
Para usar este efeito em seu blog é muito fácil, copie o código abaixo e coloque no gadget</div>
<center>
HTML/JAVA SCRIPT</center>
<blockquote class="tr_bq">
<center>
<center>
<style></center>
</center>
<center>
<center>
#comida a img{</center>
</center>
<center>
<center>
width:auto;</center>
</center>
<center>
<center>
height:auto;</center>
</center>
<center>
<center>
display:inline;</center>
</center>
<center>
<center>
margin-right:2px;</center>
</center>
<center>
<center>
margin-left:1px;</center>
</center>
<center>
<center>
margin-top:1px;</center>
</center>
<center>
<center>
margin-bottom:1px;</center>
</center>
<center>
<center>
padding: 3px;</center>
</center>
<center>
<center>
background: #ffc0c0;</center>
</center>
<center>
<center>
border: 1px solid #ff8080;</center>
</center>
<center>
<center>
outline: solid 1px #fff;</center>
</center>
<center>
<center>
outline-offset: -5px;</center>
</center>
<center>
<center>
-moz-transition: all 0.5s ease-out;</center>
</center>
<center>
<center>
-webkit-transition: all 0.5s ease-out;</center>
</center>
<center>
<center>
-o-transition: all 0.5s ease-out;</center>
</center>
<center>
<center>
-ms-transition: all 0.5s ease-out;</center>
</center>
<center>
<center>
transition: all 0.5s ease-out;</center>
</center>
<center>
<center>
}</center>
</center>
<center>
<center>
#comida a:hover img{</center>
</center>
<center>
<center>
outline: solid 3px transparent;</center>
</center>
<center>
<center>
opacity: 0.5;</center>
</center>
<center>
<center>
outline-offset: -20px;</center>
</center>
<center>
<center>
}</center>
</center>
<center>
<center>
< /style></center>
</center>
<center>
<center>
< div id="comida"></center>
</center>
<center>
<center>
< center></center>
</center>
<center>
<center>
< a href="http://www.blogger.com/" title="Exemplo"> <img src="URL DA IMAGEM" /></a></center>
</center>
<center>
<center>
< a href="http://www.blogger.com/" title="Exemplo"> <img src="URL DA IMAGEM" /></a></center>
</center>
<center>
<center>
< /center></center>
</center>
<center>
<center>
< /div></center>
</center>
</blockquote>
<center>
<center>
</center>
<center>
Para mudar a cor da bordinha, basta trocar <b>#ffc0c0</b> pela cor da primeira borda (a mais grossa) e<b> #ff8080</b>pela cor da borda mais externa. Troque "<b>http://www.blogger.com/</b>" pelo link do blog que deseja e "<b>Exemplo</b>" pelo nome. O resto é só futucar e vocês irão aprender.</center>
<center>
</center>
<center>
Kissus</center>
<center>
</center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-76572402016928671522014-05-16T14:45:00.002-03:002014-05-19T11:21:06.591-03:00Efeito Autores Zooming<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXOKMxMbhcppjuhJkPPy784PgZopI24HiWkakGv3yFM4Piz36V0c9priY8TtOEh7Ht9qyb6UdCEjiy87tjHULp5JVLhm2VXmnBoUs1ii6cVYaH-Tp-4zzt0mCZ6CQAMzdMToP877tUzAc/s1600/larguinha+miley+cyrus-7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXOKMxMbhcppjuhJkPPy784PgZopI24HiWkakGv3yFM4Piz36V0c9priY8TtOEh7Ht9qyb6UdCEjiy87tjHULp5JVLhm2VXmnBoUs1ii6cVYaH-Tp-4zzt0mCZ6CQAMzdMToP877tUzAc/s1600/larguinha+miley+cyrus-7.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Trago um efeito super fofo para autores do blog. Vi esse efeito no <i>Kawaii Wolrd</i> e</div>
<div class="separator" style="clear: both; text-align: center;">
disponibilizo aqui para vocês.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<br />
<div class="zoomingout" id="zooming">
<img class="image4" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagens%20Avatar/tumblr_lmrpf8H05R1qgmdj7o1_500_thumb.jpg" />
<br />
<div id="palavras">
<a class="header" href="https://www.blogger.com/princesstutoriais.blogspot.com.br">Claudine Netto</a>
<br />
TEXTO TEXTO TEXTO</div>
</div>
<div class="zoomingout" id="zooming">
<img class="image4" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagens%20Avatar/avatarcoreanas3.gif" />
<br />
<div id="palavras">
<a class="header" href="https://www.blogger.com/princesstutoriais.blogspot.com.br">Claudine Netto</a>
<br />
TEXTO TEXTO TEXTO</div>
</div>
<div class="zoomingout" id="zooming">
<img class="image4" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagens%20Avatar/tumblr_lmrpf8H05R1qgmdj7o1_500_thumb.jpg" />
<br />
<div id="palavras">
<a class="header" href="https://www.blogger.com/princesstutoriais.blogspot.com.br">Claudine Netto</a>
<br />
TEXTO TEXTO TEXTO</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
Vá no seu design > Modelo > Editar HTML> Dê CTRL+F ou F3 e Procure por ]]></b:skin>. Quando achar cole acima dele <a href="http://static.tumblr.com/0xqvkot/L13md1be5/zooming.txt">este </a>código.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Agora crie uma gadget HTML e cole:</div>
<blockquote class="tr_bq">
<div style="text-align: center;">
< div id="zooming" class="zoomingout"><img src="LINK DA SUA IMAGEM" class="image4" /></div>
<div style="text-align: center;">
< div id="palavras"><a href="link" class="header">TEXTO EM ROXO OU OUTRA COR</a></div>
<div style="text-align: center;">
< br />TEXTO TEXTO TEXTO</div></div></div>
</blockquote>
<br />
<div style="text-align: center;">
Kissus </div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-39902774038098078022014-05-16T13:53:00.000-03:002014-05-16T14:03:39.691-03:00Efeito Gud<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk_T_xsRzjIeAB1JMoe18TQtIiNfuVRREBKvgQ-RnM8wBqXYQyq-LlM8lKVug4DXVTd3OiL5TZj15ZzacYxhyphenhyphenLN6DxgA1bZfX0XGz2OCBltfgxsBbvnewrSQfvCPtFZdhmW9ILCq5fMro/s1600/larguinhas-taylor+cole-04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk_T_xsRzjIeAB1JMoe18TQtIiNfuVRREBKvgQ-RnM8wBqXYQyq-LlM8lKVug4DXVTd3OiL5TZj15ZzacYxhyphenhyphenLN6DxgA1bZfX0XGz2OCBltfgxsBbvnewrSQfvCPtFZdhmW9ILCq5fMro/s1600/larguinhas-taylor+cole-04.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Olá pessoal, navegando pela net vi um efeito muito fofo no blog <i>Birthday Cake</i>, ele pode</div>
<div class="separator" style="clear: both; text-align: center;">
ser colocado em autores, afiliados, onde vocês imaginarem.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<center>
<img class="gud" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagens%20Afiliados/imagemparaafiliados4.png" style="text-align: left;" /></center>
<center>
</center>
<center>
No html de seu blog procure por <b style="font-family: Play; font-size: 13px; line-height: 15px; text-align: left;">]</b><b style="font-family: Play; line-height: 15px; text-align: left;">]></b:skin></b><b style="text-align: left;"> </b><span style="text-align: left;">quando encontrar coloque o</span></center>
<center>
<span style="text-align: left;">código abaixo logo acima desta tag.</span></center>
<center>
<span style="text-align: left;"><br /></span></center>
<center>
<blockquote class="tr_bq">
.gud {-webkit-transition-duration: .80s; -moz-transition-duration: .80s; -o-transition-duration: .80s; -ms-transition-duration: .80s; font-variant: small-caps; font-size: 12px; margin-bottom: 2px; cursor: normal;}<br />
.gud:hover {-webkit-transform: scale(0.7) rotate(-10deg); -moz-transform: scale(0.7) rotate(-10deg); -o-transform: scale(0.7) rotate(-10deg); -ms-transform: scale(0.7) rotate(-10deg); transform: scale(0.7) rotate(-10deg);}</blockquote>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both;">
Depois em um Gadget HTML/Javascript cole:</div>
<blockquote class="tr_bq">
< img src="URL da sua Imagem" class="gud"></blockquote>
Kissus </div>
</center>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-55485649786570711372014-05-15T22:44:00.005-03:002014-05-16T14:03:08.161-03:00Efeito Gota<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3FxfvNklC5A4yfCX7kegOXCTRJNMBZS0aats3XK9-hjqVoxxGXrvAKnn7kHsDmGYe74K6RubJnRBxYZAqMhvN4LMzvm8zafSzt8bRtycPhyphenhyphen6DP4mL4-eZ1TYJ8E6GMECO5y9dFTetvo/s1600/larguinhas-taylor+cole-01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3FxfvNklC5A4yfCX7kegOXCTRJNMBZS0aats3XK9-hjqVoxxGXrvAKnn7kHsDmGYe74K6RubJnRBxYZAqMhvN4LMzvm8zafSzt8bRtycPhyphenhyphen6DP4mL4-eZ1TYJ8E6GMECO5y9dFTetvo/s1600/larguinhas-taylor+cole-01.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Navegando pela blogosfera encontrei um efeito interessante no Garota no Mundo Html,</div>
<div class="separator" style="clear: both; text-align: center;">
ele se chama efeito gota, no hover a bordinha faz um formato de gota.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<center>
<a href="http://tutoriaisefeitos.blogspot.com/" target="blank" title="Claudine"><img class="gota" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagens%20Afiliados/imagemparaafiliados4.png" height="60" width="60" /></a></center>
<div class="separator" style="clear: both; text-align: center;">
Para colocar esse efeito em seu blog copie o código abaixo e coloque acima da</div>
<div class="separator" style="clear: both; text-align: center;">
tag <span style="background-color: white; font-family: Play; font-size: 13px; line-height: 15px; text-align: left;"><b>]]></b:skin></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<b style="text-align: left;"><br /></b></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
/** Efeito gota by gnmh **/<br />
.gota { background:#D4E3E8;border:solid 3px #AC99BA;box-shadow: inset 0 0 6px #DFC7E6, 0px 1px 1px #D7BCE0;border-radius:50px 50px 0px 50px;-webkit-transition-duration: .90s;opacity:0.7;}<br />
.gota:hover {border-radius:0px 50px 50px 50px;-webkit-transition-duration: .90s;background:#D9CEE3;border: solid 3px #BECEDC;box-shadow: inset 0 0 6px #D4E3E8, 0px 1px 1px #D4E3E8; }</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Para aparecer em seu blog coloque o código abaixo no gadget HTML/JAVA SCRIPT</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
<a href="LINK"target="blank" title="Nome"><img src="IMAGEM"width="60" height="60" class = "gota" /></a></blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Kissus</div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-17870814359273268082014-05-15T21:28:00.002-03:002014-05-15T21:42:45.466-03:00Efeito Pulsar<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu0jOf5TR8yu3n5UILqMqV_fnqONaomGFGHfz4zclsCHzxXxwm-wWutbISfwWFpgnin7pAiV6jzwtwyujGxJOjtYI4UXhMN1Axh77LtDvcEzhxptx7u1qivcYysWxAWFF39F2KeosbIU4/s1600/larguinhas-taylor+cole-02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu0jOf5TR8yu3n5UILqMqV_fnqONaomGFGHfz4zclsCHzxXxwm-wWutbISfwWFpgnin7pAiV6jzwtwyujGxJOjtYI4UXhMN1Axh77LtDvcEzhxptx7u1qivcYysWxAWFF39F2KeosbIU4/s1600/larguinhas-taylor+cole-02.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Você vai aprender a colocar aquele efeito fofo que quando passa o mouse em
cima </div>
<div class="separator" style="clear: both; text-align: center;">
começa a pulsar. Encontrei esse efeito no<i> kawaii world.</i></div>
<div class="separator" style="clear: both; text-align: center;">
<i></i></div>
<a name='more'></a><i><br /></i>
<br />
<center>
<img src="http://static.tumblr.com/5dbytsa/fDAmcgq6i/ola.png" class="bass" />
</center>
<br />
<div class="separator" style="clear: both; text-align: center;">
No html de seu blog procure por<span style="font-family: Verdana, sans-serif; line-height: 15px; text-align: left;"> </span><span style="font-family: inherit; line-height: 15px; text-align: left;">]]></b:skin>, quando encontrar</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit; line-height: 15px; text-align: left;">coloque o código abaixo antes dessa tag:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit; line-height: 15px; text-align: left;"><br /></span></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
<span style="font-family: inherit;"><span style="background-color: white;"><span style="line-height: 14px;">.bass{</span></span><span style="background-color: white;"><span style="line-height: 14px;">max-width:74px;</span></span><span style="background-color: white;"><span style="line-height: 14px;">margin:1px;</span></span><span style="background-color: white;"><span style="line-height: 14px;">border-radius:10px;</span></span><span style="background-color: white;"><span style="line-height: 14px;">-webkit-transition: all 0.4s linear;-moz-transition:
all </span></span></span><span style="background-color: white;"><span style="line-height: 14px;"><span style="font-family: inherit;"><br /></span></span></span><span style="font-family: inherit;"><span style="background-color: white;"><span style="line-height: 14px;">0.4s linear;transition: all 0.4s linear;</span></span><span style="background-color: white;"><span style="line-height: 14px;">}</span></span><span style="background-color: white;"><span style="line-height: 14px;">.bass:hover{</span></span><span style="background-color: white;"><span style="line-height: 14px;">-webkit-animation: smallToBig 300ms alternate infinite<br />
</span></span></span><span style="background-color: white;"><span style="line-height: 14px;"><span style="font-family: inherit;"><br /></span></span></span><span style="font-family: inherit;"><span style="background-color: white;"><span style="line-height: 14px;">ease;-moz-animation: smallToBig 300ms alternate infinite
ease;</span></span><span style="background-color: white;"><span style="line-height: 14px;">}</span></span></span></blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Para fazer aparecer em seu blog coloque o código abaixo no gadget HTML/JAVA SCRIPT</div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 14px;"><br /></span></span></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 14px;"><img
src="URL DE SUA IMAGEM AQUI"</span> </span><span style="background-color: white; font-family: inherit; line-height: 14px;">class="bass"
/></span></blockquote>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; font-family: inherit; line-height: 14px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
Kissus</div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-19816668318324439682014-05-15T20:31:00.003-03:002014-05-15T21:18:02.363-03:00Efeito Zoom<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDDqD4ZS8H6yiqfXa1TTtv-eLb5Orc3RJoudb5pKWRDvdkTg-SSHSJ6kaA2Mc-Q-utQN0iLlzs0klfZo5R66IqU8HfCaMa9XhTYtaDn2RN7whc56DvtdCxMu6Qg0Zx9spVvyBveUdBJk/s1600/larguinhas-taylor+cole.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDDqD4ZS8H6yiqfXa1TTtv-eLb5Orc3RJoudb5pKWRDvdkTg-SSHSJ6kaA2Mc-Q-utQN0iLlzs0klfZo5R66IqU8HfCaMa9XhTYtaDn2RN7whc56DvtdCxMu6Qg0Zx9spVvyBveUdBJk/s1600/larguinhas-taylor+cole.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Esse efeito pode ser colocado na elite afiliados (é necessário editar à largura) ou quem sabe </div>
<div class="separator" style="clear: both; text-align: center;">
uma galeria de imagens? (pra quem tem portfólio é excelente).</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><center>
<br /></center>
<center>
<img class="zoom" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagens%20Afiliados/imagemparaafiliados3.png" style="text-align: left;" /></center>
<br />
<div class="separator" style="clear: both; text-align: center;">
Coloque o código abaixo antes da tag ]]></b:skin></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
/* Efeito Zoom */ img.zoom {display:block; <b>width:<span style="color: #073763;">200</span>px</b>; -webkit-transition-duration: .3s; border:<span style="color: #073763;"><b>5px solid #EEE</b></span>; position:relative;} img.zoom:hover {-webkit-transform: scale(2.00); transform:: scale(2.00); -o-transform: scale(2.00); -moz-transform: scale(2.00); -ms-transform: scale(2.00); z-index:5;}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Edite a largura, e a borda</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
sempre que quiser usar o efeito zoom adicione o próximo código como HTML javascript </div>
<div class="separator" style="clear: both; text-align: center;">
e coloque a url da sua imagem no local indicado</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
<img src="URL DA SUA IMAGEM AQUI" class="zoom"></blockquote>
<div class="separator" style="clear: both; text-align: center;">
Kissus</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-28365930368229653762014-05-15T19:55:00.003-03:002014-05-15T20:10:14.582-03:00Efeito esconder/revelar conteúdo na postagem<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiKdFYPBYvSDPe12McoSmss1dPxetLJ9eAT8weEv0ird30Wla-7pHpkv46bGmcJ6_iDFyRSsiTAKID9Cn8O8tgvQ-sy3oY5vQFGAy4XWZTNTkkBB-sqTHsB3nYyoOjgwaIBesVfyGkxg4/s1600/larguinhas-taylor+cole-03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiKdFYPBYvSDPe12McoSmss1dPxetLJ9eAT8weEv0ird30Wla-7pHpkv46bGmcJ6_iDFyRSsiTAKID9Cn8O8tgvQ-sy3oY5vQFGAy4XWZTNTkkBB-sqTHsB3nYyoOjgwaIBesVfyGkxg4/s1600/larguinhas-taylor+cole-03.png" /></a></div>
<div style="text-align: center;">
Trago para vocês um efeito super legal que encontrei no <a href="https://www.blogger.com/"><span id="goog_716183300"></span>Mundo Blogger<span id="goog_716183301"></span></a>.<br />
É fácil e fica com um efeito incrível. <span style="font-family: inherit;">Quem desenrola mais no<span style="background-color: white;"> HTML</span> também pode usar este efeito </span><br />
<span style="font-family: inherit;">na barra lateral em algum Gadget.</span><br />
<a name='more'></a><br />
<br />
<div id="box-toggle">
<div class="tgl">
EXEMPLO DE CONTEÚDO OCULTO</div>
</div>
<span style="font-family: inherit; text-align: left;"><br /></span>
<span style="font-family: inherit; text-align: left;">No html de seu blog, coloque o código abaixo logo acima da tag<b> </b></span><span style="background-color: white; line-height: 18px;"><span style="font-family: inherit;"><b>]]&gt;&lt;/b:skin&gt; </b></span></span><br />
<div style="text-align: left;">
<span style="background-color: white; line-height: 18px; text-align: center;"><span style="font-family: inherit;"><br /></span></span></div>
<blockquote class="tr_bq" style="text-align: left;">
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">#box-toggle {</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"></span><br />
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">margin:0 auto;</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"></span>
<br />
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">}</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"></span>
<br />
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">#box-toggle .tgl {</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"></span>
<br />
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">margin-bottom:20px;</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"></span>
<br />
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">}</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"></span>
<br />
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">#box-toggle span {</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"></span>
<br />
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">display:block;</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"></span>
<br />
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">cursor:pointer;</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"></span>
<br />
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">font-weight:bold;</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"></span>
<div style="text-align: center;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">font-size:14px; /* edite fonte */</span></div>
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;">
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"><div style="text-align: center;">
color:#3D81EE; /* edite cor do link */</div>
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"><div style="text-align: center;">
margin-top:15px;</div>
</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; white-space: pre;"><div style="text-align: center;">
}<span style="background-color: transparent;"> </span></div>
</span></blockquote>
<div style="text-align: left;">
<br /></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="line-height: 18px;"><span style="background-color: white;">Agora Procure pela tag</span><span style="background-color: white; color: #666666;"> </span><span style="background-color: white;"><b>&lt;/head&gt;</b></span><span style="background-color: white; color: #666666;"> </span><span style="background-color: white;">e cole o seguinte código <b>antes</b> dela:</span></span> </span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="line-height: 18px;"><span style="background-color: white;"><br /></span></span></span></div>
<blockquote class="tr_bq" style="text-align: justify;">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">&lt;!--ScriptjQuery Toggle revelar esconder Inicio --&gt;</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">&lt;script type="text/javascript"&gt;</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">jQuery.fn.toggleText = function(a,b) {</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">}</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">$(document).ready(function(){</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">$('.tgl').before('&lt;span&gt;[Ver Conteúdo]&lt;/span&gt;');</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">$('.tgl').css('display', 'none')</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">$('span', '#box-toggle').click(function() {</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">$(this).next().slideToggle('slow')</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">.siblings('.tgl:visible').slideToggle('fast');</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">$(this).toggleText('Revelar','Esconder')</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">.siblings('span').next('.tgl:visible').prev()</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">.toggleText('Revelar','Esconder')</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">});</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">})</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">&lt;/script&gt;</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">&lt;!--ScriptjQuery Toggle revelar esconder Final--&gt;</span> </blockquote>
<div style="text-align: justify;">
<br /></div>
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<span style="background-color: white; color: #666666; line-height: 18px;"><span style="font-family: inherit;">Quando for utilizar este efeito é necessário colar o código abaixo na aba HTML do post. Agora volte para a aba escrever e continue o post na parte que ficará oculta!</span></span></div>
</div>
<div class="caixa8">
<br />
<blockquote class="tr_bq">
<span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">&lt;div id="box-toggle"&gt;</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">&lt;div class="tgl"&gt;</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">Coloque aqui o conteúdo que ficará Oculto</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">&lt;/div&gt;</span><span style="background-color: white; font-family: monospace; font-size: 12px; line-height: 16px; text-align: left; white-space: pre;">&lt;/div&gt;</span> </blockquote>
</div>
<div class="caixa8">
<br /></div>
<div class="caixa8">
Kissus</div>
<div class="caixa8">
<br /></div>
<span style="background-color: orange; font-family: Arial, Helvetica, sans-serif;"> </span><span style="color: #666666; font-family: Arial, Helvetica, sans-serif;"></span></div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-17562139098885794542014-05-15T19:28:00.000-03:002014-05-15T19:31:58.876-03:00Efeito Nebulla<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAiAZAWKGpFCyBkBTu93XsvHC1BI-XnuQ5-hYAdq8j_R2Y0F3ZYcrikqYF2Pry1bIyKCmTuZ91EBawPXPRnujQ2IvxVwfGWA-3wIci7SldwKmzf3K9SYsaROZimbSwF5ewaQ7jiZv7wXo/s1600/larguinhas-miley+cirus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAiAZAWKGpFCyBkBTu93XsvHC1BI-XnuQ5-hYAdq8j_R2Y0F3ZYcrikqYF2Pry1bIyKCmTuZ91EBawPXPRnujQ2IvxVwfGWA-3wIci7SldwKmzf3K9SYsaROZimbSwF5ewaQ7jiZv7wXo/s1600/larguinhas-miley+cirus.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Trouxe um efeito que acho lindo. Você pode colocá-lo tanto nos autores quanto</div>
<div class="separator" style="clear: both; text-align: center;">
nos afiliados do blog.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gLvyzjiieAThPXLh-QGoJbp9QE0RS4V3igUpU8DfMtGfDaWk7mGei_qxFhw2UuXIWUu1e7ueex90nDBfrWyRy3KaOT06PtXA7D1RSf40a_AkaUASN6QWrGOAp5HLSCIAFFMix6ofIxI/s1600/efeito+nebula.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gLvyzjiieAThPXLh-QGoJbp9QE0RS4V3igUpU8DfMtGfDaWk7mGei_qxFhw2UuXIWUu1e7ueex90nDBfrWyRy3KaOT06PtXA7D1RSf40a_AkaUASN6QWrGOAp5HLSCIAFFMix6ofIxI/s1600/efeito+nebula.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Para colocar o efeito em seu blog, pegue o código abaixo e coloque acima da tag <span style="text-align: left;"><span style="color: #c27ba0;">]]><\b:skin></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><span style="color: #c27ba0;"><br /></span></span></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
<span style="background-color: white;"><span style="font-family: inherit;"><span lang="EN-US"><span style="color: #5c5c5c;">figure { margin: 3px; width:</span><span class="apple-converted-space"> </span></span><b style="-webkit-transition: 0.7s;"><span lang="EN-US">LARGURA</span></b><span lang="EN-US" style="color: #5c5c5c;">px; height:<span class="apple-converted-space"> </span></span><b style="-webkit-transition: 0.7s;"><span lang="EN-US">ALTURA</span></b><span lang="EN-US" style="color: #5c5c5c;">px; overflow: hidden; position: relative; border: 3px solid #</span><b style="-webkit-transition: 0.7s;"><span lang="EN-US">CORDABORDA</span></b><span lang="EN-US" style="color: #5c5c5c;">; margin-right: 3px; float: left;}figcaption { font-family: verdana; font-size: 11px; position: absolute; display: block; width: 111px; height: 20px; left: 267px;</span><span class="apple-tab-span"><span lang="EN-US" style="color: #5c5c5c;"> </span><span lang="EN-US"></span><span style="color: #444444;">bottom: 6px;</span></span><span style="color: #444444;"><span class="apple-tab-span"><span lang="EN-US"> </span><span lang="EN-US"></span>text-align: center;</span><span class="apple-tab-span"><span lang="EN-US"> </span><span lang="EN-US"></span>color: #</span><b style="-webkit-transition: 0.7s;"><span lang="EN-US">CORDAFONTE</span></b><span lang="EN-US">; text-shadow: none;</span><span class="apple-tab-span"><span lang="EN-US"> </span><span lang="EN-US"></span>background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/78-1.png);</span></span><span class="apple-tab-span"><span style="color: #444444;"><span lang="EN-US"> </span><span lang="EN-US"></span>border: 3px solid </span>#</span><b style="-webkit-transition: 0.7s;"><span lang="EN-US">CORDABORDADAFAIXA</span></b><span lang="EN-US" style="color: #5c5c5c;">;</span><span style="color: #444444;"><span class="apple-tab-span"><span lang="EN-US"> </span><span lang="EN-US"></span>line-height: 20px; box-shadow: rgba(0,0,0,.5) 0 2px 8px;</span><span class="apple-tab-span"><span lang="EN-US"> </span><span lang="EN-US"></span>-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg);</span><span class="apple-tab-span"><span lang="EN-US"> </span><span lang="EN-US"></span>transition-duration: 60s;-webkit-transition-duration: .60s;}figure:hover figcaption {</span><span class="apple-tab-span"><span lang="EN-US"> </span><span lang="EN-US"></span>left: 35px;bottom: 10px;}</span></span></span></span></blockquote>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><span style="font-family: inherit;"><span style="color: #444444;"><span class="apple-tab-span"><br /></span></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit;">Edite oque está em preto. RECOMENDO que a largura e a altura sejam ambas 108px, pois se você mudar precisara mudar o left e o botton da faixa. Após editar tudo, salve.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><span style="font-family: inherit;"><span class="apple-tab-span">Para fazer o efeito funcionar pegue o código abaixo e coloque no gadget HTML/JAVA SCRIPT</span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><span style="font-family: inherit;"><span class="apple-tab-span"><br /></span></span></span></div>
<blockquote class="tr_bq" style="text-align: center;">
<span style="background-color: white;"><span style="font-family: inherit;"><span lang="EN-US" style="color: #5c5c5c;"><a href="</span><b style="-webkit-transition: 0.7s;"><span lang="EN-US" style="color: #ff6c92;"><i>SEULINK</i></span></b><span lang="EN-US" style="color: #5c5c5c;">"><figure><img src="</span><b style="-webkit-transition: 0.7s;"><span lang="EN-US" style="color: #ff6c92;"><i>LINKDAFOTO</i></span></b><span lang="EN-US" style="color: #5c5c5c;">" width="</span><b style="-webkit-transition: 0.7s;"><span lang="EN-US" style="color: #ff6c92;"><i>LARGURADAFOTO</i></span></b><span lang="EN-US" style="color: #5c5c5c;">" alt=""/></span><span lang="EN-US" style="color: #5c5c5c;"><figcaption></span><b style="-webkit-transition: 0.7s;"><span lang="EN-US" style="color: #ff6c92;"><i>NOME</i></span></b><span lang="EN-US" style="color: #5c5c5c;"></figcaption></span><span lang="EN-US" style="color: #5c5c5c;"></figure></a></span></span></span></blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: inherit;">Edite, e em largura e altura coloque os mesmo do código anterior.</span><br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: inherit;">Salve e estará pronto. </span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit;">Kissus</span></div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-12944421845101349922014-05-15T11:52:00.000-03:002014-05-15T19:31:30.072-03:00Efeito Caption<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2erqC59RuRDk0gjI0X_8H8-62J2YvXn-fzE9NJuMknFkAa3KPFGPFjjHgZz3E0dnH901qMDpev5czDEQ6TDIWTTS0LxtHZ8krkT1sNrOJ3pLI6vLviWWpqGwtxM25lVyfNMIv1zeH2og/s1600/imagem+larguinha-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2erqC59RuRDk0gjI0X_8H8-62J2YvXn-fzE9NJuMknFkAa3KPFGPFjjHgZz3E0dnH901qMDpev5czDEQ6TDIWTTS0LxtHZ8krkT1sNrOJ3pLI6vLviWWpqGwtxM25lVyfNMIv1zeH2og/s1600/imagem+larguinha-3.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Trouxe um <b>tutorial</b> muito lindo que vi no <span style="color: #c27ba0;">Cantinho HTML</span>. O efeito é assim, quando você passa </div>
<div class="separator" style="clear: both; text-align: center;">
o <i>mouse</i> sobre um foto aparece um <b>legenda</b> muito fofa. Fica maravilhoso na elite de afiliados. </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPED7Ua25Nkr4PUjZq0eFjrAqgM75rj1hkBcXoxLeBa0hXCW1gjCNJV5vtchH8kTtiLl5N8DFUmn5LKzFYda2uFDUJaQQO7Emrsu6dbF5G-K5GBJLxGX-CTuWHGTrM8agyLYIdTmR4N1c/s1600/efeito+caption.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPED7Ua25Nkr4PUjZq0eFjrAqgM75rj1hkBcXoxLeBa0hXCW1gjCNJV5vtchH8kTtiLl5N8DFUmn5LKzFYda2uFDUJaQQO7Emrsu6dbF5G-K5GBJLxGX-CTuWHGTrM8agyLYIdTmR4N1c/s1600/efeito+caption.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
No seu HTML e procure por <span style="background-color: white; color: #92947a; font-family: tahoma; font-size: 11px; line-height: 15px; text-align: center;"> </span><span style="background-color: white; line-height: 15px; text-align: center;"><span style="font-family: inherit;"><b>]]></b:skin></b> acima dessa tag, coloque:</span></span></div>
<blockquote class="tr_bq" style="line-height: 15px;">
<blockquote class="tr_bq" style="text-align: left;">
<div style="text-align: center;">
@font-face {font-family: "04b03"; src: url('http://static.tumblr.com/qbzesex/2tSm7y7gy/04b_03_.ttf'); format("truetype");}</div>
<div style="text-align: center;">
imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 <b>2</b>px 2px 0;}</div>
<div style="text-align: center;">
captioon {position: absolute; background: <b>#000</b>; color: <b>#fff</b>;
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;}</div>
<div style="text-align: center;">
imagem:hover captioon {opacity: 0.75;}</div>
<div style="text-align: center;">
imagem:hover:before {opacity: 0;}</div>
<div style="text-align: center;">
.caption:before {bottom: 10px; right: 10px;}</div>
<div style="text-align: center;">
.caption captioon {bottom: 3px; right: 30%;}</div>
<div style="text-align: center;">
.caption:hover captioon {right: 0px;}</div>
</blockquote>
</blockquote>
<br />
<span style="line-height: 15px; text-align: center;">O </span><b style="line-height: 15px; text-align: center;">2 </b><span style="line-height: 15px; text-align: center;">é o tamanho do espaço entre um imagem e outra. O </span><b style="line-height: 15px; text-align: center;">000</b><span style="line-height: 15px; text-align: center;">,</span><b style="line-height: 15px; text-align: center;"> </b><span style="line-height: 15px; text-align: center;">é a cor do fundo da legenda. O </span><b style="line-height: 15px; text-align: center;">fff</b><span style="line-height: 15px; text-align: center;">, representa a cor da fonte. Altere e salve.</span><br />
<span style="line-height: 15px; text-align: center;"><br /></span>
<span style="line-height: 15px; text-align: center;"><br /></span>
<br />
<div style="line-height: 15px;">
<div style="text-align: center;">
</div>
</div>
<div style="line-height: 15px; text-align: left;">
Crie um gadget HTML/Javascript e nele, cole:</div>
<div style="text-align: center;">
</div>
<div class="separator" style="clear: both;">
</div>
<blockquote class="tr_bq">
<blockquote class="tr_bq" style="text-align: center;">
<span style="line-height: 15px;"><imagem class="caption"></span><span style="line-height: 15px;"><img src="<b>LINK DA IMAGEM</b>" /></span><span style="line-height: 15px;"><captioon><b>Legenda Aqui</b></captioon></imagem></span></blockquote>
</blockquote>
<div style="text-align: center;">
Kissus</div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-25459671470030929142014-05-14T21:25:00.002-03:002014-05-15T19:32:05.920-03:00Efeito fofo para equipe ou afiliados<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin84UDqsBcD202r_mJD-YRGG_4Me2HI_wNN3PL9mgkn_fDJPbuPjBxJDb914tlQXyvC3O7UDmBz7u_5Zim0pvFNatqE5yNecf2b4lSskvNtWHPsEgiH7wJ_Hs9s0nSi3fwt2gbFSUfuMw/s1600/imagem+larguinha.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin84UDqsBcD202r_mJD-YRGG_4Me2HI_wNN3PL9mgkn_fDJPbuPjBxJDb914tlQXyvC3O7UDmBz7u_5Zim0pvFNatqE5yNecf2b4lSskvNtWHPsEgiH7wJ_Hs9s0nSi3fwt2gbFSUfuMw/s1600/imagem+larguinha.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Olá Pessoal, trago para vocês um efeito muito fofo que pode ser utilizado tanto nas</div>
<div class="separator" style="clear: both; text-align: center;">
autoras quanto nos afiliados do blog. Créditos <span style="color: #c27ba0;"><a href="http://isjackiezzdream.blogspot.com.br/2013/01/efeito-na-equipe-do-blog.html">x</a></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #c27ba0;"></span></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
Primeiro Você precisa de duas imagens</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYD_g34rRP_5pH66CkZdPQ24Ot5F2HkkCyPj7rCDD7oiIYQ5t6Ra62tZxrJgq8QO6hs-zNIlNDcI0jOTUh0JCpw8XTOX-g6V1Nm3Sci4TMdCOcChk9wvQkxfXb0ZDtxFaXlKjSIB8dUw/s1600/uZsRW.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYD_g34rRP_5pH66CkZdPQ24Ot5F2HkkCyPj7rCDD7oiIYQ5t6Ra62tZxrJgq8QO6hs-zNIlNDcI0jOTUh0JCpw8XTOX-g6V1Nm3Sci4TMdCOcChk9wvQkxfXb0ZDtxFaXlKjSIB8dUw/s1600/uZsRW.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Imagem Normal</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN83E1LwtHrhMIjd_MnqAfjhdBSH9Mm41zdSIzipqgVLy2T4bBkQBy3tx-fVprrxOqrePaFa2r_uUyq_DUWu-sMpodoEHgSdqpZdKu9d275YYXzhWU45eEySJiTpXp-TgG3w8eiDU18WE/s1600/uZsRW-1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN83E1LwtHrhMIjd_MnqAfjhdBSH9Mm41zdSIzipqgVLy2T4bBkQBy3tx-fVprrxOqrePaFa2r_uUyq_DUWu-sMpodoEHgSdqpZdKu9d275YYXzhWU45eEySJiTpXp-TgG3w8eiDU18WE/s1600/uZsRW-1.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Imagem em hover</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
<span class="">No html de seu blog, coloque o código abaixo logo acima de </span><span style="background-color: white;"><span style="color: #c27ba0;"><span class=""> ]]> </ b: skin></span></span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;"><span style="color: #c27ba0;"><span class=""><br /></span></span></span></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<span style="background-color: white;">.slide-up-boxes {width: 133px; display: inline-block; margin-left: 6px;}</span><span style="background-color: white;">.slide-up-boxes a {</span><span style="background-color: white;">display: block;</span><span style="background-color: white;">margin: 0 0 0px 0;</span><span style="background-color: white;">background: #fff;</span><span style="background-color: white;">height: 98px;</span><span style="background-color: white;">margin-bottom: 5px;</span><span style="background-color: white;">overflow: hidden;</span><span style="background-color: white;">text-decoration: none;</span><span style="background-color: white;">box-shadow: 0 5px 2px -2px rgba(0,0,0,0.11);}</span><span style="background-color: white;">.slide-up-boxes h5 {</span><span style="background-color: white;">color: #937560;</span><span style="background-color: white;">text-align: center;</span><span style="background-color: white;">height: 109px;</span><span style="background-color: white;">text-shadow: 1px 1px 0px #eee;</span><span style="background-color: white;">letter-spacing: 5px;</span><span style="background-color: white;">text-transform: uppercase;</span><span style="background-color: white;">font: normal 11px/104px Arial;</span><span style="background-color: white;">opacity: 1;</span><span style="background-color: white;">-webkit-transition: all 0.2s linear;</span><span style="background-color: white;">-moz-transition: all 0.2s linear;</span><span style="background-color: white;">-o-transition: all 0.2s linear;</span><span style="background-color: white;">}</span><span style="background-color: white;">.slide-up-boxes a:hover h5 {</span><span style="background-color: white;">margin-top: -114px;</span><span style="background-color: white;">opacity: 0;}</span><span style="background-color: white;">.slide-up-boxes div</span><span style="background-color: white;">{position: relative;</span><span style="background-color: white;">color: #fff;</span><span style="background-color: white;">height: 114px;</span><span style="background-color: white;">padding: 5px;</span><span style="background-color: white;">opacity: 0;</span><span style="background-color: white;">-webkit-transform: rotate(6deg);</span><span style="background-color: white;">-webkit-transition: all 0.4s linear;</span><span style="background-color: white;">-moz-transform: rotate(6deg);</span><span style="background-color: white;">-moz-transition: all 0.4s linear;</span><span style="background-color: white;">-o-transform: rotate(6deg);</span><span style="background-color: white;">-o-transition: all 0.4s linear;</span><span style="background-color: white;">text-decoration: none;}</span><span style="background-color: white;">.slide-up-boxes a:hover div {opacity: 1;</span><span style="background-color: white;">-webkit-transform: rotate(0);</span><span style="background-color: white;">-moz-transform: rotate(0);</span><span style="background-color: white;">-o-transform: rotate(0);}</span></blockquote>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;">Para visualizar em seu blog, coloque o código abaixo no gadget HTML/JAVA SCRIPT</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;"><br /></span></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<span style="background-color: white;"> </span><div class="slide-up-boxes"><br />
<a href="<b>URL DO SITE</b>"><br />
<h5><br />
<img src="<b>URL DA 1° IMAGEM</b>" /><br />
</h5><br />
<div><br />
<img src="<b>URL DA 2° IMAGEM</b>" /><br />
</div></a></div><br />
<div class="slide-up-boxes"><br />
<a href="<b>URL DO SITE</b>"><br />
<h5><br />
<img src="<b>URL DA 1° IMAGEM</b>" /><br />
</h5><br />
<div><br />
<img src="<b>URL DA 2° IMAGEM</b>" /><br />
</div></a></div></blockquote>
<span id="fullpost">
</span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<div style="text-align: center;">
Kissus</div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-56696957603763031642014-02-27T11:48:00.001-03:002014-05-20T01:27:43.451-03:00(: Efeitos<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="menuesquerdo">
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-afiliados-com-efeito-opaco.html">Afiliados com efeito opaco</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com.br/2013/09/tutorial-efeito-autoras-sing.html">Efeito Autoras-Sing</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-autores-zooming.html">Efeito Autores Zooming</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-awn.html">Efeito Awn</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-ballon.html">Efeito Ballon</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-bate-bate.html">Efeito Bate-Bate</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-caption.html">Efeito caption</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-descricao-surpresa.html">Efeito Descrição surpresa</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-description.html">Efeito Description</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-fade-na-entrada-do-blog.html">Efeito fade na entrada do blog</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-flipping.html">Efeito Flipping</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-fofo-para-equipe-ou-afiliados.html">Efeito fofo</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-four-shares.html">Efeito Four Shares</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-gota.html">Efeito Gota</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/blog-post_16.html">Efeito Gud</a></div>
<div id="menuconteudo">
<a href="http://link/">Breve</a></div>
</div>
<div class="menudireito">
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-lite.html">Efeito Lite</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-love.html">Efeito Love</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-nas-imagens-do-blog.html">Efeito nas imagens do blog</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-nebulla.html">Efeito Nebulla</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/11/tutorial-efeito-nos-icones-de-redes.html">Efeito nos ícones de redes sociais</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/opacidade-nas-imagens.html">Efeito Opacidade nas imagens</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-ploft.html">Efeito Ploft</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-pulsar.html">Efeito Pulsar</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-esconderrevelar-conteudo-na.html">Efeito revelar/esconder conteúdo</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-rotate-nas-imagens-dos.html">Efeito rotate nos afiliados</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-spotlight.html">Efeito Spotlight</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-squeet.html">Efeito Squeet</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-tree.html">Efeito Tree</a></div>
<div id="menuconteudo">
<a href="http://tutoriaisefeitos.blogspot.com/2014/05/efeito-zoom.html">Efeito Zoom</a></div>
<div id="menuconteudo">
<a href="http://link/">Breve</a></div>
<div id="menuconteudo">
<a href="http://link/">Breve</a></div>
<div id="menuconteudo">
<a href="http://link/">Breve</a></div>
</div>
<br />
<br />
<div style="text-align: center;">
Kissus</div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-65841089444608712712013-11-17T22:21:00.004-03:002014-05-13T11:37:34.365-03:00Tutorial- Nome do blog digitando na aba do navegador<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPvPymx84jYxV0O82N28mZzrM4We4gu-Fy-2Ui2eWIc-EEeCimk5wv7XY5-97IC0HlUCjxaJCa67cWOJdnXVqTqd6yGY9Xd5S3OuMM_2ZwO41g2vCLKfKGCB3bmGBZdkbvSAiEYTTrLPI/s1600/larguinha+natal-14.png" /></div>
<div class="separator" style="clear: both; text-align: center;">
Olá amigos internautas, trouxe para vocês mais um efeito super fofo.</div>
<div class="separator" style="clear: both; text-align: center;">
Sabe o nome do blog aqui que fica como se eu tivesse digitando? pois é esse efeito que</div>
<div class="separator" style="clear: both; text-align: center;">
vou ensinar a vocês colocarem em seus blogs.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
No html de seu blog procure por </head> e abaixo cole:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
<script></div>
<div style="text-align: center;">
var tit = document.title; var c = 0; function writetitle() { document.title = tit.substring(0,c);</div>
<div style="text-align: center;">
if(c==tit.length) { c = 0; setTimeout(&quot;writetitle()&quot;, 1000) }</div>
<div style="text-align: center;">
else</div>
<div style="text-align: center;">
{ c++; setTimeout(&quot;writetitle()&quot;, 220) } } writetitle()</div>
<div style="text-align: center;">
</script></div>
<div style="text-align: center;">
< script type='text/javascript'></div>
<div style="text-align: center;">
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);</div>
<div style="text-align: center;">
</script></div>
</blockquote>
<br />
<div style="text-align: center;">
Kissus</div>
<div style="text-align: center;">
<br /></div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-6546803989049503113.post-81090196239883280802013-11-17T13:38:00.000-03:002014-02-27T13:15:30.227-03:00Tutorial- Efeito nos Ícones de Redes Sociais<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij735j1AMOjiRKaHwuIdKi_DilKq0WMFszsGSJ5ljU1ikIR8du7MnJERnGzb-P8S55tjGMVeQxP2jZVQox-yYNUGXkCBazBV5oyxO_U9yHLj7Hg5SRIdsw4NF91lKSI0pYThh2ZYDHTQw/s1600/natal+larguinha-13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij735j1AMOjiRKaHwuIdKi_DilKq0WMFszsGSJ5ljU1ikIR8du7MnJERnGzb-P8S55tjGMVeQxP2jZVQox-yYNUGXkCBazBV5oyxO_U9yHLj7Hg5SRIdsw4NF91lKSI0pYThh2ZYDHTQw/s1600/natal+larguinha-13.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Olá amigas(os) internautas, trago para vocês uma pargunta da Ask:</div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: black; display: inline !important; float: none; font-family: inherit; font-size: 14px; line-height: 18px; text-align: left;"><b>Como eu coloco o link do meu face, do meu twitter, do meu animespirit, que nem você fez? do jeito que você colocou abaixo da caixinha de buscar, logo após "Todos os tutoriais aqui postados foram textados no modelo travel do blogger." ?</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: black; display: inline !important; float: none; font-family: inherit; font-size: 14px; line-height: 18px; text-align: left;">Um exemplo visualize<a href="http://crazy-bomby.blogspot.com.br/"> X</a> no rodapé do blog.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: black; display: inline !important; float: none; font-family: inherit; font-size: 14px; line-height: 18px; text-align: left;"><b></b></span></div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; font-family: inherit; font-size: 14px; line-height: 18px; text-align: left;">No html de seu blog, coloque o código abaixo antes da tag </span><span style="font-family: inherit; text-align: left;">]]></b:skin></span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq">
<span style="background-color: white; color: black; display: inline !important; float: none; font-family: inherit; font-size: 14px; line-height: 18px; text-align: left;">**/.caixasm{width:auto;top:2px;left:5px;position:fixed;z-index: 100;}</span> <span style="background-color: white; color: black; display: inline !important; float: none; font-family: inherit; font-size: 14px; line-height: 18px;">.navsm</span> <span style="background-color: white; font-family: inherit; font-size: 14px; line-height: 18px;">img{width:28px;}.navsm{background:rgba(255,255,255,0.4);line-height:16px;height:18px;margin:1px; display: inline-block;width:18px;font-size:18px;color:#777;padding:4px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out;float:left; }.navsm:hover {padding-top:20px; margin-top:0px; }</span></blockquote>
<div>
<span style="background-color: white; color: black; display: inline !important; float: none; font-family: inherit; font-size: 14px; line-height: 18px; text-align: left;"><br /></span></div>
<div>
<span style="background-color: white; color: black; display: inline !important; float: none; font-family: inherit; font-size: 14px; line-height: 18px; text-align: left;">No gadget html/java script coloque o código abaixo:</span><br />
<span style="background-color: white; color: black; display: inline !important; float: none; font-family: inherit; font-size: 14px; line-height: 18px; text-align: left;"><br /></span></div>
<div>
<blockquote class="tr_bq">
<div class="caixasm"><a href="LINK DA REDE SOCIAL" title="TÍTULO"><div class="navsm"><img src="LINK DO ÍCONE DA REDE SOCIAL" /></div></a><a href="LINK DA REDE SOCIAL" title="TÍTULO"><div class="navsm"><img src="LINK DO ÍCONE DA REDE SOCIAL" /></div></a><a href="LINK DA REDE SOCIAL" title="TÍTULO"><div class="navsm"><img src="LINK DO ÍCONE DA REDE SOCIAL" /></div></a><a href="LINK DA REDE SOCIAL" title="TÍTULO"><div class="navsm"><img src="LINK DO ÍCONE DA REDE SOCIAL" /></div></a></blockquote>
</div>
<div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Kissus</div>
<div style="text-align: center;">
<br /></div>
</div>
<span id="fullpost">
</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-80462932337133107182013-09-26T20:28:00.004-03:002014-02-27T12:52:34.400-03:00Tutorial- Efeito Ballon <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8p5z1nx_jM5XnciwWNc-OlQOaf4d4y-m3NG9ZlIn44qW-GWHQlWb2DUThmgS1aC-E6cLqi06nlexMHNKiu3pPXuHODvLt-sUwVpPTJd5rtEinVAIZI2f_D1WvGsTEOcH9tmGf976f7kc/s1600/doce-8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8p5z1nx_jM5XnciwWNc-OlQOaf4d4y-m3NG9ZlIn44qW-GWHQlWb2DUThmgS1aC-E6cLqi06nlexMHNKiu3pPXuHODvLt-sUwVpPTJd5rtEinVAIZI2f_D1WvGsTEOcH9tmGf976f7kc/s1600/doce-8.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #3d85c6; font-size: x-large;">T</span></b>rouxe para vocês mais um efeito, serve tanto para afiliados como para</div>
<div class="separator" style="clear: both; text-align: center;">
autores. Acho esse efeito super fofo <a href="http://static.tumblr.com/rwcju0q/5Hgmhrr1d/k.html">visualize</a>. Os créditos<a href="http://birthdaycakeoficial.blogspot.com.br/2013/02/efeito-ballon.html"> x</a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
Para colocar esse efeito em seu blog, coloque o código abaixo, acima da tag <b style="font-family: inherit; text-align: left;">]]></b:skin></b><span style="font-family: inherit; text-align: left;">:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq">
.tooltip {<br />
text-decoration: none;<br />
position: relative;<br />
display: inline-block;<br />
transition: all 0.25s ease-in-out;<br />
-moz-transition: all 0.25s ease-in-out;<br />
-webkit-transition: all 0.25s ease-in-out;<br />
}<br />
.tooltip:hover {<br />
color: #fff; /* COR DA FONTE*/<br />
}<br />
.tooltip span {<br />
pointer-events: none;<br />
opacity: 0;<br />
-moz-border-radius: 5px;<br />
-webkit-radius:5px;<br />
border-radius:5px;<br />
filter: alpha(opacity=0);<br />
background: #edc2cb; /* COR DA SETINHA 1*/<br />
width:62px;<br />
padding: 4px;<br />
font-size: 9px; font-family: arial;<br />
color: #fff;<br />
text-transform:uppercase;<br />
text-align:center;<br />
color: #fff; /* COR DA FONTE*/<br />
left: 50%;<br />
margin-left: -35px;<br />
display: block;<br />
position: absolute;<br />
z-index: 30;<br />
bottom: -10px;<br />
transition: all 0.25s ease-in-out;<br />
-moz-transition: all 0.25s ease-in-out;<br />
-webkit-transition: all 0.25s ease-in-out;<br />
}<br />
.tooltip:hover span {<br />
display: block;<br />
pointer-events: auto;<br />
opacity: 1;<br />
filter: alpha(opacity=100);<br />
bottom: 75px;<br />
}<br />
.tooltip span:before, .tooltip span:after {<br />
content: '';<br />
position: absolute;<br />
bottom: -8px;<br />
left: 50%;<br />
margin-left: -10px;<br />
width: 0;<br />
height: 0;<br />
border-left: 8px solid transparent;<br />
border-right: 8px solid transparent;<br />
border-top: 8px solid #edc2cb; /* COR DA SETINHA 2, TEM QUE SER A MESMA COR DA SETINHA 1*/<br />
z-index: 29;<br />
}<br />
.kara{<br />
width:70px;<br />
height:70px;<br />
margin-left:1px;<br />
margin-right:1px;<br />
border:1px solid #f16581; /* COR DA BORDA */<br />
-webkit-transition-duration: .60s;<br />
}<br />
.kara:hover{<br />
width:70px;<br />
height:70px;<br />
margin-left:1px;<br />
margin-right:1px;<br />
border:1px solid #edc2cb; /* COR DA BORDA */<br />
-webkit-transition-duration: .60s;<br />
}</blockquote>
<pre></pre>
<pre style="text-align: center;"><span style="font-family: Play;">Para fazer o efeito funcionar coloque o código abaixo</span></pre>
<pre style="text-align: center;"><span style="font-family: Play;">no gadget Html/Java Script</span></pre>
<blockquote class="tr_bq">
<center>
<center>
<span style="line-height: 11px;"><center></span></center>
</center>
<center>
<center>
<span style="line-height: 11px;"><a href="link" class="tooltip"><img src="imagem" class="kara" /></span></center>
</center>
<center>
<center>
<span style="line-height: 11px;"><span>nome</span></a></span></center>
</center>
<center>
<center>
<span style="line-height: 11px;"> <a href="link" class="tooltip"><img src="imagem" class="kara" /></span></center>
</center>
<center>
<center>
<span style="line-height: 11px;"><span>nome</span></a></span></center>
</center>
<center>
<center>
<span style="line-height: 11px;"> <a href="link" class="tooltip"><img src="imagem" class="kara" /></span></center>
</center>
<center>
<center>
<span style="line-height: 11px;"><span>nome</span></a></span></center>
</center>
<center>
<center>
<span style="line-height: 11px;"></center></span></center>
</center>
</blockquote>
<pre style="text-align: center;"><center>
<center>
<span style="font-family: inherit;"><span style="background-color: white; line-height: 11px;">Kissus</span></span></center>
</center>
</pre>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-60442992124898991042013-09-26T20:08:00.003-03:002014-02-27T13:23:31.783-03:00Tutorial- Efeito Spotlight<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0gNQyjkPYTCAdZbLc93uSDyR4B11Kp8C9s9pg0y97cT6FKnA9m_Oxlfet-GSDj6PFvyWL1dGsWiE3uZNJ0JBS4FQ-RELsKk7WF0EE2Q6SmmtjtVHINXmmMGTilxP4wWTCj9KUpzPb_NA/s1600/doce-11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0gNQyjkPYTCAdZbLc93uSDyR4B11Kp8C9s9pg0y97cT6FKnA9m_Oxlfet-GSDj6PFvyWL1dGsWiE3uZNJ0JBS4FQ-RELsKk7WF0EE2Q6SmmtjtVHINXmmMGTilxP4wWTCj9KUpzPb_NA/s1600/doce-11.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #3d85c6; font-size: x-large;">O</span></b>i pessoal, estou feliz achei um tumblr com vários efeitos legais, </div>
<div class="separator" style="clear: both; text-align: center;">
estou personalizando para o blogger. Hoje trago o efeito spotlight,</div>
<div class="separator" style="clear: both; text-align: center;">
créditos<a href="http://isinmyheartlovingyou.tumblr.com/"> x</a>, para ver o efeito<a href="http://previewsiimhly.tumblr.com/ef17"> x</a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
Para colocar em seu blog, coloque o código abaixo, antes da tag <b style="text-align: left;">]]></b:skin></b></div>
<br />
<blockquote class="tr_bq">
div#items a{text-decoration:none;color:#fff;}<br />
div#items{width:502px;margin:0px ;}<br />
#items .item{display:block;width:160px;height:160px;border:2px solid #ff7e92;float:left;position:relative; margin:1px ;}<br />
#items .item .caption
{position:absolute;bottom:5px;left:0px;padding:3px;font-size:18px;width:154px;display:none;background:#ff7e92;
font-family: yanone kaffeesatz; text-align: center; }</blockquote>
<br />
No gadget Html/Java Script coloque<br />
<br />
<blockquote class="tr_bq">
<div id="items"><br />
<a class="item" href="link" title="nome"> <img src="imagem" class="efeito"></a><br />
<a class="item" href="link" title="nome"> <img src="imagem" class="efeito"></a><br />
<a class="item" href="link" title="nome"> <img src="imagem" class="efeito"></a><br />
<a class="item" href="link" title="nome"> <img src="imagem" class="efeito"></a></div></blockquote>
<br />
<div style="text-align: center;">
Kissus</div>
<div style="text-align: center;">
<br /></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-21558696678552689452013-09-26T12:46:00.001-03:002014-02-27T13:24:23.299-03:00Tutorial- Efeito Squeet <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeLy9cxak55TLUddLviUiU4NRbwJB1DUGOYz7ViMThUkyFneVxn2gYudOQZVVU7hIj52fGU5t7X0GN5keo_ulY-_KRvYjn4KJeJsHni10VDXzU7DBLb1pTZG_ZwRoa8yWmyhmgL8saZkA/s1600/doce-11.png" /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #3d85c6; font-size: x-large;"><b>T</b></span>rouxe para vocês mais um efeito para afiliados ou se preferir aplicar em </div>
<div class="separator" style="clear: both; text-align: center;">
outro lugar fica a seu critério, peguei este efeito em um tumblr I-LOVETHINGS.</div>
<div class="separator" style="clear: both; text-align: center;">
Para ver o efeito <a href="http://efeito-esquet.tumblr.com/">x</a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
Para colocar em seu blog, coloque o código abaixo, antes da tag <b style="text-align: left;">]]></b:skin></b></div>
<div class="separator" style="clear: both; text-align: center;">
<b style="text-align: left;"><br /></b></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
/***** EFEITO ESQUET - POR I-LOVETHINGS/LOVERS-OF-DESIGNS/SPAZIOHTML *****/</div>
<div style="text-align: center;">
.imagem {background: url('LINK-DA-IMAGEM'); -webkit-transition-duration: 1.0s; width: 116px; height: 136px;display: inline-block;}</div>
<div style="text-align: center;">
.imagem:hover {background: url('LINK-DA-MESMA-IMAGEM-ESCRITA'); -webkit-transition-duration: 1.0s;}</div>
<div style="text-align: center;">
.imagem2 {background: url('LINK-DA-IMAGEM'); -webkit-transition-duration: 1.0s; width: 116px; height: 136px;display: inline-block;}</div>
<div style="text-align: center;">
.imagem2:hover {background: url('LINK-DA-MESMA-IMAGEM-ESCRITA'); -webkit-transition-duration: 1.0s;}</div>
<div style="text-align: center;">
.imagem3 {background: url('LINK-DA-IMAGEM'); -webkit-transition-duration: 1.0s; width: 116px; height: 136px;display: inline-block;}</div>
<div style="text-align: center;">
.imagem3:hover {background: url('LINK-DA-MESMA-IMAGEM-ESCRITA'); -webkit-transition-duration: 1.0s;}</div>
</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Depois das alterações feitas salve, e vá em layout adicione um gadget de Html/Java Script e cole:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
<div class="imagem1"></div></div>
<div style="text-align: center;">
<div class="imagem2"></div></div>
<div style="text-align: center;">
<div class="imagem3"></div></div>
</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Esse efeito as imagens são colocadas pelo html, também tem que configurar o tamanho, você vai fazer uma imagem normal, depois fazer a mesma imagem em preto e branco. Em width: 116px; height: 136px vc irá por o tamanho da sua imagem. Width - largura, Height - altura.<br />
<br />
<br />
<div style="text-align: center;">
Kissus</div>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-52514174182470637132013-09-26T11:42:00.002-03:002014-02-27T13:14:26.243-03:00Tutorial: Efeito nas imagens do blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis7o2fn9oKqkLXwnsxS5vi1hmdefArgV7K-KpHEk9iv74FvGzby_NzSzmW3yrslD5M6gmyj9z1eUeeqvmLz6TDzXUEJxAqPxEYyc5RRvCnNfneAOgzC_u2CYvIF4O63RKJoOSwNHlKsys/s1600/doce-23.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis7o2fn9oKqkLXwnsxS5vi1hmdefArgV7K-KpHEk9iv74FvGzby_NzSzmW3yrslD5M6gmyj9z1eUeeqvmLz6TDzXUEJxAqPxEYyc5RRvCnNfneAOgzC_u2CYvIF4O63RKJoOSwNHlKsys/s1600/doce-23.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #3d85c6; font-size: x-large;">O</span>lá pessoal, trouxe mais efeitos para as imagens. Hoje vou postar 3 efeitos fofos:</div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #ea9999;">fade</span>,<span style="color: #3d85c6;"> blur</span> e<span style="color: #ea9999;"> preto e branco</span>. </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #3d85c6;"><b>Primeiro efeito</b></span>- Efeito Fade</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Coloque o código abaixo antes da tag <b style="text-align: left;">]]></b:skin></b></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
.main img {</div>
<div style="text-align: center;">
filter:alpha(opacity=100);</div>
<div style="text-align: center;">
-moz-opacity:1.0;</div>
<div style="text-align: center;">
opacity:1.0;</div>
<div style="text-align: center;">
-webkit-transition-duration: .50s;</div>
<div style="text-align: center;">
}</div>
<div style="text-align: center;">
.main img:hover {</div>
<div style="text-align: center;">
filter:alpha(opacity=60);</div>
<div style="text-align: center;">
-moz-opacity:0.60;</div>
<div style="text-align: center;">
opacity:0.60;</div>
<div style="text-align: center;">
-webkit-transition-duration: .50s;</div>
<div style="text-align: center;">
}</div>
</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="color: #3d85c6;"><b>segundo efeito</b></span>- Efeito Blur</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Coloque o código abaixo antes da tag <b style="text-align: left;">]]></b:skin></b></div>
<div style="text-align: center;">
<br /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
.main img {</div>
<div style="text-align: center;">
-webkit-transition-duration: .99s;</div>
<div style="text-align: center;">
-moz-transition-duration: .99s;}</div>
<div style="text-align: center;">
-webkit-filter: blur(2px); -moz-filter: blur(2px);</div>
<div style="text-align: center;">
-o-filter: blur(2px); -ms-filter: blur(2px);</div>
<div style="text-align: center;">
}</div>
</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<span style="color: #3d85c6;"><b>Terceiro efeito</b></span>- Efeito Preto e Branco</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<div class="separator" style="clear: both;">
Coloque o código abaixo antes da tag <b>]]></b:skin></b></div>
<div>
<br /></div>
<blockquote class="tr_bq">
.post img {<br />
-webkit-filter: saturate(100%) ;<br />
-webkit-transition-duration: .90s;<br />
}<br />
.post img:hover {<br />
-webkit-filter: saturate(0%) ;<br />
-webkit-transition-duration: .90s;<br />
} </blockquote>
<div>
<br /></div>
<div>
Não altere os valores, ok?. </div>
<div>
Bem, é isso pessoal, até a próxima.</div>
<div>
<br /></div>
<div>
Kissus</div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-49050304291239078282013-09-26T11:24:00.002-03:002014-02-27T12:53:51.395-03:00Tutorial- Efeito Bate-Bate<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1XrFXrXiYIm1rBeV06AJDbtumDihMXFXJUThyphenhyphenfF051Iv9CizNU6PJ7C282rGPYKebrYKctP7g7Hx3y0uzSGsKVZKPLgLhf5EUAbP-ax3pM9gu6xxLWT5N8e63H20AEsBCN-n1pUWTu6s/s1600/doce-9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1XrFXrXiYIm1rBeV06AJDbtumDihMXFXJUThyphenhyphenfF051Iv9CizNU6PJ7C282rGPYKebrYKctP7g7Hx3y0uzSGsKVZKPLgLhf5EUAbP-ax3pM9gu6xxLWT5N8e63H20AEsBCN-n1pUWTu6s/s1600/doce-9.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #3d85c6; font-size: x-large;">T</span></b>rouxe mais um efeito para afiliados, ele é simples e muito fofo.</div>
<div class="separator" style="clear: both; text-align: center;">
Os créditos <a href="http://www.kawaii-things.net/2013/09/efeito-afiliados.html">x</a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
Para colocar em seu blog coloque o código abaixo antes da tag <b style="text-align: left;"><span style="color: #3d85c6;">]]></b:skin></span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
@-webkit-keyframes YO {</div>
<div style="text-align: center;">
1% {-webkit-transform: scale(1);}</div>
<div style="text-align: center;">
50% {-webkit-transform: rotate(360deg);}</div>
<div style="text-align: center;">
80% {-webkit-transform:translatey(-10px);}</div>
<div style="text-align: center;">
100% {-webkit-transform: scale(1.8);}</div>
<div style="text-align: center;">
}</div>
<div style="text-align: center;">
@-moz-keyframes YO {</div>
<div style="text-align: center;">
1% {-webkit-transform: scale(1);}</div>
<div style="text-align: center;">
50% {-webkit-transform: rotate(360deg);}</div>
<div style="text-align: center;">
80% {-webkit-transform:translatey(-10px);}</div>
<div style="text-align: center;">
100% {-webkit-transform: scale(1.8);}</div>
<div style="text-align: center;">
}</div>
<div style="text-align: center;">
@-o-keyframes YO {</div>
<div style="text-align: center;">
1% {-webkit-transform: scale(1);}</div>
<div style="text-align: center;">
50% {-webkit-transform: rotate(360deg);}</div>
<div style="text-align: center;">
80% {-webkit-transform:translatey(-10px);}</div>
<div style="text-align: center;">
100% {-webkit-transform: scale(1.8);}</div>
<div style="text-align: center;">
}</div>
<div style="text-align: center;">
.bate-bate{-webkit-transition: .7s; width:40px;</div>
<div style="text-align: center;">
height:40px;border-radius: 5px;}</div>
<div style="text-align: center;">
.bate-bate:hover {-webkit-animation: YO .7s alternate infinite linear;}</div>
<div style="text-align: center;">
.fade:hover img {opacity:0.2;-webkit-transition: .7s;}</div>
<div style="text-align: center;">
.fade img:hover{opacity:1.0;-webkit-transition: .7s;-webkit-filter:contrast(120%);</div>
<div style="text-align: center;">
-moz-filter:contrast(120%);</div>
<div style="text-align: center;">
-o-filter:contrast(120%);</div>
<div style="text-align: center;">
}</div>
</blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="color: #e06666;"><b>Só mude algum código se você souber html.</b></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Para fazer o efeito funcionar coloque o código abaixo no gadget <b><span style="color: #3d85c6;">Html/Java Script</span></b><br />
<br />
<blockquote class="tr_bq">
<div class="fade"><center><br />
<a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a><br />
< a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a><br />
< a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a><br />
< a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a><br />
< a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a><br />
< a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a><br />
</center></div></blockquote>
<div>
<br /></div>
<div>
Kissus</div>
<div>
<br /></div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-83008942632225566092013-09-26T11:12:00.003-03:002013-09-26T11:44:27.763-03:00Tutorial- Efeito Autoras-Sing <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsvGemnifqrAe9QrYrM2gR4fT-j5UjTaZOSPHtJ2xHWAxPY_MtyVkhBd6sLEzUc3Q7jhfAyqOIez0yvIZhvKsq7bVU3zLXL_3SQL0xVXYBTPRjgqqrkXLO4wvHmbm9B9Oa9tb0FHHKys/s1600/doce-20.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsvGemnifqrAe9QrYrM2gR4fT-j5UjTaZOSPHtJ2xHWAxPY_MtyVkhBd6sLEzUc3Q7jhfAyqOIez0yvIZhvKsq7bVU3zLXL_3SQL0xVXYBTPRjgqqrkXLO4wvHmbm9B9Oa9tb0FHHKys/s1600/doce-20.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #3d85c6; font-size: x-large;">O</span></b>lá pessoal, trago para vocês mais um efeito fofo para autoras, quando clica</div>
<div class="separator" style="clear: both; text-align: center;">
em cima da imagem aparece o nome e ao lado faz o efeito tooltipe.</div>
<div class="separator" style="clear: both; text-align: center;">
O efeito autoras-sing fica lindo em qualquer tipo de blog. Os créditos <a href="http://www.kawaii-things.net/2013/09/efeito-autoras-sing.htm">x</a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
Para colocar o efeito sing em seu blog, coloque o código abaixo no gadget Html/Java Script</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
@-webkit-keyframes autoras {</div>
<div style="text-align: center;">
0% {-webkit-transform: translatey(-5px)}</div>
<div style="text-align: center;">
50% {opacity: 0;-webkit-transform: translatey(100%) rotate(360deg);}</div>
<div style="text-align: center;">
100% {-webkit-transform: translatey(10px);}</div>
<div style="text-align: center;">
}</div>
<div style="text-align: center;">
@-moz-keyframes autoras {</div>
<div style="text-align: center;">
0% {-webkit-transform: translatey(-5px)}</div>
<div style="text-align: center;">
50% {opacity: 0;-webkit-transform: translatey(100%) rotate(360deg);}</div>
<div style="text-align: center;">
100% {-webkit-transform: translatey(10px);}</div>
<div style="text-align: center;">
}</div>
<div style="text-align: center;">
@-o-keyframes autoras {</div>
<div style="text-align: center;">
0% {-webkit-transform: translatey(-5px)}</div>
<div style="text-align: center;">
50% {opacity: 0;-webkit-transform: translatey(100%) rotate(360deg);}</div>
<div style="text-align: center;">
100% {-webkit-transform: translatey(10px);}</div>
<div style="text-align: center;">
}</div>
<div style="text-align: center;">
.sing {border:1px solid #000;width:70px;/*valor de largura*/</div>
<div style="text-align: center;">
height:130px /*valor da altura*/; float:left;margin-left:10px;}</div>
<div style="text-align: center;">
.sing:hover {</div>
<div style="text-align: center;">
-webkit-animation: autoras .7s alternate;</div>
<div style="text-align: center;">
}</div>
</blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Só mude os valores ok?</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Kissus</div>
<div style="text-align: center;">
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-28446765769708318092013-09-26T01:03:00.001-03:002014-02-27T12:55:13.683-03:00Tutorial- Efeito descrição surpresa<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg97zYtUVmHeqMDEsEzJlUnZs_o_pY_IBvXQLXqKdiIfj0t9xdNfF8T0CdQ00CeZq9hAGXCFJyn9Xl-BSw83o1VOUUE2CKY8_aSfDerN33EVrq39uYgXE8hXvMeI45js3qDCxXAUJ4JUk/s1600/doce-13.png" /></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #3d85c6; font-size: large;">O</span></b>lá pessoal, estava olhando<i> tumblrs</i> quando me deparei com um<i> efeito</i> muito <i><a href="http://tutoriaisefeitos.blogspot.com/2013/09/tutorial-efeito-descricao-surpresa.html">fofo</a></i>,</div>
<div class="separator" style="clear: both; text-align: center;">
quando você passa o <i>mouse</i> na imagem <i>desce</i> a<i> </i>descrição.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
Para colocar em seu blog, coloque o código abaixo antes da tag <i>]]></b:skin></i></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<blockquote class="tr_bq">
.imagepluscontainer{ /* main image container */<br />
position: relative;<br />
z-index: 1;<br />
}<br />
.imagepluscontainer img{ /* CSS for image within container */<br />
position: relative;<br />
z-index: 2;<br />
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */<br />
-webkit-transition: all 0.5s ease-in-out;<br />
-o-transition: all 0.5s ease-in-out;<br />
-ms-transition: all 0.5s ease-in-out;<br />
transition: all 0.5s ease-in-out;<br />
}<br />
.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */<br />
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);<br />
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);<br />
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);<br />
-moz-transform: scale(1.05, 1.05);<br />
-webkit-transform: scale(1.05, 1.05);<br />
-ms-transform: scale(1.05, 1.05);<br />
-o-transform: scale(1.05, 1.05);<br />
transform: scale(1.05, 1.05);<br />
}<br />
.imagepluscontainer div.desc{ /* CSS for desc div of each image. */<br />
position: absolute;<br />
width: 90%;<br />
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */<br />
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */<br />
left: 5px;<br />
padding: 8px;<br />
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */<br />
color: white;<br />
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */<br />
-webkit-border-radius: 0 0 8px 8px;<br />
border-radius: 0 0 8px 8px;<br />
opacity: 0; /* Set initial opacity to 0 */<br />
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */<br />
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);<br />
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);<br />
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */<br />
-webkit-transition: all 0.5s ease 0.5s;<br />
-o-transition: all 0.5s ease 0.5s;<br />
-ms-transition: all 0.5s ease 0.5s;<br />
transition: all 0.5s ease 0.5s;<br />
}<br />
.imagepluscontainer div.desc a{<br />
color: white;<br />
}<br />
.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */<br />
-moz-transform: translate(0, 100%);<br />
-webkit-transform: translate(0, 100%);<br />
-ms-transform: translate(0, 100%);<br />
-o-transform: translate(0, 100%);<br />
transform: translate(0, 100%);</blockquote>
<br />
Para fazer o efeito aparecer coloque o código abaixo no gadget <i>Html/Java Script</i><br />
<br />
<blockquote class="tr_bq">
<div class="imagepluscontainer" style="width:<b>LARGURADAFOTO</b>px; height:<b>ALTURA DA FOTO</b>px; z-index:2"><br />
< img src="<b>URLDAFOTO</b>" /><br />
< div class="desc"><br />
<i>ESCREVA ALGO AQUI, É ISSO AQUI QUE VAI APARECER QUANDO VOCÊ PASSAR O MOUSE NA IMAGEM.</i>< /div><br />
< /div></blockquote>
<br />
<div style="text-align: center;">
Kissus</div>
<div style="text-align: center;">
<br /></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6546803989049503113.post-72002066368367297732013-09-26T00:44:00.000-03:002014-02-27T13:12:15.621-03:00Tutorial- Efeito Love ♥ <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Z6ev0wOYQmG8V14zXaRVOffui9F3TFgTyeKqgHHPscW7eBkhNtBX0c5DS3Rik-TnAXgo0t0ET44zj46V5sMXMgqLUNpXnSaZM3-44P5Zj3hkCweF-rQ8SddoSukIXHnr22pBaen18ZA/s1600/imagem+sorvete-11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Z6ev0wOYQmG8V14zXaRVOffui9F3TFgTyeKqgHHPscW7eBkhNtBX0c5DS3Rik-TnAXgo0t0ET44zj46V5sMXMgqLUNpXnSaZM3-44P5Zj3hkCweF-rQ8SddoSukIXHnr22pBaen18ZA/s1600/imagem+sorvete-11.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #3d85c6; font-size: x-large;">O</span></b>lá pessoal, trago mais um efeito fofo para afiliados, <a href="http://crazy-bomby.blogspot.com.br/">veja o efeito</a> nos afiliados.</div>
<div class="separator" style="clear: both; text-align: center;">
Espero que gostem. Créditos <a href="http://days--of--rain.blogspot.com.br/2013/08/efeito-love.html">x</a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
Para colocar este efeito em seus afiliados <span style="text-align: left;">Vá seu HTML procure por </span><i style="text-align: left;">]]></b:skin></i><span style="text-align: left;"> e acima desta tag cole:</span></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
.love {</div>
<blockquote>
<div style="text-align: center;">
border-radius: 8px;</div>
<div style="text-align: center;">
-webkit-transition-duration: .80s;}</div>
<div style="text-align: center;">
.love:hover{</div>
<div style="text-align: center;">
border-radius: 820px;</div>
<div style="text-align: center;">
opacity: 0.7;</div>
<div style="text-align: center;">
-moz-transform: rotate(620deg) scale(0);</div>
<div style="text-align: center;">
-webkit-transform: rotate(620deg) scale(0);</div>
<div style="text-align: center;">
-o-transform: rotate(620deg) scale(0);</div>
<div style="text-align: center;">
-ms-transform: rotate(620deg) scale(0);</div>
<div style="text-align: center;">
transform: rotate(620deg) scale(0);</div>
<div style="text-align: center;">
-webkit-transition-duration: .80s;</div>
<div style="text-align: center;">
}</div>
</blockquote>
</blockquote>
Não mude nada, apenas salve.<br />
<br />
Para fazer o efeito love funcionar coloque o código abaixo no gadget Html/Java Script<br />
<br />
<blockquote class="tr_bq">
<a href="<b>LINK</b>" title="<b>TÍTULO</b>"><img class="love" src="<b>SUA IMAGEM</b>" /></a><br />
<a href="<b>LINK</b>" title="<b>TÍTULO</b>"><img class="love" src="<b>SUA IMAGEM</b>" /></a><br />
<a href="<b>LINK</b>" title="<b>TÍTULO</b>"><img class="love" src="<b>SUA IMAGEM</b>" /></a></blockquote>
<br />
<div style="text-align: center;">
Kissus</div>
<div style="text-align: center;">
<br /></div>
</div>
Unknownnoreply@blogger.com0