Category Archives: Trucos Script/Plugin/Widget

Ventana de Avisos Flotante para tus Visitas, Blogger


Quien no se ha cruzado alguna vez en la vida, al entrar en alguna pagina, con esos cartelitos flotantes que te persiguen con propagandas, y la verdad que es imposible ignorarlos. A la hora de dar algún aviso, hacer algún anuncio, ya sea algo que queremos comunicar, como un evento, un mensaje de felicitación, un cumpleaños, una noticia importante, o simplemente promocionar alguna Web o blog que nos interese, los cartelitos flotantes (script flotante) es verdaderamente mas que una opción interesante y atractiva, le puede dar un aspecto elegante a nuestro blog a la hora de comunicar y cobrar protagonismo fácilmente y sin demasiadas molestias ya que con un solo clic el lector podrá sacarlo de su vista una vez que lo haya leído.

Bueno sin más preámbulos paso a explicarles de forma sencilla y clara como fácilmente podemos construir uno de estos cartelitos tan bonitos jeje.

En la plantilla de edición HTML debemos buscar la parte que dice:

]]></b:skin>

Justo antes de esto debemos pegar el siguiente código:

  1. #fadeinbox{
  2. position:absolute;
  3. width: 300px;
  4. left: 0;
  5. top: -400px;
  6. border: 2px solid black;
  7. background-color: lightyellow;
  8. padding: 4px;
  9. z-index: 300;
  10. visibility:hidden;
  11. }

Bueno ahora les explico que hacen algunos de estos atributos que les pueden interesar:

-border: aquí podemos seleccionar el borde del cuadro (grosor, color).
– background-color: el color del fondo del anuncio, en este caso pusimos blanco (lightyellow).
-width: con esto cambiamos el ancho del cartel.

Si queremos poner una imagen en el fondo del anuncio debemos sustituir (que generalmente si queremos jeje) solo debemos sustituir en el atributo
background-color: lightyellow
por
background: url(‘la dirección de la imagen ‘)

Y este código justo arriba de </body> (esta al final de la plantilla)

  1. <div id='fadeinbox'>
  2.  
  3. AQUI VA EL MENSAJE DE USTEDES
  4. <div align='right'> <a href='#'>Hide Box</a></div>
  5. </div>

En este código escriben el mensaje.

Ahora tenemos que añadir el script (que corresponde al código que esta aquí abajo), Vamos a añadirlo como elemento de página (ahora gadget). Entramos al menú Diseño, luego Elementos de Página, luego vamos a Añadir Gadget, seleccionamos un elemento HTML/Javascript de la lista que nos aparece.

ventana_avisos_1.JPG

ventana_avisos_2.JPG

Codigo:

  1. /***********************************************
  2. * Sticky Note script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  3. * Visit DynamicDrive.com for hundreds of DHTML scripts
  4. * This notice must stay intact for legal use
  5. * Go to http://www.dynamicdrive.com/ for full source code
  6. ***********************************************/
  7.  
  8. //Specify display mode. 3 possible values are:
  9. //1) "always"- This makes the fade-in box load each time the page is displayed
  10. //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
  11. //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
  12. // For example, 2 would display the box about (1/2) 50% of the time the page loads.
  13.  
  14. var displaymode="always"
  15.  
  16. var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)
  17. var autohidebox=["yes", 5] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
  18. var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
  19. var IEfadelength=1 //fade in duration for IE, in seconds
  20. var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)
  21.  
  22. ////////No need to edit beyond here///////////
  23.  
  24. if (parseInt(displaymode)!=NaN)
  25. var random_num=Math.floor(Math.random()*displaymode)
  26.  
  27. function displayfadeinbox(){
  28. var ie=document.all &amp;&amp; !window.opera
  29. var dom=document.getElementById
  30. iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
  31. objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
  32. var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
  33. var docwidth=(ie)? iebody.clientWidth : window.innerWidth
  34. docheight=(ie)? iebody.clientHeight: window.innerHeight
  35. var objwidth=objref.offsetWidth
  36. objheight=objref.offsetHeight
  37. objref.style.left=docwidth/2-objwidth/2+"px"
  38. objref.style.top=scroll_top+docheight/2-objheight/2+"px"
  39.  
  40. if (showonscroll=="yes")
  41. showonscrollvar=setInterval("staticfadebox()", 50)
  42.  
  43. if (enablefade=="yes" &amp;&amp; objref.filters){
  44. objref.filters[0].duration=IEfadelength
  45. objref.filters[0].Apply()
  46. objref.filters[0].Play()
  47. }
  48. objref.style.visibility="visible"
  49. if (objref.style.MozOpacity){
  50. if (enablefade=="yes")
  51. mozfadevar=setInterval("mozfadefx()", 90)
  52. else{
  53. objref.style.MozOpacity=1
  54. controlledhidebox()
  55. }
  56. }
  57. else
  58. controlledhidebox()
  59. }
  60.  
  61. function mozfadefx(){
  62. if (parseFloat(objref.style.MozOpacity) 0) {
  63. offset = document.cookie.indexOf(search)
  64. if (offset != -1) {
  65. offset += search.length
  66. end = document.cookie.indexOf(";", offset)
  67. if (end == -1)
  68. end = document.cookie.length;
  69. returnvalue=unescape(document.cookie.substring(offset, end))
  70. }
  71. }
  72. return returnvalue;
  73. }
  74.  
  75.  
  76. if (displaymode=="oncepersession" &amp;&amp; get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN &amp;&amp; random_num==0){
  77. if (window.addEventListener)
  78. window.addEventListener("load", initfunction, false)
  79. else if (window.attachEvent)
  80. window.attachEvent("onload", initfunction)
  81. else if (document.getElementById)
  82. window.onload=initfunction
  83. document.cookie="fadedin=yes"
  84. }

