Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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