Tutorial: Señala la publicidad como en los grandes portales

  • Autor Autor dreknoun
  • Fecha de inicio Fecha de inicio
dreknoun

dreknoun

Iota
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
pEFGPtX.jpg

AdSense nos obliga a indicar que sus banners son de publicidad, y si la señalización es excesivamente grande, es más que probable que nadie de clic. De modo que vamos a hacer como los grandes portales web y añadir un pequeño texto ("publicidad") y una línea para señalar un banner publicitario.

Todo el proceso se hace en HTML y es bastante sencillo. Donde queramos añadir la publicidad, implementaremos el siguiente código:

HTML:
<style>
.texto {
font-size: 8pt; color: gray; margin-bottom: 0; text-align: right; 
}

hr { 
padding: 0; margin-top: 0; margin-bottom: 10px; 
}
</style>

<div style="padding:5px;"><div class="texto">Publicidad</div>
<hr>

<codigo adsense></div>

El resultado que obtenemos es el siguiente (en mi caso lo hice en un widget en Wordpress):

SPRoVcj.jpg

Vamos a ver el código, ¿cómo funciona?

Definimos el estilo (con la etiqueta<style>) del texto y la línea separadora (etiqueta<hr>). Para darle estilo al texto sin modificar toda la página, creo una clase (en este caso "texto") y utilizo un div con la palabra "publicidad". A esta clase le doy un tamaño de fuente de 8 puntos, color gris, sin margen inferior y alineado a la derecha.

En la línea (<hr>) le vamos a dar un margen superior de 0, inferior de 10px y sin padding. Ahora tan solo nos queda llamar al div y a la línea y lo hacemos después de cerrar la etiqueta<style>.

Ya está, con esto indicamos los banners publicitarios sin problemas legales, de una manera sencilla y con estilo. Podemos modificar a nuestro gusto el texto para que se adapte a nuestra web.

Edit:
Para hacerlo en Blogger

Vamos a editar el HTML de nuestra plantilla. Buscaremos dónde se declaran los estilos y añadiremos nuestro código.
axYecnf.jpg

El estilo en cuestión:
HTML:
/* Publicidad----------------------------------------------- */
.texto {
font-size: 8pt; color: gray; margin-bottom: 0; text-align: right; 
}
hr { 
padding: 0; margin-top: 0; margin-bottom: 10px; 
}
(Lo definí justo debajo del estilo del contenido)

Luego llamamos al div con la información. Yo lo utilicé en un widget, aunque pueden hacerlo en cualquier parte del sitio.
El código:
HTML:
<div style="padding:5px;"><div class="texto">Publicidad</div>
<hr>

<codigo adsense></div>

Gracias Enlace eliminado por el aviso del segundo div, así nada se desencuadra 🙂

Y este es el resultado:
OvaI45E.jpg


Nota: En el caso de que lo hagan dentro de la plantilla, lo mejor será que definan en la hoja de estilos la clase, y luego hagan simplemente la llamada desde donde quieran poner el banner con un div.

Todos los "me agrada" son bien recibidos 🙂 Si tienen alguna duda tan solo posteenla en el hilo.
 
Última edición:
que bonito queda me lo llevo gracias
 
[MENTION=17650]dreknoun[/MENTION] buen tuto, recomendación, deberías encerrar todo el div del agregado + adsense, para que el contenido del sitio no afecte la posicion de uno u otro desplazando alguno de ellos quedando mal.
HTML:
<div style="padding:5px;">DIV SEÑALADOR + ADSENSE</div>

De esa forma sea cual sea el contenido que rodea al adsense y al señalador no afecta su posición, descuadrandolos! :encouragement:
 
Muy útil, aunque soy partidario de no indicar nada.
 
Estoy empezando en esto yy queda muy bien, buen aporte !
 
dreknoun buen tuto, recomendación, deberías encerrar todo el div del agregado + adsense, para que el contenido del sitio no afecte la posicion de uno u otro desplazando alguno de ellos quedando mal.
HTML:
<div style="padding:5px;">DIV SEÑALADOR + ADSENSE</div>

De esa forma sea cual sea el contenido que rodea al adsense y al señalador no afecta su posición, descuadrandolos! :encouragement:

Gracias por el comentario Cicklow, lo cierto es que yo de programar nada, pero me puse a trastear ayer con Wordpress y el widget para conseguir ese efecto y es lo que conseguí.

Voy a experimentar más, poniendo como dices el código dentro del div, a ver qué tal y si todo queda bien actualizo el hilo principal 🙂

Muy útil, aunque soy partidario de no indicar nada.

Entonces ve con cuidado, porque (si mal no recuerdo) en las políticas de Adsense exigen que lo indiques.
 
Entonces ve con cuidado, porque (si mal no recuerdo) en las políticas de Adsense exigen que lo indiques.

No lo exigen sino que te dicen que si tienes contenido igual al banner adsense, haciendo que esto provoque clics invalidos o no diferenciar el contenido del banner, es necesario colocarle el tag Publicidad!
 
Que chulo el efecto, me lo quedo para una cosita que estoy haciendo
 
Muy bueno el efecto 🙂
 
Para blogger sale mal 🙁
 
Para blogger sale mal 🙁

Ahora mismo me fijo. Supongo que tendrás que declarar el estilo en el mismo lugar que el resto (al ser un xml me parece que está todo en una misma hoja). Igual, dentro de un rato hago pruebas y si hay que modificar algo lo indico en el hilo principal 🙂

Si quieres te menciono cuando lo consiga :encouragement:
 
Ahora mismo me fijo. Supongo que tendrás que declarar el estilo en el mismo lugar que el resto (al ser un xml me parece que está todo en una misma hoja). Igual, dentro de un rato hago pruebas y si hay que modificar algo lo indico en el hilo principal 🙂

Si quieres te menciono cuando lo consiga :encouragement:

Genial te agradecería mucho que me menciones cuando lo tengas.
 
Carambel acabo de añadirlo al hilo principal, espero que se entienda, si hay algo que no entiendes vuelve a preguntarme 🙂
Enlace eliminado perdona que te mencione jaja, quería agradecerte por lo del div, y de paso preguntarte si así es como mencionabas de aplicarlo 🙂
 
Última edición:
Carambel acabo de añadirlo al hilo principal, espero que se entienda, si hay algo que no entiendes vuelve a preguntarme 🙂
Enlace eliminado perdona que te mencione jaja, quería agradecerte por lo del div, y de paso preguntarte si así es como mencionabas de aplicarlo 🙂

Perfecto 😀 :encouragement:
 
Ya pues amigo muy tarde haces este tutorial cuando el payaso ya esta adentro!!:distant:
Hace unos días estaba buscando como loko, como poner este tipo de anuncio en mi blog y nadie le tincaba al gordo.

Bueno de todas maneras creo que pasare por mi blog y lo utilizare. Gracias!!:encouragement:
 
Le hago un pequeño up por si alguien más tiene dudas 🙂
 
Esta bueno para quienes no saben! 🙂
 
buen aspecto estetico 😀
 
Gracias, igualmente se puede personalizar y cambiar la fuente, el color, y muchas más cosas 🙂
 
Y como se elimina la linea que aparece encima, dejando solo la palabra "Publicidad" encima?
 
Atrás
Arriba