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="https://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

Qual navegador você usa?

Chrome (959)
Opera (129)
Firefox (73)
IE (Edge) (14)
Safari (3)

Total de votos: 1178

Parceiros

 
  
  

Enquete

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

Sim (151)
Não (184)

Total de votos: 335