pesquise aqui

"Política de Privacidade - Google AdSense"

Política de  Privacidade - Google AdSense

aprenda como se faz:..."Efeito Page Flip"

Efeito Page Flip

rss3
..." vou “revelar” o truque para ter esse efeito realmente simpático para o seu blog."

"  Neste tutorial "...
 a :
 


do blog:  

http://blogger-dicasmamanunes.blogspot.com


..."  ensina a aplicar  o efeito Page Flip para promover a assinatura do Feed/Rss"...
..."    mas use sua criatividade e desenvolvaVocê poderá deixar recados importantes ou um link especial.

Veja como fazer:


Copie o código abaixo e cole em um bloco de notas.
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>
Observe o endereço da imagem grifado em vermelho dentro do script A imagem utilizada neste tutorial é essa abaixo.
 
subscribeImg

"  Você pode criar outra imagem em formato PNG e customizar, como a imagem abaixo utilizada no Template Page Flip Blue"

rss3

Agora siga os passos:

  1. Faça login no Blogger 
  2. Clic na opção “Layout” 
  3. “Clic em “Editar HTML”
Não esqueça de fazer um backup do template antes de qualquer alteração.

Procure pelo seguinte (use Ctr + F):


</head>
Cole todo o código do Flip, ABAIXO dele.

Agora procure pela tag <body> e DEPOIS dela, cole o código abaixo:
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/mamanunes'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
Substitua meu endereço (em vermelho) pelo seu endereço Feed, ou o endereço do link que desejar.                                                

Clique  em “
Visualizar e se estiver tudo bem
clic em 
Salvar Modelo

fonte e créditos do presente  do presente post:                                  

veja +

Related Posts Plugin for WordPress, Blogger...

Postagens populares

[▼]

agregadores





 
Related Posts with Thumbnails
|Template by ebds|http://efeitomostrarocultarnahomepage.blogspot.com |