Como poner banners aleatorios de 125 x 125

En la mayoría de los blogs que presentan publicidad se puede observar anuncios aleatorios que van cambiando conforme a se actualice la página.

¿Cómo mostrar anuncios al azar en Blogger?


En el tutorial de hoy vamos a aprender cómo crear un Widget de un Banner aleatorio para blogger que servirá para mostrar anuncios al azar cuando un visitante llega a una página nueva en su blog.Mediante este widget puede mostrar tantos anuncios publicitarios en una área de patrocinador como quiera! En este caso particular para cada ubicación alternará entre dos avisos que usted seleccione para cada ubicación, esto replicado por cuatro, lo que le permitirá ir rotando entre 8 avisos. Para agregar el widget siga estos pasos:


1- Ir a Blogger
2- Ir a Diseño
3- Agregar un gadget
4- Seleccionar HTML/ Java Script
5-Pegar el código dentro.


Si tiene dudas puede consultar el siguiente mini-tutorial sobre como agregar un gadget

<div align="center"> <table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"> <tbody><tr> <td><center> <!-- BANNER#1 --> <script language="JavaScript"> images = new Array(2); images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; index = Math.floor(Math.random() * images.length); document.write(images[index]); </script> </center></td> <td><center> <!-- BANNER#2 --> <script language="JavaScript"> images = new Array(2); images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; index = Math.floor(Math.random() * images.length); document.write(images[index]); </script> </center></td> </tr> <tr> <td><center> <!-- BANNER#3 --> <script language="JavaScript"> images = new Array(2); images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; index = Math.floor(Math.random() * images.length); document.write(images[index]); </script> </center></td> <td><center> <!-- BANNER#4 --> <script language="JavaScript"> images = new Array(2); images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; index = Math.floor(Math.random() * images.length); document.write(images[index]); </script> </div>


Realice los siguientes cambios:


1.  Remplace  URL OF ADVERTISER con el link del sitio web del anunciante.
2.  Remplace  URL OF BANNER’S IMAGE-1  and URL OF BANNER’S IMAGE-2 con el link donde se encuentra la imagen del banner del anunciante.
3.  Remplace  AD DESCRIPTION con la información relativa a la publicidad , esta descripción se mostrará al pasar el ratón por sobre la imagen.
4.  Si usted desea incrementar la distancia entre los bloques de anuncios puede editar width="265" en la segunda linea.
5. Si usted está interesado en adicionar mas avisos en cada ubicación puede editar images = new Array(2); y colocar por ejemplo images = new Array(3);  


luego adicionar la siguiente linea:

images[2] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S     IMAGE-3' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";  

Con esta modificación tendremos 3 avisos aleatorios en una posición, recuerde que tendrá que repetir el paso 5 para cada banner

Tweet

Cual es la diferencia entre widget y gadget

Cuando se recorre la red , los términos  gadget y widget aparecen definidos por separado, pero si prestamos mas atención comienzan las ambigüedades.
Veamos algunas definiciones:
Un Gadget es un dispositivo que tiene un propósito y una función específica, generalmente de pequeñas proporciones, práctico y a la vez novedoso. Los gadgets suelen tener un diseño más ingenioso que el de la tecnología corriente.
Los Gadgets son aplicaciones html, java o flash que incorporamos a nuestro blog para enriquecerlo.
En términos de marketing online,los gadgets son pequeñas piezas publicitarias programadas bien en Flash o Ajax que permiten cierta interactividad con el usuario.
Y entonces que sobre los widgets ? Veamos algunas definiciones que se pueden encontrar:
Un widget es una pequeña aplicación o programa, usualmente presentado en archivos o ficheros pequeños que son ejecutados por un motor de widgets o Widget Engine.
Un widget es una aplicación, que los usuarios pueden instalarse en su web, blog, red social favorita como Facebook, MySpace, Tuenti.
Por otro lado en Blogger se llama Gadget a los espacios para colocar enlaces o mapas... 
Como se aprecia hasta aqui no parece ser muy clara la linea que divide un gadget de un widget , considero que las definiciones que mejor permiten clarificar el punto en cuestión son las siguientes:

“Un gadget es un dispositivo electrónico que cumple una función determinada. Es un juguete, pero para grandes. Siempre es hardware.”
 Es decir, el iPhone, una tableta o un reloj calendario para escritorio constituyen ejemplos de gadget.
En algun momento habia una serie de dibujos animados llamado inspector Gadget, el nombre se debía a la capacidad del inspector por desplegar distintas herramientas(gadgets).

"Un widget es una aplicación muy centrada en dar un servicio concreto. Se centran en el mundo del software".
Por ejemplo,  los widgets que permiten informar el clima , los widgets de calendarios , relojes  y que pueden ser colocados en un sitio , copiando o descargando el fragmento de código correspondiente.

Después de estas definiciones vamos a poder darnos cuenta que a pesar de las mismas es muy frecuente encontrar que estos términos se utilicen indistintamente , es moneda corriente en internet denominar a un gadget widget o a un widget gadget. 

Tweet

Gadgets & widgets para tu blog

Hoy les dejo una serie de gadgets & widgets para que puedan adornar su blog, gentiliza de Google!



