Sobre o Blog

MamanunesO 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.

Info

19.9.09

rss3
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
$(&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.

    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

    Isadora Fraga

    Obrigado, pelo tutorial e pelo link! Já estou fazendo o efeito em meu blog de testes, que será o novo tem´plate do blog!

    Helen Fernanda

    Êba! Vou testar isso depois. :)

    Leão Bodybuilding

    Legal mama, mais o meu que vc fez eu não mudo...

    Anônimo

    Mama, o meu deu certo, mas ficou estranho. Por favor olha lá: http://hamiltont.blogspot.com

    Anônimo

    Deu certinho, viu? Esqueça o que eu disse antes. Está maravilhoso. Obrigado!

    Anônimo

    Eu usava algo parecido, mas começou a dar uns probleminhas e tive que tirar. Vou testar este da sua dica. Valeu!

    Marco Damaceno

    @lucasandresep

    olá no meu nao aparece a imagem do feed porque?

    flo

    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 >

    flo

    brandaodasilvaedilene@gmail.com

    sem puder me ensinar
    aguardando retorno
    obrigada

    MamaNunes

    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!!!

    flo

    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
    :)

    Jorge'Afonso

    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/

    Anônimo

    tem como colocar movimento na ponta do page flip tipo vento - www.filmesonlineyes.blogspot.com/????

    Anônimo

    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

    Anônimo

    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

    Anônimo

    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

    Anônimo

    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

    Anônimo

    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

    Anônimo

    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

    Anônimo

    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

    Anônimo

    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

    Anônimo

    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.