Efeito Page Flip (Faxa no canto do blog)
Autor: Bruno Tavares | Publicado: 2011-03-22T21:23:00-07:00


 
Atendendo a pedidos, especialmente da Isadora Fraga vou “revelar” o truque  para ter esse efeito realmente simpático para o seu blog.Neste tutorial ensino a aplicar&nbsp; o efeito Page Flip para promover a  assinatura do Feed/Rss,  mas use sua criatividade e desenvolva…Você  poderá deixar recados importantes ou um link especial.
Veja como fazer:

Copie o código abaixo e cole em um bloco de notas.
&lt;style type='text/css'&gt;    
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;     
}     
&lt;/style&gt;     
&lt;script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/&gt;     
&lt;script type='text/javascript'&gt;     
$(document).ready(function(){     
//Page Flip on hover     
$(&amp;quot;#pageflip&amp;quot;).hover(function() {     
$(&amp;quot;#pageflip img , .msg_block&amp;quot;).stop()     
.animate({     
width: &amp;#39;307px&amp;#39;,     
height: &amp;#39;319px&amp;#39;     
}, 500);     
} , function() {     
$(&amp;quot;#pageflip img&amp;quot;).stop()     
.animate({     
width: &amp;#39;50px&amp;#39;,     
height: &amp;#39;52px&amp;#39;     
}, 220);     
$(&amp;quot;.msg_block&amp;quot;).stop()     
.animate({     
width: &amp;#39;50px&amp;#39;,     
height: &amp;#39;50px&amp;#39;     
}, 200);     
});     
});     
&lt;/script&gt;Observe o endereço da imagem grifado em vermelho dentro do script A imagem utilizada neste tutorial é  essa abaixo.
&nbsp; 

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

Agora siga os passos:

Faça login no Blogger&nbsp;
Clic na opção “Layout”&nbsp;
“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):


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

Cli em “Visualizar” e se estiver tudo bem, clic em “Salvar Modelo”

Viu? Não é tão complicado! Se tiver dúvidas, é só perguntar. 
Grita que eu acudo!!!

&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; OUTRO EXEMPLO &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;


 Esse template tem um efeito interessante com script jQuery e CSS, o “Page Flip”  instalado no canto superior direito da página, que dá um charme todo  especial ao desenho além de chamar a atenção para a assinatura do Feed  Newesletter. 
Confira no Blog Demo.


Demo / DownloadPropriedades:
     Header com Page Flip

     Menu de navegação inserido no CSS/HTML

     Caixa de busca interna personalizada

     Posts resumidos com thumbnails

     Blockquote personalizado

     Sidebar com 3 colunas

     Elementos individuais (widgets)

     Script “Scroll to top” (voltar ao topo)

Instalação: 
Depois de fazer o download do documento XML para seu computador
     Faça login no Blooger 

     No painel clic em “Layout”

     Clic em “Editar HTML”

     Faça um back up do blog antigo (se for o caso)

     Clic em “Enviar Arquivo”

     Clic em “Fazer Upload”

     Confirmar e Salvar

Configurações:
Direcionamento - Feed Nwesletter
Em Seu HTML, procure pelo seguinte trecho (use Ctr + F):     
    
&lt;div id='pageflip'&gt;     
&lt;a  href='SEUENDEREÇOFEED'&gt;&lt;img alt=''  src='http://i9.photobucket.com/albums/a65/mamanunes/page_flipPeel.png'/&gt;&lt;/a&gt;

Menu:

Dentro do seu HTML, procure pelo seguinte código (use as teclas Ctr + F)
&lt;ul class='solidblockmenu'&gt;Abaixo dele, observe o trecho abaixo. edite nos locais indicados: endereço (em verde) e nome do link (em vermelho)
&lt;li&gt; &lt;a href='ENDERECODOSEUBLOG'&gt;Home&lt;/a&gt;&lt;/li&gt;       
&lt;li&gt;&lt;a class='current' href='ENDEREÇODOLINK'&gt;Contato&lt;/a&gt;&lt;/li&gt;       
&lt;li&gt;&lt;a href='ENDEREÇODELINK'&gt;Link&lt;/a&gt;&lt;/li&gt;       
&lt;li&gt;&lt;a href='ENDEREÇODELINK'&gt;Link&lt;/a&gt;&lt;/li&gt;Se quiser acrescentar mais links, repita o trecho: 
&lt;li&gt;&lt;a href='ENDEREÇODELINK'&gt;Link&lt;/a&gt;&lt;/li&gt; quantas vezes forem necessárias.
Caixa de busca interna:
Procure pelo código abaixo e escreva o nome do seu blog onde está em vermelho. Ex.: mamatestes1.blogspot.com
&lt;form action='http://SEUBLOG/search' id='searchthis' method='get' style='display: inline;'&gt;Configurar data de postagem
Em “Configurações” clic na aba “formatação” e em “Formato da data” deixe assim: 
Ex.: 18 Setembro 2009


Imagens em PNG para o Page Flip 
Você  poderá mudar a imagem onde está a mensagem Feed. Procure em seu HTML o  seguinte trecho e insira o endereço da sua imagem no campo em vermelho:

#pageflip .msg_block {     
width: 70px; height: 70px;      
overflow: hidden;      
position: absolute;      
right: 0; top: 0;      
background: url(ENDEREÇO DA IMAGEM) no-repeat right top;      
}
Abaixo a imagem que está no modelo e ao lado a imagem para customização.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;