Barra de notificaciones para Blogger

Barra de notificaciones para Blogger

Aquí les traigo un sencillo código para agregar una barra de notificaciones transparente para tu blog en Blogger,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.  el cual se puede utilizar para resaltar informaciones, noticias, etc., y que cuenta con un botón de cierre.

De todos modos, es posible ver un ejemplo de dicha barra en esta misma página, así que si es de tu agrado, aquí les digo como agregarlo:

Vamos a "Plantilla" 

                                                         

Abre "Editar HTL

                                                                  

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

                                                                                        

</body>

 En la línea anterior a </body>, vamos a copiar y pegar el siguiente código:

<!-- Codigo de Notificación -->
<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGfsH8Y2TTcf2SCDP5Lsc8RIrWUC1Hxzykqe0aq09-34lvkDo3OnaeLdEc2Sbybgcv1vuYBSMKCjknjRm2JYsHz8MWyMDMdWzupzKaYbF3IDyQRYbMe0UrFoBC2KX0FY2PKlYAbsuN7FqY/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>Titulo de la Barra de Notificacion Transparente <a href=' http://tutorialesbloggerkiradober.blogspot.com.es' target='_blank'> Implementarla en tu blogger  mensaje o noticia</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 -->

Cambios:

Para redirigir cuando le den clic en el mensaje o noticia canbia la URL por la necesaria:

Titulo barra de Notificacion:

Como siempre, pueden ver este código en acción en esta misma página en la parte inferior del Blog.

 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>


Fuente;   Blogarizate

Fecha:31/01/2017


Publicado por: