Mensaje tipo post-it para informar a los lectores de tu blog


Si quieres que aparezca un mensaje estilo post-it en tu blog para informar a tus lectores de algo importante, deberemos hacer lo siguiente:



1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript
5) Pegamos el siguiente código:



<style>
<!--
#postit{width:300px; height:200px; padding:5px; position:absolute; background-color:yellow; border:1px solid black; visibility:hidden; z-index:50; cursor:hand; color: #000;}
a:link {color: #000000; text-decoration:none;}
a:visited {color: #000000;}
a:hover {color: #000000;}
a:active {color: #000000;}
-->
</style>

<div id="postit" style="left:200px;top:50px">
<div align="right"><b><a href="javascript:closeit()"><font face="Arial" size="1">[CERRAR]</font> <img valign="middle" src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/CloseIcon-small.png"/></a></b></div>

<!--AQUI VA EL MENSAJE-->
<br/>
Aquí va el mensaje que se mostrará

<!--FIN DEL MENSAJE-->


<script>

//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0

///No need to edit beyond here///

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit


function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}

function get_cookie4(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie4.length > 0) {
offset = document.cookie4.indexOf(search)
if (offset != -1) { // if cookie4 exists
offset += search.length
// set index of beginning of value
end = document.cookie4.indexOf(";", offset);
// set index of end of cookie4 value
if (end == -1)
end = document.cookie4.length;
returnvalue=unescape(document.cookie4.substring(offset, end))
}
}
return returnvalue;
}

function showornot(){
if (get_cookie4('postdisplay')==''){
showit()
document.cookie4="postdisplay=yes"
}
}

function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}

if (once_per_browser)
showornot()
else
showit()


</script>

<script language="JavaScript1.2">

//drag drop function for ie4+ and NS6////
/////////////////////////////////

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}

function initializedrag(e){
if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script></div><div class="clear"/></div>





Si deseas cambiar el tamaño debes modificar width (largo) y height (ancho). También puedes cambiar ese color amarillo chillón por el que tu quieras en background-color. Sólo nos queda poner el mensaje que queramos.
En donde pone var once_per_browser=0  podemos cambiar el 0 por un 1. De esta forma sólo nos aparecerá una vez el mensaje.



De nuevo mil gracias a ciudadblogger.

13 comentarios:

  1. Gracias a ti por tu visita y por dejar un comentario. Me alegro que te guste el contenido.

    ¡Un saludo!

    ResponderEliminar
  2. Muchisimas grácias T-T me has ayudado mucho!!!!!!!
    visita my blog ^_^

    ResponderEliminar
  3. Hola Porty, me alegro que te sea útil. Tu blog está muy interesante, enhorabuena. Gracias por participar.

    ResponderEliminar
  4. Hola, el truco es genial, pero he advertido ciertas irregularidades. Tras aplicar el mensaje de aviso, el color del título de los textos, así como el texto de la sidebar, pasar a ser de color negro, independientemente del color asignado para los mismos desde la configuración principa. Salvo ese pequeño detalle, es una gran opción la de este cartel de aviso.

    ResponderEliminar
  5. Hola Old School Generation. Tienes razón, a mí me ocurrió, pero pensé que sólo me ocurría a mí. De todas formas este tipo de mensaje es recomendable usarlo de forma puntual unos días, por lo que tampoco "molesta" mucho en consonacia con el blog.

    Gracias por tu mensaje y gracias por comentar.

    ResponderEliminar
  6. Seguro que esto no ¿va en el html de la plantilla?
    pues sigo tus pasos y no me sale nada ¿Por que sera? espero y me ayudes con mi problema.

    Pd Creo que no me especifique es que no me aparece el mensaje.

    ResponderEliminar
  7. Holha Gigaman. Todo el código va en un gadget HTML/Javascript, te lo aseguro. Mucha gente lo ha empleado ya en sus blog, yo mismo incluido.

    Comprueba que has copiado correctamente todo el código, ya que es muy largo y puede haber un descuido al copiar-pegar.

    ResponderEliminar
  8. Hola

    Bueno pues este truco es que el que andaba buscando tanto pero como siempre tengo problemas... :D en este me va todo bien cuando dejo el valor de "var ..." en 0 pero como me parece algo molesto lo pongo en 1 y al abrir la pagina tarda mucho en cargar y despues aparece con errores (no se ve el mensaje).

    No se si me has entendido lo que te quiero decir.

    Saludos

    ResponderEliminar
  9. Hola Ana. Sí te he entendido. No sé cómo ayudarte puesto que a mí al cambiar el 0 por el 1 era como sino pasase nada. En algunas plantilla parece que hay problemas y en otras no los hay. Misterios sin resolver. Te recomiendo emplear este gadget de forma puntual. Lamento no poder darte una solución, un saludo ;)

    ResponderEliminar
  10. en vez de un texto se podria poner una imagen?

    ResponderEliminar
  11. Hola David. Por supuesto. Deberías seguir esta entrada http://www.quierocrearunblog.com/2009/10/como-crear-enlaces-otra-web.html con ese código en lugar de poner un texto.

    Saludos y bienvenido.

    ResponderEliminar
  12. Hola amigote, mil gracias por todo lo que me has ayudado, creible !!!!

    Trate de poner el post .... pero no hay forma, hice todos los pasos y no me lo permite....solo me deja poner la frase, sin el post en amarillo

    Agradecida en lo que me puedas ayudar !!!
    Namasté

    Gracias, Gracias, Gracias
    Namsté

    ResponderEliminar