Curso Adsense - Capitulo 2 - Cómo insertar los anuncios en Dreamweaver

Continuamos con otra entrega mas del Curso de Adsense “desde cero”.

En el primer capitulo, aprendimos como podes crear tu primer anuncio de Adsense.

Lo que hicimos fue crear un “anuncio contextual” de texto. (más adelante veremos las otras alternativas de anuncios no te preocupes).

Sigamos aprendiendo.

Si ya tenemos el código javascript que nos da Adsense al final del proceso de la creación del anuncio (que se explico en el primer capitulo), el siguiente paso lógico será integrar ese código en nuestro sitio Web para finalmente poder visualizarlo online.

Por eso mismo, en este segundo capítulo del curso adsense, se aprenderá como insertar el código Adsense en nuestra página.

Los pasos para lograrlo son bastante simples, no hay mucho misterio, pero puede “diferir” un poco según que programa o plataforma de sitio Web tengamos.

Ejemplo: Página Web tradicional utilizando Dreamweaver, Un Blog en Blogger o Wordpress, etc

Es por eso, que para hacerlo mas claro y sencillo el aprendizaje, dividiremos en capítulos cada una de estas “plataformas”.

Hoy será el turno de aprender como se inserta los anuncios Adsense, dentro de una “página Web tradicional” usando el editor Web “Dreamweaver”.

Elijo Dreamweaver porque seguramente sea el más usado por la gran mayoría de los webmasters, pero también te servirá la explicación aunque uses otro ya que son similares.

A modo de ejemplo, diseñe una página Web muy básica, donde simplemente inserte un poco de texto relacionado sobre una temática, dentro de una tabla de 3 columnas.

Veamos como insertar los anuncios.

Recordamos visualmente un poco, cual era exactamente el código que tenemos que insertar en nuestra Web.

El primer anuncio Adsense que vamos a ubicar será un banner de 486×60 en la zona superior de la página Web, o sea, debajo del titulo.

Vamos a explicar dos maneras de insertar los anuncios Adsense en Dreamweaver:

En la primera vamos a tener que dar uso de la Vista “Código” del editor, o si todavía no estamos acostumbrados al código html, podemos usar la Vista “Dividir”

En la vista código veremos en pantalla completa todo el código html de la página Web, en cambio, en la vista “dividir” se verá mitad de la pantalla el código y en la otra mitad la vista “diseño”.

Vamos a utilizar la vista dividida, así que seleccionamos la opción “dividir”.

Lo útil de este “modo de vista”, es que nos sirve para ubicarnos en el sector preciso donde tenemos que “copiar y pegar” el código Adsense sin necesidad de entender demasiado de html.

Esto sucede porque nos permite estar “navegando” con el cursor en la “vista diseño” y automáticamente en la “vista código” también se ira ubicando el cursor en el lugar que corresponde.

Lo entenderemos mejor con la siguiente imagen, donde nos posicionamos en algún lugar en la “Vista Diseño” y en la vista de arriba, o sea, la “Vista Código”, automáticamente de forma pararela también se ubica el cursor.

Entonces, usando la vista dividida, nos posicionamos con el cursor en el lugar donde queremos que aparezca el banner de Adsense, en este caso será debajo del título “Seis pasos para bajar de peso más rapido”.

Ahora prestamos atención donde se ubica el cursor en la vista de código, ahí será donde debemos ingresar el código javascript.

Para diferenciarlo mejor, cree un poco de “espacio” entre el código html de la página y el código adsense.

Nota de Aclaración: Una vez que insertamos los anuncios, por lo general suele tardar entre 10 y 15 minutos en tomar los cambios y que aparezcan.

Guardamos los cambios en Dreamweaver y apretamos la tecla “F12″ para visualizar el anuncio.

Así se verá el anuncio una vez que coloquemos el código.

Ahora insertemos un anuncio más en esta Web. Un rectángulo de 300×200 que este ubicado entre medio del texto.

El proceso será exactamente igual a lo explicado con el primer anuncio.

Usando la “vista dividir” ubicamos el cursor del Mouse en el sector donde vamos a querer tener este segundo anuncio.

Copiamos devuelta el código javascript de Adsense (esta vez del nuevo anuncio que hayamos creado).

Guardamos los cambios, y apretamos “F12″ para hacer la vista previa de la página.

¿Existe otra manera de insertar los anuncios de Adsense en Dreamweaver?

Bueno, yo conozco otra mas, que si bien no la utilizo (estoy acostumbrado al anterior) la comparto con ustedes porque siempre esta bueno conocer diferentes formas de hacer las cosas.

Para usar este método, debemos primero ubicarnos en el sector donde vamos a insertar el anuncio Adsense (tal cual lo estuvimos haciendo hasta ahora).

Después ingresamos al menú:
Insertar –> HTML –> Objeto de Script –> Script

Un menú aparecerá donde debemos dejar seleccionado la opción “javascript” y abajo simplemente pegar el código Adsense.

Terminamos haciendo clic en “Aceptar”.

Esta fue otra manera de insertar anuncios Adsense, pero opino que es más eficiente que te vayas familiarizando con el código html de un sitio Web, ya que de esa manera podrás ubicar la publicidad de Adsense con mayor precisión.

El objetivo de este capítulo era simplemente explicar de que manera se insertan los anuncios en un sitio Web con el editor de páginas Web’s Dreamweaver.
Dejando totalmente de lado cosas como, la optima ubicación del anuncio, colores, formatos, etc.

La idea es ir de forma lenta, pero segura, que en cada capítulo no queden dudas de lo que se esta intentando explicar.

En próximos capítulos de este Curso de Adsense “desde cero”, se verá como insertar los anuncios Adsense en plataformas como Wordpress o Blogger.

Hasta la próxima.

Vídeotutorial Capítulo 2 - Cómo insertar los anuncios Adsense en Dreamweaver

Capítulo Anterior - Próximo Capítulo

Esta prohibida la reproducción total o parcial de este documento sin la expresa autorización del autor.