Destacando o Feed com o Efeito Flip Page

► +A +/- -A
Olá Amigos Leitores do Tecnoblog, no artigo de hoje venho ensinando como adicionar o efeito Flip Page no Feed do seu blog, este efeito serve para que você divulgue o seu Feed de uma forma mais atraente e bem legal.

Instalação

1. Faça o Login no Blogger
2. Vá na opção Modelo
3. Em seguida na opção Editar HTML
4. Clique na opção "Expandir modelos widgets"
5. E procure pela seguinte tag:


]]></b:skin>



6. E ABAIXO da tag citada acima adicione o seguinte código:



<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://i37.tinypic.com/e71cmd.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>


7. Depois novamente procure por:


 <body>


8. E Depois dela adicione o seguinte código:



<div id='pageflip'>
<a href='Link-do-seu-Endereço-FEED'><img alt='' src='http://i37.tinypic.com/e71cmd.png'/></a>
<div class='msg_block'></div>
</div> 




9. A primeira parte em Negrito é o endereço do seu Feed.
A segunda parte em Negrito é a imagem que você pode muda-la (De preferencia imagens em PNG)


Pronto, Agora esta tudo certo, basta visualizar e se estiver tudo como desejado é só Salvar.
Até mais.
Abraços, Caio Vinicius - Tecnoblog 

► Postagens Relacionadas:

5 Comentários

Anderson Souza disse...

Caio, suas dicas são excelentes.
Eu vou tentar fazer postagens de códigos com um pouco mais de autenticidade.
Mais seu post está ótimo!

9 de fevereiro de 2012 22:27
Caio Vinicius disse...

Que bom que gostou Anderson, seu Blog é ótimo em Dicas, e eu acho que com códigos para Blogger, ira ficar perfeito. Obrigado Pelo Comentário e Volte Sempe.
Até mais.
Abraços, Caio Vinicius - Tecnoblog

10 de fevereiro de 2012 10:14
Anderson Souza disse...

Obrigado pela idéia.
Já adicionei uma promessa de postagens , vou falar sobre CSS.
Ao mesmo tempo que ensino, aprendo. No futuro, irei colocar hacks.
Até a próxima!

10 de fevereiro de 2012 18:45
Caio Vinicius disse...

Até mais.

11 de fevereiro de 2012 10:27
minimorsa disse...

Olá Caio, bem interessante essa técnica, fiz algumas alterações, mas desde o original, até o momento, não consigo corrigir um problema recorrente. Ao invés de abrir a url do feedburner que adicionei, ele abre o seguinte "url_da_pagina.blogspot.com/url_do_post/url_feedburner" não estou conseguindo fazer com que abra o feedburner, você poderia me ajudar?
Desde já, obrigado.

24 de julho de 2012 13:46

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!