Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508408623
Vida do cache: 1508451823
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Códigos e Scripts

Destacar Feed no blog com efeito Flip Page

Divulgar seus Feeds aos seus leitores no blogger é essencial.

Hoje vou ensinar como dar um efeito especial à divulgação do seu Feed sem que o mesmo ocupe muito espaço em seu layout.
De maneira bem simples, você pode ter seu Feed divulgado com efeito Flip no canto de página do blog.
Confira o Efeito Flip Page neste blog de teste.

Como instalar:

Entre na edição HTML do seu template, clique em “Expandir modelos de widgets” e procure por ]]></b:skin>
e cole o código a seguir logo ABAIXO dele:


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

Agora procure pela tag <body> e DEPOIS dela, cole o código a seguir:


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

Visualize, se estiver tudo correto, salve!

Não esqueça de colocar o endereço do seu Feed na parte destacada em azul.
Destaquei o link da imagem usada, para que, caso você queira trocar por uma imagem criada por você, facilite a identificação da mesma.

Se você souber usar imagens, você pode usar da sua criatividade , podendo criar outra imagem em formato PNG encrementando seu 'Feed Flip Page'.
Segue abaixo a imagem modelo usada no exemplo acima, para que você possa tomar como base as medidas, visto que estas não poderão ultrapassar as mesmas da imagem modelo.

(Clique na imagem para ampliá-la e salve no seu pc)

Agora a divulgação do seu Feed ficará mais atraente.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

7 Comentários

  1. Michel disse:

    Oi Vanessa tudo bem ?
    Vanessa você saberia dizer se esse código serve para plataforma do Webnode ?
    Obrigado desde já.

  2. .:: Clau ::. disse:

    Bruno matheus
    Como não? O.o
    "Body" é o corpo do html, todo template tem esse trecho!
    Geralmente fica bem abaixo de /head

  3. bruno matheus disse:

    NÃO ACHEI O < body > nem quando eu expandi o modelo e nem no normalquando eu apertei Ctrl F!
    o que eu faço?

  4. .:: Clau ::. disse:

    Q bom que vcs gostaram. Obrigada pelos comentários.

  5. claudiollisias disse:

    Meu Amor vc é uma anjo, adorei essa postagem, estava mesmo precisando divulgar meus feeds.
    Valeu!!!

  6. Clube da risada disse:

    Sim, tenho poucos leitores no feed pela falta de divulgação, vou procurar divulgá-lo mais nos pots e nessa ferramenta que o post me ensinou. Abs!

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.