Mensaje tipo Post-it para el blog

7 de septiembre de 2009 83 comentarios ,
post it
Ahora que estuve ausente se habrán dado cuenta que al entrar al blog aparecía un mensaje indicando que me encontraba fuera de la ciudad. Este mensaje tiene la opción de cerrarse para no molestar al visitante y se puede usar para poner cualquier tipo de aviso importante en el blog.

Para colocar un mensaje tipo Post-it en tu blog sólo entra a Diseño | Añadir un gadget | HTML/Javascript y pega ahí lo siguiente:
<style>
<!--
#postit{width:300px; height:100px; padding:5px; position:absolute; background-color:yellow; border:1px solid black; visibility:hidden; z-index:50; cursor:hand; color: #000;}
-->
</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á cuando alguien ingrese al blog.
Para más trucos y tutoriales visita <a href="http://ciudadblogger.com">Ciudad Blogger</a>


<!--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>

En la primera parte del código (la que está en color verde) puedes cambiar el color de fondo, el color de la letra, el tamaño del cuadro, etc.
Tu mensaje debes ponerlo cambiando lo que está en color rojo, puedes usar negritas, cursiva, links, etc.
Si quieres que el aviso aparezca sólo una vez por sesión cambia donde dice:
var once_per_browser=0

Y modifica el 0 por 1, de lo contrario el mensaje aparecerá cada vez que recargue la página o se abra otra página dentro del mismo blog.

Así de sencillo puedes avisar a tus lectores de lo que creas importante.


83 comentarios en:

