Tutoriales Sobre Blogger: Crear barra de Notificaciones transparente para Blogger

En este Tutorial veremos como Crear una Barra de Notificaciones transparente para nuestro blog. Esta barra de Notificaciones puedes utilizarla como Noticias sobre tu blog ya
que atrae la atención a tus lectores.
O puedes añadirlo para  tus redes sociales tales como Twiter o Facebook.
También tiene un pestaña de Cierre



Antes que nada veremos una demostración

Demostración

Comencemos

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

</body>

• Paso 3: Justo por encima de </body> pegamos el siguiente código

<!-- Codigo de Notificación -->
<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAPMw7jYmjk6KXB7d4nLm-a6KYYIAsIjpoEciYtP_jxOUph4K87cIXDv3zzqwsR_NgVixjm8w7fXVLNbFbbTNL93W8T6hbvGRe1fH7kh9oSAcSuaQNqHv2Gw4pafvWCRAiC5wouktzszRn/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.tutorialesblogger.blogspot.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 - http://Turorialesblogger.blogspot.com --> 

• Paso 4: Guardamos la Plantilla

Nota:- 
Solos debes de Cambiar lo que esta en ROJO 
Para agregarle un Enlace Cambia lo que Esta ESTE