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

  • Por que se baja la columna lateral o sidebar ? Esta explicación es útil para cualquier plataforma de blogs, wordpress, blogger, ..ya que el error es el mismo. Esto es besico muchos ya lo saben, pero como cada vez llega más gente con […]
  • Musica de fondo para tu blog, Classic-Blogger Pese a que hay múltiples formas de subir canciones y videos a los blogs, una de las formas más basicas de hacerlo es la siguiente: [html] [/html] Donde en SRC debe ir la URL donde […]
  • Hacemos Cambios en tu Blog por Ti SERVICIO SUSPENDIDO MOMENTÁNEAMENTE POR FALTA DE TIEMPO, PERO DEJA TU PEDIDO, CUANDO ESTEMOS DE VUELTA TE CONTACTAREMOS. Así de simple, nos encargamos de tu blog, hacemos todos los […]
  • Widget de Blogger Blogger a añadido un nuevo widget, la idea es hacer una lista de nuestros amigos de blog, colocar su dirección y tendremos la opción de mostrar el titulo del último post escrito, y la […]
  • Entendiendo el codigo para agregar Musica a tu Blog en Descarga Directa Es más fácil que las fotos, porque aquí lo único que importa es el link, que entrega la página UPLOADHUT o sea el http://...... Y para agregar el archivo de música que subieron a esa […]
  • Generador de texto !!! Este Post es aplicable en cualquier plataforma de Blogs (Blogger, WordPress...) o Página web. Para que el mago se ponga a trabajar y genere un mensaje debemos ingresar a este […]
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 *