Como la mayoria de los usuarios, no leen los avisos que estan en los post o en alguna parte de la sidebar o barra lateral, quizas les interese este código.
¿Que es lo que hace?, Aparece un cuadro flotante, con el mensaje que ustedes quieran, este mensaje se puede mover y también cerrar.
Aquí les dejo una imagen de como queda en el blog:
Ahora los pasos para que lo hagan en sus blogs:
Paso 1:
Primero deben copiar el siguiente codigo entre las etiquetas <style> y </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; //ESTA LINEA CORRESPONDE AL ANCHO DEL AVISO
- padding:5px;
- background-color:lightyellow; //AQUI EN ESTA LINEA CAMBIAN EL COLOR POR EL DE USTEDES
- border:1px solid black; //EN ESTA LINEA CAMBIAN EL COLOR DEL BORDE
- visibility:hidden;
- z-index:100;
- cursor:hand;
- }
- -->
y este segundo código entre las etiquetas <body> y </body>
- <!--COMIENZO DE LA LINEA EN DONDE PUEDEN CAMBIAR LA POSICION-->
- <div id="postit">
- <!--FIN DE LA LINEA EN DONDE PUEDEN CAMBIAR LA POSICION-->
- <div align="right"><b><a href="closeit()">[Cerrar]</a></b></div>
- <!--AQUI INSERTAN EL CONTENIDO DEL ANUNCIO(ESTO LO CAMBIAN POR LO QUE QUIEREN)-->
- <b>Recordatorio:</b>
- <p><font size="2" face="Arial">
- <a target="_new" href="http://tekytips.com/directorio">DIRECTORIO DE BLOGS</a>
- Si quieres mas visitas inscribe tu blog en nuestro directorio</font></p>
- <p> </p>
- <!--FIN DEL CONTENIDO DEL ANUNCIO-->
- </div>
- //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 NECESITAN CAMBIAR NADA DE AQUI///
- 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()
- //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")
Todo lo que tienen que hacer es pegar estos dos codigos dentro de las etiquetas mencionadas y listo, ya estara funcionando.
En el codigo puse mensajes que muestra en donde deben cambiar el mensaje que yo tengo por el de ustedes, ademas en la linea:
<div id=”postit” style=”left:180px;top:160px”>
pueden cambiar la posicion en donde aparece el aviso, solo deben cambiar los numeros 180 para variar la distancia entre el margen izquierdo y 160 para variar la distancia con el margen superior del blog.
Suerte!!
Artículos Relacionados