" Mensaje tipo Post-it para el blog "

  1. Potro:
    Muy buen dato.
    Más de alguna vez se usará en el blog.
    Excelente para avisos, etc.
    Saludos,
    Jpz.-

    ResponderEliminar
  2. Estoy seguro que sí, es bastante útil.
    Saludos!

    ResponderEliminar
  3. hola el potro poes hace rato que lo puse pero quisiera saber como le puedo cambiar el color de fondo pero no se como y gracias por la ayuda queria saber como por que te voy a poner en mis enlaces del blog junto con otras personas jeje entonces ojala que me puedas ayudar

    ResponderEliminar
  4. Hola it's notice,

    En la primera parte del código en color verde busca esta parte:

    background-color:yellow;

    Cambia donde dice yellow por el color que quieras, puedes usar cósigos de color, por ejemplo #FFFFFF para el color blanco.

    Saludos.

    ResponderEliminar
  5. Wow... muy útil.. de hecho me hubiese servido mucho estos días que estuve mal... y me alejé bastante del mundo de la internet...

    Un abrazo!!!!

    ResponderEliminar
  6. Uhhh, y mira que este post lo iba a publicar desde hace tres meses atrás, pero mejor que no lo hayas puesto estos días, sino te alejarías más del Internet.

    Un abrazo!

    ResponderEliminar
  7. Si... creo que tienes razón en eso... Todos los dias pienso en que le estoy fallando a mis pocos y fieles usuarios :( ...

    Espero que todo esté bien pronto...

    Un abrazo!!!!

    ResponderEliminar
  8. Muy bueno el truuucooo!!
    de verdad lo nesesitaba ajaj

    saludos!

    ResponderEliminar
  9. Mathias aun vives !!!

    Qué bueno leerte de regreso. Vi que estás estrenando blog, mañana me daré una vuelta con calma para verlo.

    Saludos y éxitos!

    ResponderEliminar
  10. hola Potro

    Encontré muy buena la utilidad y incluso quería utilizarla pero al colocarla me modifica la plantilla y noce por que...
    onda la modificación que me hace es que me cambia de color unos textos primordiales para mi pag XD
    y... si llegases a tener idea de q podría ser te agradecería que me ayudaras por que me serviría de mucho utilizarla ahora XD

    de antemano gracias saludos..

    ResponderEliminar
  11. Hola the deadboy,

    En la primera parte del código está esta parte:
    color: #000;

    Cámbiala por el color de letra que usas en el blog, de este modo tendrás los colores de tu blog intactos.

    Saludos.

    ResponderEliminar
  12. hay me funciono eso si tuve q modificar todos los colores espeto el del fondo del mensaje XD y gracias por la pronta respuesta estamos en contacto saludos..

    ResponderEliminar
  13. Hola, soy seguidora de esta pagina desde hace algún tiempo, es una de las mejores que he visitado de ayuda... Hace unas semanas apliqué este truco a mi blog, y ahora lo borré de los gadgets, pero quedó el post it... Como lo elimino?? Uhm!! Gracias por la ayuda de ante mano!

    ResponderEliminar
  14. Hola angel21mbp,

    Sólo entra a Diseño > Elementos de la página y elimina el gadget que contiene el código, eso es todo.
    Saludos.

    ResponderEliminar
  15. Hola felicidades por el blog , pero tengo una duda intente colocar el Mensaje tipo Post-it para el blog pero al cambiar var once_per_browser=0 por 1 el mesaje desaparece espero me puedas ayudar te dejo mi direcciòn http://crepusculo-latina.blogspot.com/

    Saludos

    ResponderEliminar
  16. Hola solovampiros y misterio,

    Es que sólo aparece una sola vez modificando eso, no vuelve a aparecer hasta que elimines las cookies de tu navegador.
    Yo acabo de entrar y apareció una vez, volví a entrar y ya no aparece.
    Si quieres que aparezca siempre déjalo en 0 y no en 1.

    Saludos.

    ResponderEliminar
  17. muchas gracias por tu ayuda ,bueno disculpame tanta preguntadera pero tendo otra duda :D estoy creando una nueva seccion del blog de la direcciòn q te deje anteriormente es esta http://pruebasvampiricas.blogspot.com/ en la parte de los post hay una imagen detras de los 0 comentarios e intentado cambiarla por una nueva pero no e podido, tal vez tu me puedas ayudar... te envios màs saludos y por cierto preguntarte si quieres afiliarte con nosotros?

    ResponderEliminar
  18. ¿afiliarme al vampirismo...? ¬¬
    Esa no es una imagen, es un color de fondo, busca esta parte en tu plantilla:
    .comment-link {
    Y un poco más abajo verás esto:
    background:#2B2B2B;
    Eso cámbialo por el color que quieras o por una imagen.

    Saludos.

    ResponderEliminar
  19. quisiera poner este post it justo cerca donde estan los seguidores? me decis como???????
    gracias!!!

    ResponderEliminar
  20. Hola Paola y Santiago,

    Al inicio, después del código en color verde dice div id="postit" style="left:200px;top:50px"
    Cambia esos valores de left y top hasta que queden en el lugar que quieres.

    Saludos.

    ResponderEliminar
  21. Hola Potro!!!!
    Hace mucho que no entraba a tu Blog y de entrada, jeje te pregunto.
    Se puede colocar imagenes?

    ResponderEliminar
  22. Claro, al inicio en el código verde cambia donde dice background-color:yellow; por esto:
    background: url(URL de la imagen) no-repeat;

    Saludos!

    ResponderEliminar
  23. Saludos el Potro!! Eres un genio

    Veras, me gustaria saber si puedo cambiar el lugar en el que aparece el Post-it, es que me sale encima del titulo y me lo oculta parcialmente...es decir, me gustaria que el post-it apareciese en otro lugar. Es posible??

    Gracias a todos!

    ResponderEliminar
  24. hola, me sirvio mucho lo que encontre por aqui, ahora, quiero poner el boton de feed en mi blog, pero no se como, y quiero hacerlo con una imagen que encontre, mi blog es latorro de blogspot. gracias!

    ResponderEliminar
  25. Hola Azul de Perspectia,

    Sí es posible. Busca en el código esta parte:

    style="left:200px;top:50px"

    Donde dice left es la distancia en pixeles desde la izquierda, y donde dice top es la distancia desde arriba; modifica esos valores por otros hasta que quede en el sitio que quieres.

    Saludos.

    ResponderEliminar
  26. Hola latorro,

    Entra en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pega esto:

    <a href="http://latorro.blogspot.com/feeds/posts/default"><img src="URL de la imagen" border="0" /></a>

    Agrega la URL de la imagen donde se indica y listo.
    Saludos.

    ResponderEliminar
  27. Hola Potro: verás cuando le doy a "cerrar" o a la "x" se me va a pagina nueva de IE y me dice que no puede mostrar la pagina...Que está ocurriendo. Yo creía que al pinchar en "cerrar" o en "x" desaparecia el cuadro simplemente.
    uN saludo

    ResponderEliminar
  28. Hola Priamo,

    Posiblemente estás poniendo mal algún código, el script funciona muy bien en Internet Explorer.
    Elimina el gadget y ponlo de nuevo SIN modificar nada, prueba y verifica si tienes el mismo problema.

    Saludos.

    ResponderEliminar
  29. He hecho lo que dices pero sigue sin funcionar bien: He copiado tu codigo en una gadget de HTML tanto en la sidebar como debajo de la cabecera y tanto en uno como otro sitio da el mismo resultado que te comenté.
    Yo no veo que haga nada mal, pero tu sabes más...
    un saludo y gracias

    ResponderEliminar
  30. Eso sí que es extraño, es posible que sea tu plantilla o algún otro script u elemento que está interfiriendo, pues he hecho una prueba en otro blog y no sucede lo mismo, funciona normal, como debería ser :S

    ResponderEliminar
  31. Justamente, lo qu ea Primao lo sucede es lo que a mi me sucede eso se debe a que al crear este código, nos olvidamos de que, debajo del SKIN, creo que era, colocamos un código para que TODAS LAS VENTANAS se abran por separado y no en la misma ventana. Aquí la explicación: http://ciudadblogger.com/2010/04/abrir-todos-los-enlaces-en-otra-ventana.html

    Entonces, sí el codigo " target='_parent' " es la que confirma ¿Cómo se hace para cancelar la ventana emergente en este código del POST-IT?.

    ResponderEliminar
  32. Busca al inicio del código esta parte:
    href="javascript:closeit()"

    Justo antes de eso agrega el atributo target='_parent' de modo que quede así:

    <a target='_parent' href="javascript:closeit()">

    ResponderEliminar
  33. Impecable, Potro. Agradezco tu respuesta con celeridad.

    Por otro lado, y yéndome del tema. ¿Vos solo moderas este Blog?. Porque estuve leyendo algunos "tips" para blogger, pero muchos necesitarían ser actualizados. Por ejemplo, ahora este, poniendo debajo del todo: "Sí no te cierra con el cartel "[CERRAR]", es debeido a...", ¿me entendés?. Quiero decir que las dudas o incógnitas que tienen los otros, vayas actualizando debajo.

    Por eso mi duda sí es que vos solo mantenés el Blog...

    ResponderEliminar
  34. Sería un poco complicado poner esas actualizaciones dado que no todos los casos requieren la misma solución, aun cuando muchos pueden tener el mismo problema todos podrían requerir una solución distinta.

    Saludos.

    ResponderEliminar
  35. He estado leyendo tu blog estimado, y me ha gustado mucho.

    Una pregunta, ¿es posible hacer que este mensaje salga a una hora determinada del día? Me explico, que el mensaje de "alerta" salga solo entre las 2 y 3PM de todos los días, por ejemplo.

    Si es que no se puede con este código en especifico, hay alguno en el que si?... me sirven cosas de javascript, css o lo que sea xD

    Muchas gracias :)

    ResponderEliminar
  36. Desconozco si haya algún script que haga eso, al menos este no lo hace.

    ResponderEliminar
  37. buenas,
    este es mi problema, cambie el codigo var once_per_browser=0 y le puse el 1 para que aparesca una sola vez, pero eso no pasa, cuando le pongo el 0, aparece siempre. probe entrar desde otra compu o borrando los cookies como le dijiste a las de los vampiros mas arriba, pero no funciona si le pongo el 1 para que aparesca una sola vez.
    te dejo mi blog.
    latribuserver.blogspot.com
    o
    http://ltserver.ar.gd

    ResponderEliminar
  38. Supongo que debe ser un asunto de las cookies del script. Por desgracia sobre las cookies no sé mucho e igual me pasa lo mismo que a ti y hasta la fecha sigo sin poder hacer que sólo aparezca una sola vez :\

    ResponderEliminar
  39. deberías tener un premio al más atento y colaboradores de ayudas en blog, son de gran aporte, muchas gracias por compartir tu conocimiento, te mereces lo mejor del mundo. Abrazos.

    ResponderEliminar
  40. Gracias por el truco...
    Voy a estar probandolo e intentando darle un buen diseño a la ventana.
    Saludos

    ResponderEliminar
  41. 20 de abril, muchas gracias por tu comentario, otro abrazo para ti!

    Pavelkapaz, seguro con un poco de creatividad lograrás un resultado espectacular :)

    ResponderEliminar
  42. Potro gracias por este post, pero me surgio un problema, el aviso me queda detras de las etiquetas, que hago?

    ResponderEliminar
  43. Hola buenos dias! quisiera saber si esto se puede configurar para que me salga desde una fecha especifica hasta una fecha tope

    ResponderEliminar
  44. Amanscur, mil disculpas, no había visto tu comentario. ¿En cuál blog tienes el problema?

    Dani, no es posible esa configuración, sólo se puede agregar y quitar de manera manual.

    ResponderEliminar
  45. Gracias por responder.. tengo otra duda como hacer para que el post it lo pueda mover de lugar???

    ResponderEliminar
  46. Gran aporte! Hasta que me di cuenta que había que borrar también "!--AQUI VA EL MENSAJE--> y !--FIN DEL MENSAJE--" no me salía, pero ahora sí. Muy buenos post (tanto me gustan, que estoy tratando de implementar varias cosas-je!)

    ResponderEliminar
  47. Me alegro que estén siendo siendo de tu interés :)

    ResponderEliminar
  48. Hola potro tengo un problemon con esto fijate que ayer decidi cambiar la plantilla y ya la cambie y todo iba normal hasta que queria eliminar el cartel y oh sorpresa ya no esta el gadget y ahora no se ni como eliminarlo porque no me aparece espero que me puedas ayudar espero tu respuesta potro :)

    ResponderEliminar
  49. No me dices en cuál blog tienes el problema pero supongo que es en pc-utilities...
    Si es así entonces sólo entra en Diseño > Edición de HTML y SIN expandir artilugios busca esta línea y elimínala:

    <b:widget id='HTML22' locked='false' title='' type='HTML'/>

    Saludos.

    ResponderEliminar
  50. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  51. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  52. Hola Potro muy útíl este truco,y muy bien explicado como siempre, muchas gracias, un abrazo

    ResponderEliminar
  53. Qué gusto que les ha resultado todo bien y que el gadget es de su agrado :)

    ResponderEliminar
  54. Potro
    Muchas gracias de antemano. En el Post-it que has dejado en esta pagina hay un título: AVISO
    Sobresale de las lineas superiores. ¿Me podrías decir cómo hago para conseguir lo mismo? Gracias

    ResponderEliminar
  55. Carlos Santos, deja termino con todos los comentarios y publico una entrada con el código completo, ya que todos me lo están pidiendo ;)

    MARIA ELENA, a ti por tu visita!

    ResponderEliminar
  56. Gracias potro y disculpa mi impertinencia, pero tú eres nuestro maestro y tenemos que acudir a ti. Un abrazote.

    ResponderEliminar
  57. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  58. Hola Potro sois un genio y muchas gracias por tu respuesta a mi peticion que te ise con este tema, ahora espero no ser tan fastidioso con otra consulta que te quiero hacer y es la siguiente: sucede que tengo en mi pagina un formulario de reporte (un script) el cual se abre en una ventana emergente sencilla, me gustaria saber si hay alguna forma de que se pudiera abrir pero en una ventaja emergente mas elegante como este post. Mi ventana emergente se abre al dar click a una imagen.
    De antemano gracias por tu ayuda.

    ResponderEliminar
  59. Hola Takashi,

    Depende de qué tipo de código estés usando. Si lo que se abre es una página aparte entonces podrías hacer que se abra con Shadowbox, seguro el resultado será más atractivo.

    ResponderEliminar
  60. Es la segunda vez que lo utilizo y ahora lo he hecho con una imagen de fondo PERFECTO!!!! Gracias Potro

    ResponderEliminar
  61. Acabo de ver el resultado y te ha quedado lindísimo :)

    ResponderEliminar
  62. Hola Potro, habia un compañero que decia que si ponia en: var once_per_browser=1, no salia el letrero y la verdad es que es cierto, yo lo he solucionado eliminando el numero cuatro que sigue a la palabra cookie, pero SOLO a la que sigue a dicha palabra, el resto de los numeros cuatros que hay en el script dejarlos tal cual. Y de esta manera si que se oculta el letrero en la sesion actual, ahora si cierras el navegador y lo vuelves a abrir entonces aparece de nuevo.
    Un abrazo

    ResponderEliminar
  63. Excelente tip PC, al menos durante la navegación es más que suficiente ;)
    Gracias por compartirlo!

    ResponderEliminar
  64. Como puedo poner una imagen en vez de un texto y que al pinchar se dirija a una dirección?

    ResponderEliminar
  65. Es igual, sólo que en lugar de poner el texto pondrías el código de la imagen que quieres junto con el enlace.

    ResponderEliminar
  66. hola potro, este mensaje hay forma de poder ponerlo encima de un video¿

    ResponderEliminar
  67. Mira en Oloblogger, en las últimas entradas que tiene hay una para poner elementos sobre otros con opción de cerrar.

    ResponderEliminar
  68. Hola potro oye ¿como puedo hacer para que este cuatro se centre especificamente dentro de una tabla? digamos donde esta el play de este video

    http://www.leyendasdemexico.net/videos/leyendas/elfantasmadelconvento.html

    Un saludo ojala me puedas res÷onder

    ResponderEliminar
    Respuestas
    1. Mira esta entrada de Oloblogger, te servirá más para encimarlo sobre otro elemento:
      http://www.oloblogger.com/2011/11/cubrir-una-capa-con-otra-que-se-puede.html

      Eliminar
  69. Hola, está muy bueno tu post, pero tengo una pregunta. ¿Hay alguna manera de que el mensaje solo aarezca en la página de inicio?
    Saludos!

    ResponderEliminar
    Respuestas
    1. Sí, usa condicionales:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
    2. Ok, muchas gracias por la recomendación y tener el detalle de responder mi duda :D

      Eliminar
  70. Simplemente... GRACIAS!!!
    Funciona Perfecto

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger