domingo, 3 de julio de 2011

Mensaje aleatorio en Blogger

En esta oportunidad les enseñaré un sencillo método de crear mensajes aleatorios mediante javascript. Gracias a esto podemos añadir un mensaje que cambiará cada vez que el usuario actualize la página.

Se verá de una forma muy similar a esta:

¿Sabías que?

Actualiza la página para ver funcionando el gadget.

¿Cómo añadir el gadget a Blogger?

En ''Diseño | Elementos de la página'', buscaremos la opción ''Añadir un gadget'' en la zona que deseemos situar el gadget. Una vez realizado buscaremos el gadget ''HTML/Javascript'':


En el cual pegaremos el siguiente código:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
function texto_aleatorio(){
   var textos = new Array()
   textos[0] = "MENSAJE 1"
   textos[1] = "MENSAJE 2"
   textos[2] = "MENSAJE 3"
   textos[3] = "MENSAJE 4"
   textos[4] = "MENSAJE 5"
   textos[5] = "MENSAJE 6"
   textos[6] = "MENSAJE 7"
   textos[7] = "MENSAJE 8"
   textos[8] = "MENSAJE 9"
   aleat = Math.random() * (textos.length)
   aleat = Math.floor(aleat)
document.write(textos[aleat])
}
//--><!]]>
</script>
<div id="mensajealeatorio" style="border:2px solid #dadada; width:230px; padding:1px; margin:auto;">
<h1>¿Sabías que?</h1><p>
<script language="javascript">
texto_aleatorio()
</script>
</p>
</div>

<style type="text/css">
#mensajealeatorio h1 {
text-align: center;
color: blue;
margin:none;
padding:2px;
border:none;
font-size:16px;
}

#mensajealeatorio p {
padding-left:4px;
padding-right:4px;
</style>

Guardamos los cambios y listo.

Importante:
  • Reemplaza los valores en color para cambiar los mensajes.
  • Puedes personalizar el contenedor mediante CSS.

No hay comentarios:

Publicar un comentario