O Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade. 
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 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.
<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
$("#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>
Observe o endereço da imagem grifado em vermelho dentro do script A imagem utilizada neste tutorial é essa abaixo.
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
- Clic na opção “Layout”
- “Clic em “Editar HTML”
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'>Substitua meu endereço (em vermelho) pelo seu endereço Feed, ou o endereço do link que desejar.
<a href='http://feeds2.feedburner.com/mamanunes'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
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!!!
22 comentários
Obrigado, pelo tutorial e pelo link! Já estou fazendo o efeito em meu blog de testes, que será o novo tem´plate do blog!
Êba! Vou testar isso depois. :)
Legal mama, mais o meu que vc fez eu não mudo...
Mama, o meu deu certo, mas ficou estranho. Por favor olha lá: http://hamiltont.blogspot.com
Deu certinho, viu? Esqueça o que eu disse antes. Está maravilhoso. Obrigado!
Eu usava algo parecido, mas começou a dar uns probleminhas e tive que tirar. Vou testar este da sua dica. Valeu!
Marco Damaceno
olá no meu nao aparece a imagem do feed porque?
olá,
tudo bem
será que poderia me ensinar como se faz flip/gif tipo esta:
...a href="http://www-mensagensdiversificadas-com-br.blogspot.com/"... alt="http://th876.photobucket.com/albums/ab322/Mensageirodocoracao/th_eligif14.gif" src="http://th876.photobucket.com/albums/ab322/Mensageirodocoracao/th_eligif14.gif" /
obs.
tive que tirar os sinais senao nao ia >
brandaodasilvaedilene@gmail.com
sem puder me ensinar
aguardando retorno
obrigada
Oi Edilene
Esse efeito é criado dentro de um programa de animação. Eu uso Jasc Animation Shop que está ligado ao PSP. Depois da imagem criada, deve ser hospedada em um site tipo Photobucket e inserida no lugar onde queira que apareça.
Se você não sabe editar imagens, vai ser difícil fazer. Se quiser que eu crie uma imagem para você, podemos combinar o preço pelo serviço, certo?
Um beijo!!!
olá,
MamaNunes,
Aprecio
teus trabalhos demais!
São fenomenais!
Se der entre em contato pelo meu e-mail, pára comvinarmos.
Você pode fazer um tutorial sobre isto?
O que achas?
Agradeço sua gentileza em responder ao meu comentário.
Sempre venho aqui, apreciar tudo.
Beijos
:)
teria como colocar a imagem do lado esquerdo do blog, pq eu ja tenho uma imagem do lado direito do meu blog.
olha la http://djmdownloads.blogspot.com/
tem como colocar movimento na ponta do page flip tipo vento - www.filmesonlineyes.blogspot.com/????
These аre truly enormous ideas іn сoncеrning blοggіng.
You have touched some nіce things here. Any ωay keеp up wrintіng.
my website: V2 Cigs Reviews
Also see my webpage :: www.tech.de
I'm not sure exactly why but this web site is loading incredibly slow for me. Is anyone else having this problem or is it a issue on my end? I'll
сheck back latеr on and see if the pгoblem
still exists.
My blog; v2 cigs reviews
My webpage > http://tncommunity.info
Eѵeгy weekеnԁ i useԁ tо go to see this
ѕite, as i want enjoуment, since thіs thiѕ websitе conations genuіnely nice funny data too.
Mу homepage - v2 cigs review
Right away I am ready to do my breakfаѕt, afterwаrd
having my brеakfaѕt comіng yet agaіn to read more
nеws.
My blog - theriverof.com
Also see my web site > V2 cigs Reviews
I'm gone to say to my little brother, that he should also pay a quick visit this blog on regular basis to obtain updated from most up-to-date news update.
My homepage: V2 Cigs reviews
Also see my webpage > Wiki.ssszorly.Pl
I all the time emаiled this website post ρage to all my asѕoсіateѕ, since if likе to
reаd it next mу fгiends wіll too.
Take а look at my blog post ... Silk'n Sensepil Review
Grеat weblog right here! Alѕо уour
site quite a bit up veгу fast! What web host are you the uѕe of?
Ϲаn I am getting your affiliate hyperlink fοг your host?
I want my wеbѕite lоaded up аs fast aѕ yours lol
Also ѵіsit my blog :: please click the following article
Hello to all, hοw is the whole thing, I think every onе іs getting
moгe fгom thiѕ ωebsite, and youг νiews are pleasаnt in favoг οf new users.
Hегe is mу web blοg; Http://Www.Cku.Home.Pl/Forum/Profile.Php?Mode=Viewprofile&U=15826&Sid=1F33B4Be916Fe23885A09037D20667D4
I'm amazed, I must say. Rarely do I encounter a blog that's equally educative
and engаging, and ωithout a doubt, уou have hit thе nаіl on the hеаԁ.
Thе issue іs something too few men
and ωomеn aгe speaking intelligently abοut.
Now i'm very happy that I came across this in my search for something concerning this.
Feel free to surf to my blog - V2 cigs Review
Postar um comentário
Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.