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.
6. E ABAIXO da tag citada acima adicione o seguinte código:
7. Depois novamente procure por:
8. E Depois dela adicione o seguinte código:
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
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
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 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:
Caio, suas dicas são excelentes.
9 de fevereiro de 2012 às 22:27Eu vou tentar fazer postagens de códigos com um pouco mais de autenticidade.
Mais seu post está ótimo!
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.
10 de fevereiro de 2012 às 10:14Até mais.
Abraços, Caio Vinicius - Tecnoblog
Obrigado pela idéia.
10 de fevereiro de 2012 às 18:45Já adicionei uma promessa de postagens , vou falar sobre CSS.
Ao mesmo tempo que ensino, aprendo. No futuro, irei colocar hacks.
Até a próxima!
Até mais.
11 de fevereiro de 2012 às 10:27Olá 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?
24 de julho de 2012 às 13:46Desde já, obrigado.
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!