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

Blogger, Feed / RSS
8
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.

.

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

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

    Marco Damaceno

    Responder

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