Cursos 24 Horas - Cursos 100% Online com Certificado

Caixa de Mensagem Flutuante no Blogger

caixa

Com este recurso você pode colocar mensagens no seu blog de forma a deixa-las flutuando na página, também é possível inserir uma caixa de assinatura de Feed. Tornando o acesso ao seu blog mais interativo e interessante para o leitor que o acessa, veja um demo.Veja como trazer está solução para o seu blog.

1) Acesse o painel do Blogger(blogger.com)

2) Vá em Layout-> Editar HTML

3) Procure pelo seguinte código utilizando as teclas CTRL e F:

</head>

Antes do código acima insira o seguinte:

<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
// Carrega jQuery
google.load(&quot;jquery&quot;, &quot;1.3&quot;);

google.setOnLoadCallback(function() {
$(document).ready(function()
{
//primeiro slide para baixo e pisca a caixa de mensagem
    $(&quot;#caixa&quot;).animate({
        bottom: &quot;-1px&quot;
      }, 2500
).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
//Fechar a caixa de mensagem quando a imagem da cruz é clicada
   $(&quot;#fechar_mensagem&quot;).click(function()
    {
       $(&quot;#caixa&quot;).fadeOut(&quot;slow&quot;);
    });
});
});
</script>

4) Agora procure pelo seguinte:

<body>

Abaixo do código anterior insira o seguinte:

<div class='mensagem' id='caixa'> 
<img id='fechar_mensagem' src=’http://arquivos.noticiaeblog.com/fecha.png' style='float:right;cursor:pointer'/>
<b>Minha Mensagem</b>

<p>Teste da caixa de mensagem flutuante para Blogger</p>

</div>

Obs: Mude os trechos em vermelho pela mensagem que deseja que apareça já com a formatação em HTML. Pra saber mais sobre HTML veja a nossa serie Aprenda Códigos HTML e Ganhe Mais Visitas, partes: 1,2,3.

5) Procure pelo seguinte trecho:

]]></b:skin>

Antes do trecho acima insira:

.mensagem{
    border:1px solid #CCCCCC;
    position:fixed;
    width:150px;
    border:1px solid #c93;
    background:#ffc;
    padding:5px;
    right:2px;
    bottom:25px;
}

Obs.: Você mudar as cores da caixa utilizando cores alfanuméricas. Para ver cores clique aqui.

6) Salve as alterações

---------------------------------------------------------------------------------------------------------------------------

Obs. Gerais: Para transformar a caixa em um local para assinatura de Feed/RSS, basta substituir o trecho em vermelho do passo 4 pelo seguinte:

<b>Assine o Feed</b>
<p>Fique informado da novidades do blog por e-mail</p>   
<p><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Noticiaeblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Digite seu e-mail:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='Noticiaeblog'/><input name='loc' type='hidden' value='pt_BR'/><input type='submit' value='Assinar'/></form></p>

Atenção altere o trecho em vermelho pelo seu nome de Feed, se não sabe veja o exemplo a seguir.

Nosso endereço de Feed: http://feeds.feedburner.com/Noticiaeblog

Nosso nome de Feed: Noticiaeblog

Aproveite e assine o nosso Feed para concorrer a um dominio para o seu blog.

 

Fonte: Blogger Widgets

    9 Comentários

    Jc Denton disse...
    10 de maio de 2010 22:47 #

    Olá fernando, estou aqui para te convidar a participar da campanha I ♥ Firefox, onde vamos juntar uma comunidade de blogueiro para mostrar para o mundo que o melhor mesmo é o firefox!

    http://www.jethot.com.br/2010/05/campanha-i-firefox.html

    Jc Denton disse...
    10 de maio de 2010 22:47 #

    E quanto ao post eu tentei e não funcionou!

    Notícia e blog disse...
    11 de maio de 2010 12:53 #

    @Jc Denton, olha posso dar meu apoio mais eu ainda prefiro o Google Chrome, mas acho que isso é uma opinião pessoal cabe a cada um definir.

    Olha a respeito do post tente fazer de novo pois testei várias vezes e funcionou, veja se você já possui o jquery pois pode haver um conflito entre os dois, ai basta você retirar o que você já tem e colocar este que coloquei.

    gilvancn disse...
    24 de maio de 2010 03:59 #

    Ola amigo, gostei do post, só que não estou conseguindo implementar no meu blog. Deve ser por causa do jquery. Mas como retirar o antigo? Outra perguntinha: Como colocar a página do feed (http://feeds.feedburner.com/Noticiaeblog) toda em portugues? Desde já agradeço a sua atenção, obrigado!

    Clube da risada disse...
    12 de junho de 2010 09:10 #

    Muuto bom mesmo, obrigado!

    Adriano Luz disse...
    6 de outubro de 2010 19:14 #

    Este recurso é muito interessante para atrair novos leitores...

    Álysson Montiériton disse...
    26 de novembro de 2010 17:08 #

    Gostaria de Saber, Meu amigo como ativar assinaturas por e-mail do feeds?
    Desde já Obrigado!

    Kaique disse...
    1 de julho de 2011 03:24 #

    QUERIA SABER COMO PONHO UMA IMAGEM NO LUGAR DO TEXTO

    Renato S. Oliveira disse...
    8 de julho de 2011 10:20 #

    Tentei também e não funcionou!
    Verifica o código para que possamos adiciona-los em nossos blogs/sites!

    Procurando parceria? Eu também, passa lá e siga-me, farei isso também!
    bloguedorenato.blogspot.com

    Até mais

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.