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"