Barra de notificacion o de aviso para Blogger I

 En este nuevo articulo vamos a ver como poner una barra inferior de notificación en Blogger, esta barra servirá para dar a conocer a nuestros usuarios de un evento importante o alguna noticia revelante.

 La barra como podéis ver en la imagen inferior, es una barra semi-transparente con la posibilidad de poner enlace si queremos, un dato importante para que la barra no se desvirtue, es que la frase que coloquemos sea de tan solo un reglón.
barra de notificacion

Pasos a seguir para implementar la barra de aviso:

 Lo que debemos de hacer para implementarla es ir a Plantilla>Editar HTML y una vez en la plantilla de codigo HTML buscamos (Ctrol+F) la siguiente palabra </body> y justo una linea arriba de esta colocamos el siguiente código:

<!-- Codigo de Notificación -->
<style type='text/css'>
#ut-sticky
{
background:url(&#39;http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/s1600/ut-bg.png&#39;) repeat;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 1px solid #fff;
height:28px;
font-size:13px;
position:fixed;
bottom:0;
z-index:999;
width:100%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>
<p>
<style type='text/css'> #ut-sticky { background:url(&#39;http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/s1600/ut-bg.png&#39;) repeat; color:#fff; text-align: center; margin:0 auto; border-top: 1px solid #fff; height:28px; font-size:13px; position:fixed; bottom:0; z-index:999; width:100%; border-top-left-radius:15px; border-top-right-radius:15px; display:block; font-weight: bold; font-family: arial,&quot;Helvetica&quot;; font-color:#fff; } #ut-sticky:hover {background:#333;} #ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;} #ut-sticky p a{ text-decoration:underline; color:#FFFF33;} .ut-cross{display:block; position:relative; right:15px; float:right;} .ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;} </style> <div id='ut-sticky'> <p>Esta es una Barra de Notificacion Transparente <a href= 'http://www.mejorblogger.com' target='_blank'> Implementarla en tu blogger</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>
<!--Codigo de Notificación info -->
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div> </div> <script language='JavaScript'> function hide_cross() { crosstbox = document.getElementById(&quot;ut-sticky&quot;); crosstbox.style.visibility = &#39;hidden&#39;; } </script> <!--Codigo de Notificación info -->

 Y cambiamos solo lo que esta subrayado de colores, siendo el color Amarillo la frase que queremos poner, el color Azul la URL y el color Verde el texto que se muestre en lugar de la URL.

0 Response to "Barra de notificacion o de aviso para Blogger I"

Publicar un comentario