Como criar uma caixa de Mensagem Flutuante no Blogger

30 setembro 2010

Como criar uma caixa de Mensagem Flutuante no Blogger

Posted on 12:52 by Beatriz ribeiro

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 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=seu nome de Feed&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='seu nome de Feed'/><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.

Blogosfera

30 setembro 2010