Colocar barra de informações no topo do site

Que tal adicionar uma barra informativa fixada no topo de seu site? Excelente para promover aquela publicação especial ou mostrar que o blog ou site está em manutenção.

Veja uma demonstração 

 

Como instalar

  • Copie este codigo
<div id="infobar" style="padding:4px 4px 4px 4px;position:fixed;z-index:999;left:0px;top:-100px;width:100%;border-bottom:1px solid #000000;background-color:#32CD32">
<a href="javascript:closeInfoBar()"><img src="icon_close.gif" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px" /></a>
<span style="color:#800080;font-size:12px;font-family:Arial;font-weight:bold;font-style:normal;text-decoration:none;padding:0px 0;">SEU TEXTO AQUI</span>
</div>
<script type="text/javascript">
function showInfoBar()
{
   var infobar = document.getElementById("infobar");
   var top = parseInt(infobar.style.top);
   if (top < 0)
   {
      top += 5;
      infobar.style.top = top+"px";
      setTimeout(function(){showInfoBar()}, 50);
   }
   else
   {
      if (document.all && !window.XMLHttpRequest)
         infobar.style.setExpression("top", 'document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px"');
      else
         infobar.style.top = 0;
   }
}
function closeInfoBar()
{
   document.getElementById("infobar").style.display = "none";
}
function initInfoBar()
{
   var docWidth = 800;
   if (typeof window.innerWidth != 'undefined')
   {
      docWidth = window.innerWidth;
   }
   else 
   if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
   {
      docWidth = document.documentElement.clientWidth;
   }
   else
   {
      docWidth = document.getElementsByTagName('body')[0].clientWidth;
   }
  // document.getElementById("infobar").style.width = "100%";
   var height = parseInt(document.getElementById("infobar").offsetHeight);
   document.getElementById("infobar").style.top = height*(-1)+"px";
   showInfoBar();
}
initInfoBar();
</script>
<a href="http://maiochristopher.webnode.com.br/dicas-webnode/">MaioChristopher - InfoBar - Adicione em seu Site!</a></p>
  • Modifique o texto em vermelho pelo o seu
  • Para mudar a cor de fundo da barra, modifique o texto em verde escuro para o codigo da cor que desejar
  • Para mudar a cor do texto, modifique o texto em verde claro para o codigo da cor que desejar
  • Descubra o codigo da cor deseja aqui

Instale sempre como "Código Embutido"

 

contador free
 
 
    

Enquete

Voce joga muito pelo celular?

Sim (631)
Raramente (47)
Não (54)

Total de votos: 732

Parceiros

  

Enquete

Você gosta de radio automática em um site?

Sim (81)
Não (89)

Total de votos: 170