Cómo crear un gadget de barra lateral para Blogger con texto giratorio

Escrito por elizabeth falwell | Traducido por maría marcela mennucci
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear un gadget de barra lateral para Blogger con texto giratorio
Es necesario tener un conocimiento básico de JavaScript para personalizar tu gadget de texto giratorio en Blogger. (Burke/Triolo Productions/Brand X Pictures/Getty Images)
<p>Blogger.com es un sitio web de publicaciones de Google. Los usuarios registrados de Blogger pueden seleccionar entre una serie de plantillas y diseños prefabricados para crear una página web personalizada con un URL "blogspot.com". Además de estas plantillas y diseños, Blogger también ofrece a los usuarios más de 20 "gadgets" para personalizar aun más su página. Incluidos entre ellos hay una opción HTML/JavaScript, que puedes usar para crear una característica con texto giratorio.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Haz clic en la viñeta "Diseño" dentro del Tablero de tu cuenta Blogger.com.

  2. 2

    Haz clic en la opción "Elementos de página" en la etiqueta "Diseño". Decide dónde quieres colocar tu gadget con texto giratorio. Blogger ofrece plantillas con hasta tres barras laterales, por lo que dependiendo de la que estés usando tú, podrías tener varias opciones.

  3. 3

    Haz clic en el botón "Añadir un gadget" en la parte superior de la barra lateral donde te gustaría colocar el gadget.

  4. 4

    Deslízate por la lista de opciones de gadgets en el cuadro emergente hasta que encuentres el que se llama "HTML/JavaScript". Haz clic en esta opción.

  5. 5

    Copia este código en el cuadro de texto:

    <style type="text/css">

    ran1,#ran2,#ran3,#ran4{display:none;}

    </style> <script type="text/javascript" > window.onload=function(){ var wch=(Math.floor(Math.random()*4)+1); document.getElementById('ran'+wch).style.display='inline'; } </script>

    <p id="randomP"> <span id="ran1">ROTATING TEXT #1 GOES HERE</span> <span id="ran2">ROTATING TEXT #2 GOES HERE</span> <span id="ran3">ROTATING TEXT #3 GOES HERE</span> <span id="ran4">ROTATING TEXT #4 GOES HERE</span> </p>

  6. 6

    Edita el código para personalizar tu texto giratorio. El código en el Paso 6 es para cuatro líneas de texto. Para dos líneas de texto giratorio, deberías eliminar "#ran3;#ran4" en la parte superior del código, elimina las líneas "<span id="ran3">ROTATING TEXT #3 GOES HERE</span>" y "<span id="ran4">ROTATING TEXT #4 GOES HERE</span>" en la parte inferior y cambia el número "4" por el "2" luego del código "Math.floor(Math.random()". Para añadir más líneas de texto giratorio, deberías añadir "#ran5" y así hasta que llegues a "#ranX," donde "X" representa la cantidad de líneas de texto que deseas tener girando. También deberías añadir "<span id="ran5">ROTATING TEXT #5 GOES HERE</span>" y así hasta llegar a "<span id="ranX">ROTATING TEXT #X GOES HERE</span>", donde "X" representa nuevamente la cantidad de líneas de texto giratorio. Finalmente, cambia el número después de "Math.floor(Math.random()" para que coincida con el número total de líneas de texto giratorio.

Consejos y advertencias

  • Este tipo de gadget de texto giratorio podría ser usado para una característica de "Cita del día", por ejemplo.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles