Ventana de Avisos Para tus Visitantes, Classic-Blogger

Classic Blogger, Personaliza Código, Plantillas, Plataformas

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:
avisos_visitas_1.jpg

Ahora los pasos para que lo hagan en sus blogs:
Paso 1:
Primero deben copiar el siguiente codigo entre las etiquetas <style> y </style>

< View plain text >
css

  1. <!--
  2.  
  3. /*Post-it note script- by javascriptkit.com
  4. Visit JavaScript Kit (http://javascriptkit.com) for script
  5. Credit must stay intact for use*/
  6.  
  7. #postit{
  8. position:absolute;
  9. width:250; //ESTA LINEA CORRESPONDE AL ANCHO DEL AVISO
  10. padding:5px;
  11. background-color:lightyellow; //AQUI EN ESTA LINEA CAMBIAN EL COLOR POR EL DE USTEDES
  12. border:1px solid black; //EN ESTA LINEA CAMBIAN EL COLOR DEL BORDE
  13. visibility:hidden;
  14. z-index:100;
  15. cursor:hand;
  16. }
  17.  
  18. -->

y este segundo código entre las etiquetas <body> y </body>

< View plain text >
js

  1. <!--COMIENZO DE LA LINEA EN DONDE PUEDEN CAMBIAR LA POSICION-->
  2. <div id="postit">
  3. <!--FIN DE LA LINEA EN DONDE PUEDEN CAMBIAR LA POSICION-->
  4. <div align="right"><b><a href="closeit()">[Cerrar]</a></b></div>
  5.  
  6. <!--AQUI INSERTAN EL CONTENIDO DEL ANUNCIO(ESTO LO CAMBIAN POR LO QUE QUIEREN)-->
  7.  
  8. <b>Recordatorio:</b>
  9. <p><font size="2" face="Arial">
  10. <a target="_new" href="http://tekytips.com/directorio">DIRECTORIO DE BLOGS</a>
  11. Si quieres mas visitas inscribe tu blog en nuestro directorio</font></p>
  12. <p>&nbsp;</p>
  13.  
  14. <!--FIN DEL CONTENIDO DEL ANUNCIO-->
  15.  
  16. </div>
  17.  
  18.  
  19.  
  20.  
  21.  
  22. //Post-it only once per browser session? (0=no, 1=yes)
  23. //Specifying 0 will cause postit to display every time page is loaded
  24. var once_per_browser=0
  25.  
  26. ///NO NECESITAN CAMBIAR NADA DE AQUI///
  27.  
  28. var ns4=document.layers
  29. var ie4=document.all
  30. var ns6=document.getElementById&amp;&amp;!document.all
  31.  
  32. if (ns4)
  33. crossobj=document.layers.postit
  34. else if (ie4||ns6)
  35. crossobj=ns6? document.getElementById("postit") : document.all.postit
  36.  
  37.  
  38. function closeit(){
  39. if (ie4||ns6)
  40. crossobj.style.visibility="hidden"
  41. else if (ns4)
  42. crossobj.visibility="hide"
  43. }
  44.  
  45. function get_cookie4(Name) {
  46.   var search = Name + "="
  47.   var returnvalue = "";
  48.   if (document.cookie4.length &gt; 0) {
  49.     offset = document.cookie4.indexOf(search)
  50.     if (offset != -1) { // if cookie4 exists
  51.       offset += search.length
  52.       // set index of beginning of value
  53.       end = document.cookie4.indexOf(";", offset);
  54.       // set index of end of cookie4 value
  55.       if (end == -1)
  56.          end = document.cookie4.length;
  57.       returnvalue=unescape(document.cookie4.substring(offset, end))
  58.       }
  59.    }
  60.   return returnvalue;
  61. }
  62.  
  63. function showornot(){
  64. if (get_cookie4('postdisplay')==''){
  65. showit()
  66. document.cookie4="postdisplay=yes"
  67. }
  68. }
  69.  
  70. function showit(){
  71. if (ie4||ns6)
  72. crossobj.style.visibility="visible"
  73. else if (ns4)
  74. crossobj.visibility="show"
  75. }
  76.  
  77. if (once_per_browser)
  78. showornot()
  79. else
  80. showit()
  81.  
  82.  
  83.  
  84.  
  85.  
  86. //drag drop function for ie4+ and NS6////
  87. /////////////////////////////////
  88.  
  89. function drag_drop(e){
  90. if (ie4&amp;&amp;dragapproved){
  91. crossobj.style.left=tempx+event.clientX-offsetx
  92. crossobj.style.top=tempy+event.clientY-offsety
  93. return false
  94. }
  95. else if (ns6&amp;&amp;dragapproved){
  96. crossobj.style.left=tempx+e.clientX-offsetx
  97. crossobj.style.top=tempy+e.clientY-offsety
  98. return false
  99. }
  100. }
  101.  
  102. function initializedrag(e){
  103. if (ie4&amp;&amp;event.srcElement.id=="postit"||ns6&amp;&amp;e.target.id=="postit"){
  104. offsetx=ie4? event.clientX : e.clientX
  105. offsety=ie4? event.clientY : e.clientY
  106.  
  107. tempx=parseInt(crossobj.style.left)
  108. tempy=parseInt(crossobj.style.top)
  109.  
  110. dragapproved=true
  111. document.onmousemove=drag_drop
  112. }
  113. }
  114. document.onmousedown=initializedrag
  115. 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

patriram
Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

About patriram

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

Leave a Reply

Your email address will not be published. Required fields are marked *