Este es el resultado, un cuadro flotante, que se mueve junto con la pagina (se puede cerrar), y se ve bastante bonito si agregamos alguna imagen en el.

ventana_avisos_3.JPG

Ahora solo falta que pongas a trabajar tu imaginación para crear los cartelitos mas lindos (recuerda que puedes agregar imagenes en tu mensaje).. mucha suerte, y espero que te haya sido útil esta guía.

Fotos de los comentaristas, Blogger

Esto es para mostrar imágenes para los comentaristas, ya sea de nosotros, los usuarios anónimos y los demás usuarios. Necesitaremos tres imágenes, uno para nuestros comentarios, otro para los comentarios anónimos y otro para el resto de los comentarios.

1.- Debemos de localizar en nuestro panel de blogger en edición html el siguiente codigo:

-hasta a donde termina:

</b:if>

-Por ejemplo en el mio es así:

  1. <b>
  2. <a rel='nofollow'></a>
  3. <b />
  4.  
  5. </b>

2.- Tienes que reemplazar todo ese codigo por este:

  1. <b>
  2. <!-- autor reconocido -->
  3. <b>
  4. <!-- mis propios comentarios -->
  5. <img class='comenta-avatar' src='URL_imagenYO' />
  6. <b />
  7. <!-- comentarios de los visitantes -->
  8. <img class='comenta-avatar' src='URL_imagenOTROS' />
  9. </b>
  10. <a rel='nofollow'>
  11.  
  12. </a>
  13. <b />
  14. <!-- comentarios anónimos -->
  15. <img class='comenta-avatar' src='URL_imagenANONIMO' />
  16.  
  17. </b>

* En donde dice:

  1. <!-- autor reconocido -->
  2. <b>

Mi_alias lo tienes que cambiar por tu nombre de autor

*En donde dice:

  1. <!-- mis propios comentarios -->
  2. <img class='comenta-avatar' src='URL_imagenYO' />
  3. <b />

URL_imagenYO – lo tienes que cambiar por la imágen que quieres que aparesca en tus propios comentarios. Con extensión .jpg

*En donde dice:

  1. <!-- comentarios de los visitantes -->
  2. <img class='comenta-avatar' src='URL_imagenOTROS' />
  3. </b>

URL_imagenOTROS – lo tienes que cambiar por la imágen con extensión .jpg que quieras que aparesca en comentarios de otras personas con otras cuentas, ejemplo wordpress, OpenID etc.

*En donde dice

  1. <!-- comentarios anónimos -->
  2. <img class='comenta-avatar' src='URL_imagenANONIMO' />
  3.  
  4. </b>

URL_imagenANONIMO – Lo tienes que cambiar por una imágen extension .jpg que quieras que aparesca en los comentarios de los que se registren como anonimos.

Agregar Metatags para indexarse mejor a Google, Blogger


Cuando elaboramos nuestro Website o blog, una de las primeras inquietudes que nos surge, que deseamos solucionar con la mayor brevedad posible, es querer que nuestro trabajo, esfuerzo, escritos etc. tenga presencia en los distintos buscadores: motores de búsqueda. Es muy lógico que sea así, pues con ello nos “aseguramos” tener un mayor número de visitas. Por otra parte, todos queremos estar bien posicionados en los motores de búsqueda.

Una forma de posicionarse bien en los motores de búsquedas como google es agregando Metatags, que son como las claves que ponemos para que google las busque y conozca mejor la temática de tu sitio:

Un ejemplo de los metatags de mi sitio Series-Anime.net:

  1. <!--©2008 Series-anime.net-->
  2.  
  3. <title>Series-anime.net</title>

*Edita el anterior código conforme a tu blog y debes añadir las meta-tags siempre bajo la etiqueta de apertura .

–Una forma más simple de agregar metatags en el blog es de la siguiente manera–

1.-Entra a tu panel de blogger y te vas a plantilla y después a edición HTML.

metatags_index_google_1.jpg

2.- Tienes que buscar el siguiente código:


<title><data:blog.pageTitle/></title>

3.- Bajo a este código tienes que pegar los siguientes metatags:

  1. <!-- Metatags de la página principal -->
  2. <b>
  3.  
  4.  
  5. </b>
  6.  
  7. <!-- Metatags de cada página de etiquetas -->
  8. <b>
  9.  
  10.  
  11. </b>

4.- Claro que antes que pegarlo tienes que completar lo que te dice, según la descripción de tu blog. Un ejemplo si quedará en mi sitio series-anime.net

  1. <!-- Metatags de la página principal -->
  2. <b>
  3.  
  4.  
  5. </b>
  6.  
  7. <!-- Metatags de cada página de etiquetas -->
  8. <b>
  9.  
  10.  
  11. </b>

-Ahora a los bots de google les será mas fácil encontrar tu Website y este se colocará en lugares más prestigiosos.

metatags_index_google_2.jpg