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

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;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.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

- - 2 Comentarios
Tag

Comentarios (2)

  1. Gracias muy bueno, lo he implementado a mi blog y quedo genial.. Acá una captura http://i.imgur.com/J5ncXUZ.jpg

    ResponderEliminar
    Respuestas
    1. Genial que te halla servido y implementado en tu blog !!

      Suerte y Exitos

      Eliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar