Muchas veces es importante notificar a nuestros usuarios sobre alguna noticia importante, rápida y de temporada. Por ejemplo, notificarles sobre algún cupón o promoción que queramos compartir, un evento, etc, así que por lo general no necesitas crear o publicar una entrada que pasará mucho permanentemente visible y que no debemos de eliminar posteriormente ya que una vez indexada nos dará un error 404, el cual no deseamos en nuestro blog.
Dicho lo contrario, ahora sabemos la importancia de usar una barra en la parte superior de nuestro blog, siempre y cuando no sea molesta para la navegabilidad del sitio, así que haremos lo siguiente:
El código lo dividiremos en 3 partes:
- Un código javascript
- La hoja de estilo CSS o el código exactamente.
- Las capas o código que mostrará la barra
Manos a la obra y empecemos. Primero vamos a nuestra cuenta de Blogger y seleccionamos el icono de “más opciones” que se encuentra al lado de “ir a más entradas” y hacemos clic en “Plantilla” y posteriormente “Edición HTML”.
Buscamos el siguiente código:
<b:skin><![CDATA[/*Y ahora abajo agregamos nuestro CSS:/* CSS de Barra de Notificaciones Inicio */#wcsticky-container {height:46px;width:100%;position:fixed;z-index:99999;top: 0px;left:0px;background:#222222; -moz-border-radius:5px; -webkit-border-radius:5px;color:#ffffff;border-bottom:solid 2px green;-moz-box-shadow:5px 5px 5px #333333;-web-kit-box-shadow: 5px 5px 5px #333333;-goog-ms-box-shadow: 5px 5px 5px #333333;box-shadow:3px 2px 4px green;}
#wc-stickylinks{color:green;font:14px verdana;margin-top:12px;margin-left:20px;text-decoration:none;}#wc-stickylinks a{font:14px verdana;color:#ffffff;text-decoration:none;}#wcstickyclose{float:right;margin-top:15px;margin-right:20px;}#wcstickyclose a{color:#ffffff;text-decoration:none;font:14px verdana;padding:3px;background:red;border-radius:10px;}#wcsticky-main{float:left;}/* CSS de Barra de Notificaciones FIN */
Ahora buscamos el cierre de head:
</head>
Y antes agregamos:
<script language='JavaScript'>function closesticky() { document.getElementById("wcsticky-container").style.visibility = "hidden"; } </script>
Por ultimo solo vamos al final y antes del cierre de body:
</body>
Y antes de esta etiqueta agregamos:
<div id='wcsticky-container'><div id="wcsticky-main"><p id='wc-stickylinks'> Aviso importante:<a href='#'>Gana con GadgetsBlogger</a> | <a href=''>Inscribete en nuestro concurso!</a></p></div><div id="wcstickyclose"><a href="javascript:closesticky();" >Cerrar</a></div></div>
Como siempre, pueden ver este código en acción en nuestro blog demo el cual ha sido modificado de la fuente original Windroidclub. Les recomiendo usar el código tal y como lo hemos publicado para optimizar la carga de tu blog.
Recuerda que puedes realizar los cambios que quieras editando la parte del CSS en caso de que quieras usar otra fuente o colores de la barra así como el mensaje a mostrar que es la parte del código que va antes de cerrar BODY.