Destacar Feed do Blog com efeito de página [Peel Effect]

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Newspaper_Feed Se o seu blog tem conteúdo e já atrai visitantes, é hora de destacar seu Feed e fidelizar seus leitores. Descobri um efeito bem interessante para você usar em seu blog, como uma forma de divulgar seu Feed (ou o que mais desejar) com o efeito de arrastar o canto da página, como se fosse uma folha de papel.

O Feed é a forma de seus leitores se manterem atualizados automaticamente e em contato com seu blog, mesmo sem precisar abrí-lo. Isso é fundamental para um blog bensucedido.

 

O resultado do efeito que vamos mostrar nesse tutorial pode ser visto no canto superior direito da dela do Blog Lemos [Idéias]http://www.lemosideias.com/.

 

Conquistar leitores e visitantes constantes é uma tarefa complicada e difícil para qualquer blog, de todos os tamanhos e nichos. Mais difícil disso tudo e conseguir que as pessoas voltem para continuar lendo seus artigos e acompanhando as suas atualizações. E, a melhor forma de fazer isso, é dar destaque ao seu Feed.

Não sabe o que é Feed? Leia:

 

Todas as formas formas de divulgação de seu Feed são importantíssimas. A pessoa assinante de Feeds, seja do seu blog e quantos mais desejar, recebe atualizações sem precisar visitar um por um de seus sites preferidos, o que agiliza a navegação por sites de interesse. Então, conquiste esse tipo de leitor que é o mais fiel. Se gostarem do seu blog ao ponto de desejarem receber seu conteúdo sempre que for atualizado, significa que seu blog tem qualidade e é relevante para aquela pessoa.

 

Escrevemos um artigo ensinando como divulgar seu Feed e ter mais assinantes:

E agora vamos ensinar você uma ótima forma de divulgação, que não vai ocupar espaço em seu layout e exige pouca adaptação.

 

livros-leitores-blog

 

Efeito Canto de Página para Feed – Peel Effect.

1. Abra o Painel do Blogger e clique em “Layout” ~> “Editar HTML” para procurar em seu código-fonte a seguinte linha:

 

</head>

 

2. Exatamente ANTES dela, cole esse código sem fazer nenhuma modificação:

 

<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(https://ferramentasblog.com.br/imagens/subscribe01.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>

 

Obs.: Em destaque é o link da imagem usada. Você pode usar outra ou modificar, mas só recomendamos para quem sabe trabalhar com imagens, pois uma parte dela usa transparência.

 

3. Agora, ainda no código-fonte, praticamente nas linhas seguintes onde você está, encontre:

 

<body>

 

4. Logo DEPOIS disso cole o restante do código que faz o efeito funcionar:

 

<div id='pageflip'>
<a href='URL-do-seu-Endereço-FEED'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

 

Colocando onde mostramos em vermelho o endereço do seu Feed.

 

5. Salve o modelo clicando no botão laranja, abaixo do editor do código-fonte, “SALVAR MODELO” e veja o resultado em seu blog.

 

Com muita criatividade e sabendo usar imagens, você poderá criar outros efeitos de seu interesse com outras mensagens de canto de página. Lembre-se de ter muito empenho em fidelizar seus leitores, mas sem descuidar da qualidade de seu conteúdo.

Claro, assine o nosso Feed para manter-se sempre atualizado e ajudar a melhorar o seu blog.

 

Fonte: Simple Page Peel Effect for Blogger.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

8 Comentários

  1. Muito bom!
    Fácil, rápido, ótimo efeito. Coloquei no meu blog e ficou muito bom!
    stanleyrossine.blogspot.com
    Stanley

    Responder

  2. Existem algumas funcionalidades que apresentam efeitos muito bonitos. Esta é uma delas. Não combinou muito com o meu blog quando testei, mas certamente abre possibilidade para diversas ideias que tenho. Parabéns pelo blog, Marcos.

    Responder

  3. Como diria o povo daqui de JF: ficou violento! rsrsrs. Combinou direitinho com meu blog.
    Muito bom! Seu blog é d+!

    Marco Damaceno

    Responder

  4. No meu comentario anterior eu tinha testado somente no Firefox. Testei no IE8 e pra minha "surpresa" não ficou no local exato.
    Tive que mudar alguns valores do css (sou leigo no assunto, mexo de curioso e corajoso). Troquei o primeiro valor position que estava como relative por absolute.
    Depois ficou certinho nos navegadores.

    Marco Damaceno

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.