Post-It

se ve en la cima del blog, al lado de las entradas, cada vez que la página se "refresca". Basta con darle a ""X Cerrar" para que no vuelva a "molestar"... hasta el siguiente "refresco", je.

Y me parece muy útil... no ya para recordar a las visitas donde pueden encontrar cosas, sino para una mismo: hay cosas que hay que actualizar siempre a mano en un blog... y no siempre se acuerda una, la verdad.

Lo he encontrado en JavascriptKit, y consta de dos piezas de código, a insertar-la primera- dentro de la sección head (preferiblemente antes del cierre /skin; y, la segunda, en la cima de la página, es decir: en lo más alto de la sección Body.

Y, para variar, he omitido estas instrucciones para tener mayor control sobre la posición del objeto: así que he unido ambas piezas de código en un Elemento de Diseño HTML-Java sobre las "Entradas del Blog". Y, francamente, queda mejor (a mi juicio).

Bien. Vamos a los códigos:

1º.- CSS:

<style>

<!--



/*Post-it note script- by javascriptkit.com

Visit JavaScript Kit (http://javascriptkit.com) for script

Credit must stay intact for use*/



#postit{

position:absolute;

width:250;

padding:5px;

background-color:lightyellow;

border:1px solid black;

visibility:hidden;

z-index:100;

cursor:hand;

}



-->

</style>

2º.- HTML:

<div id="postit" style="left:150px;top:150px">

<div align="right"><b><a href="javascript:closeit()">[Close It]</a></b></div>



<!--INSERT YOUR CONTENT HERE-->



<b>Reminder:</b><br>

<p><font size="2" face="Arial"><a href="http://freewarejava.com" target="_new">Looking for

free Java applets?<br>

</a>Be sure to check out our sister site Freewarejava.com</font></p>

<p><font size="2" face="Arial"><a href="http://www.dynamicdrive.com" target="_new">Looking for

more scripts?<br>

</a>Visit our partner Dynamic Drive for free, original DHTML scripts and

components.</font></p>



<!--END YOUR CONTENT HERE-->



</div>



<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_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) { // if cookie exists

offset += search.length

// set index of beginning of value

end = document.cookie.indexOf(";", offset);

// set index of end of cookie value

if (end == -1)

end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

}

return returnvalue;

}



function showornot(){

if (get_cookie('postdisplay')==''){

showit()

document.cookie="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>

Cambiad, por supuesto, las URL y los textos. También podéis modificar a vuestro gusto el color, el padding, el ancho, el fondo de color... lo que queráis.