Crear una barra de notificaciones transparente en Blogger

Aquí les traigo un sencillo código para agregar una barra de notificaciones transparente para tu blog en Blogger, 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:

Ya dentro de Blogger, buscamos Plantilla y seleccionamos "Edición de HTML". Vamos a buscar (Con Control+F ó F3 en el teclado) la siguiente línea:

</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/AVvXsEg-MPIWOjziIeKS0yLS3U-k17WT3HohuDJI9z2V2wixRTq5QfJ_1C9-DJr_IEkUYm4bvgdwT9T9Jt936RJkkbIUSgB1hvDR0u1hqdIIqdzfXFOJti8pSgCxlgE7Ks0JAQW9B5aO0EJXe-ir/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.blogarizate.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 -->

El texto resaltado en amarillo lo vamos a modificar por el texto que deseamos; y el texto en azul y verde son los datos del enlace que vamos a mostrar, primero cambiamos la dirección (texto en azul claro) por una que nosotros deseamos, y después el texto de dicho enlace (en verde).

Guardamos la plantilla y listo. Puedes revisar tu blog y ver si todo anda correctamente.

¿Te gustó? ¿Tienes alguna pregunta? Déjanos un comentario.

Fuente: Tutoriales-blogger

Comparte:

Tweet