<script src="//www.gmodules.com/ig/ifr?url=http://ip.xxoo.net/ip-information.xml&amp;synd=open&amp;w=320&amp;h=400&amp;title=IP+Information&amp;border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&amp;output=js"></script>





<script src="//www.gmodules.com/ig/ifr?url=http://www.sacrascriptura.org/gadgets/GoogleToday/sacrascriptura.xml&amp;synd=open&amp;w=320&amp;h=200&amp;title=Lecturas de La+Biblia&amp;border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&amp;output=js"></script>





<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/112317346116090513935/curs-si-convertor.xml&amp;synd=open&amp;w=320&amp;h=80&amp;title=Dolar%26Euro&amp;lang=all&amp;country=ALL&amp;border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&amp;output=js"></script>






<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/100343953499244689209/virtualhamster.xml&amp;synd=open&amp;w=270&amp;h=300&amp;title=virtual+Hamster+&amp;border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&amp;output=js"></script>







<script src="//www.gmodules.com/ig/ifr?url=http://zandango.org/gw/f/z/1536/shoes/4/5/6/7/8/9.xml&amp;synd=open&amp;w=320&amp;h=380&amp;title=Zapatos+Cool&amp;border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&amp;output=js"></script>





<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/118109817810332320788/englishirregularverbstest.xml&amp;synd=open&amp;w=301&amp;h=266&amp;title=Irregular+Verbs+Test+(English)&amp;border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&amp;output=js"></script>

Tweet

Como crear un widget?

El desarrollo de widget,gadgets o plugins se ha convertido en un pasatiempo productivo para todos.
Los widgets son pequeñas aplicaciones, que facilitan la distribución de su contenido en otros blogs y sitios web, de forma gratuita.Asi como un video de YouTube que puede poner en su sitio y dejar que sus lectores accedan al mismo y lo distribuyan.
La tecnología está cambiando la cara rápidamente con las mejoras y mejores actualizaciones.
Blogger Template edición es una opción de código abierto para la gente talentosa como usted. Sólo se tarda un mes o dos para aprender cosas que ni siquiera ha soñado. En el tutorial de hoy me centraré en los widgets por sí solos.

¿Cómo son los Widgets de Blogger codificado?

Los Widgets son creados en dos pasos

    Programar El Widget
    Diseñar El Widget

 Programación del Widget:

Los widgets de Blogger están programados con XHTML, jQuery y JavaScript.La mayor parte de la codificación se lleva a cabo usando XHTML, que es una forma avanzada de la combinación de XML con HTML. Las normas w3 para XHTML son muy estrictas y no obedecer a ellas genera mensajes de error que se ven durante la edición de sus plantillas.

Diseño del widget:

Después de programar un widget viene la etapa donde definiremos el estilo, colores de fuente del widget , bordes, colores de fondo, etc usando CSS que significa Cascading Style Sheet. HTML se utiliza para construir la estructura del widget y CSS se utiliza para vestir a esa estructura. Tomemos un ejemplo del texto a continuación,

                    Bienvenido a Planeta WebCash!

Código HTML:


<p> <center> Bienvenido a Planeta WebCash! </ Center> </ strong> </ p>

 Ahora lo veo, después de labrar con CSS:


CSS CÓDIGO:

<center><span style="border-bottom: #ff0000 10px solid; border-left: #A060ff 10px solid; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; border-top: #5080ff 10px solid; border-right: #66ff00 10px solid; padding-top: 6px; "><font color="#660000"><strong>Bienvenido a Planeta WebCash!</strong></font></span></center>

No debe confundirse con la gran porción de código anterior, el CSS es el lenguaje web más interesante y más fácil de todos.
Así que ¿Cómo va a diseñar un widget?

Si usted desea convertirse en un diseñador o tener los conocimientos suficientes como para personalizar una plantilla, es un momento oportuno el aprendizaje tanto de CSS y HTML.
Hay tres importantes consejos prácticos que podría dar:

-Aprender Photoshop. Encontrar un instituto cercano, donde se enseña Photoshop. Tomar un curso de no más de 1 mes.
-Comience a leer en forma particular los tutoriales de HTML en w3schools.
-Después de aprender los conceptos básicos de HTML a continuación, iniciar los tutoriales de CSS en w3schools.
Este trabajo duro le llevará no más de un mes. A medida que usted incorpore conocimientos los irá poniendo en práctica y cada vez se irá acercando mas al objetivo de transformarse en un diseñador!
Después de haber desarrollado sus habilidades de diseño, entonces también puede ir y empezar a aprender JavaScript, PHP, jQuery, etc
He compartido lo que es práctico y accesible para todos ustedes. Si usted piensa que puede contratar a un profesor para HTML y CSS, entonces es aún más bueno, pero realmente en la actualidad internet nos ofrece una fuente inagotable de información, si uno tiene dedicación y encuentra los sitios adecuados usted puede ir desarrollando todas las habilidades para convertirse en una fabrica de habilidades, sitios como W3Schools lo van a poder ayudar para lograr ese objetivo, es cierto que es un sitio en ingles , pero hoy en día con la ayuda de la inteligencia artificial y los traductores las barreras del idioma se estan desmoronando.
Lo mejor de W3Schools es que usted puede utilizar su editor de HTML para crear y obtener una vista previa del código al mismo tiempo.

Tweet