Tutorial: Cómo crear anuncios adaptables de Google AdSense para tu sitio Web

GoRXiKaRa · 23 Dic 2014

Pompinchu dijo:
¿Moderadora desde cuando? 😱

Madre mía pues anda que no lleva tiempo xD

X-Wing · 23 Dic 2014

Un buen tuto al nivelazo que nos tienes acostumbrados, :witless:

Gracias!

Noshy · 23 Dic 2014

Ya lo sabia per igualmente es un buen aporte para aquellos que recien se inician.

iNeedYou · 23 Dic 2014

doutop15 dijo:

[MENTION=3486]iNeedYou[/MENTION]

Dejo mi aporte 🙄

Se trata de este otro, es más facil de usar solo ahi que pegar el ca-pub- ### y listo 🙂

HTML:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-AQUI-REEMPLAZAR";
if(window.innerWidth >= 800){
 google_ad_width = 728;
 google_ad_height = 90;
 google_ad_format = "728x90_as";
}else if(window.innerWidth < 400){
 google_ad_width = 300;
 google_ad_height = 250;
 google_ad_format = "300x250_as";
}else{
 google_ad_width = 468;
 google_ad_height = 60;
 google_ad_format = "468x60_as";
}
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Es editable Y listo solo lo pegan donde desea que se muestre el banner :encouragement:

Saludos buen tuto :welcoming:

Gracias por publicar esta otra opción. Yo pronto tendré que implementar códigos de este tipo para mostrar en PC 336 y en móvil que se ajuste. Veremos si para entonces me aclaro 🙄

renzoriky · 23 Dic 2014

no me atrevia a saber como hacerlo ahora ya lo se :encouragement:

lordskorpius · 23 Dic 2014

iNeedYou dijo:
Gracias por publicar esta otra opción. Yo pronto tendré que implementar códigos de este tipo para mostrar en PC 336 y en móvil que se ajuste. Veremos si para entonces me aclaro 🙄

Yo lo uso de la forma que citaste y es fácil de implementar, para mí es la mejor alternativa porque escojo mis bloques y no adsense que me clava bloques feos con pocos clics y con feo cpc en el móvil.

likepop · 23 Dic 2014

[MENTION=3486]iNeedYou[/MENTION] Muchas gracias por este tutorial!

Pero me gustaría preguntarte algo. Para colocar los anuncios en Blogger hay que parchearlos o algo por el estilo. Entonces, si yo hiciese eso, aún me serviría esto del anuncio adaptable??

Gracias nuevamente 🙂

iNeedYou · 23 Dic 2014

likepop dijo:
[MENTION=3486]iNeedYou[/MENTION] Muchas gracias por este tutorial!

Pero me gustaría preguntarte algo. Para colocar los anuncios en Blogger hay que parchearlos o algo por el estilo. Entonces, si yo hiciese eso, aún me serviría esto del anuncio adaptable??

Gracias nuevamente 🙂

Cito a [MENTION=47896]RaikND[/MENTION] que los implementó en Blogger si no me equivoco. ¿Puedes responder por mi? 🙄 Yo en Blogger no los uso todavía.

RaikND · 23 Dic 2014

iNeedYou dijo:
Cito a [MENTION=47896]RaikND[/MENTION] que los implementó en Blogger si no me equivoco. ¿Puedes responder por mi? 🙄 Yo en Blogger no los uso todavía.

Perdona... tengo el sueño descontrolado y me acabo de levantar ahora... en un rato te lo paso por privado o por aquí mismo y lo pones :encouragement:

iNeedYou · 23 Dic 2014

RaikND dijo:
Perdona... tengo el sueño descontrolado y me acabo de levantar ahora... en un rato te lo paso por privado o por aquí mismo y lo pones :encouragement:

Aquí mismo por favor, y resuelves la duda a más gente que llegue hasta esta página 🙂

Akela · 23 Dic 2014

[MENTION=3486]iNeedYou[/MENTION] genial el tuto.
Consulta has probado el plugin de AdSense realizado por google para WordPress?

iNeedYou · 23 Dic 2014

Akela dijo:
[MENTION=3486]iNeedYou[/MENTION] genial el tuto.
Consulta has probado el plugin de AdSense realizado por google para WordPress?

No, ni tenía idea de su existencia, ¿dejas su link, por favor? Y le echo un ojo cuando pueda 😀

Akela · 23 Dic 2014

iNeedYou dijo:
No, ni tenía idea de su existencia, ¿dejas su link, por favor? Y le echo un ojo cuando pueda 😀

Estoy en la calle.. Pero desde WordPress pones AdSense y te aparece el plugin desarrollado por google... Cualquier cosa mas tarde te paso el link.

Beso

cheli201 · 23 Dic 2014

Muy útil esto de los anuncios adaptables y prácticamente obligatorio hoy día con el tráfico móvil cada vez mayor. un tuto muy fácil de entender para que todos puedan aplicarlo y ponerse al día 🙂

Eduardo Piedra · 23 Dic 2014

Gracias x el aporte! Oyes, deberías hacer un libro o algo; sabes mucho y muy bueno.
Gracias sinceras y felicidades!
[emoji6]

Enviado desde mi iPhone con Tapatalk

RaikND · 24 Dic 2014

Bueno yo aquí dejo mi pequeño aporte en CSS y HTML, sin necesidad de el asqueroso javascript odioso.

Podeis modificar exactamente como quereis que salga vuestro anuncio cambiando el width / height en estas clases:

PHP:

.promoPc p {width: 100%; height: 100px;}
.promoPhone p {width: 100%; height: 100px; display: inherit;}

Esta parte solo sera apto para que el anuncio solo se imprima en entradas de Blogger:
Antes de el </head>:

PHP:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Promo Header by RaikND */
  	.promoContent {background-color: #F3F3F5; width:100%; text-align:center; margin: 5px 0 0 0; padding: 2px;}
	.promoPc, .promoPhone {width: 100%;}
	.promoPc p {width: 100%; height: 100px;}
	.promoPhone p {display: none;}


/* Responsive Phone by RaikND */
  @ media (max-width: 480px) {
    .promoContent {height:100px;}
	.promoPc p {display: none;}
    .promoPhone { float:left; width: 100%; margin-bottom: 5px;}
    .promoPhone p {width: 100%; height: 100px; display: inherit;}
}
</style>
</b:if>

Y en el sitio que quieres ubicar tu anuncio en la parte HTML, claro despues de la etiqueta <body>:

HTML:

<!-- Promo Header by RaikND -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='promoContent'>
    <div class='promoPc'>
		<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL PC</p>
	</div>
	<div class='promoPhone'>
		<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL MOVIL</p>
	</div>
</div>
</b:if>

Todas las plataformas "WordPress" y ponen esto antes de el </head>:

PHP:

/* Promo Header by RaikND */ 
      .promoContent {background-color: #F3F3F5; width:100%; text-align:center; margin: 5px 0 0 0; padding: 2px;} 
    .promoPc, .promoPhone {width: 100%;} 
    .promoPc p {width: 100%; height: 100px;} 
    .promoPhone p {display: none;} 


/* Responsive Phone by RaikND */ 
  @ media (max-width: 480px) { 
    .promoContent {height:100px;} 
    .promoPc p {display: none;} 
    .promoPhone { float:left; width: 100%; margin-bottom: 5px;} 
    .promoPhone p {width: 100%; height: 100px; display: inherit;} 
}

Y aqui despues del <body>:

HTML:

<!-- Promo Header by RaikND -->
<div class='promoContent'>
    <div class='promoPc'>
		<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL PC</p>
	</div>
	<div class='promoPhone'>
		<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL MOVIL</p>
	</div>
</div>

Aquí esta mi pequeño aporte, lo que necesiten, avisarme :encouragement:

Akela · 24 Dic 2014

RaikND dijo:

Bueno yo aquí dejo mi pequeño aporte en CSS y HTML, sin necesidad de el asqueroso javascript odioso.

Podeis modificar exactamente como quereis que salga vuestro anuncio cambiando el width / height en estas clases:

PHP:

.promoPc p {width: 100%; height: 100px;}
.promoPhone p {width: 100%; height: 100px; display: inherit;}

Esta parte solo sera apto para que el anuncio solo se imprima en entradas de Blogger:
Antes de el </head>:

PHP:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Promo Header by RaikND */
  .promoContent {background-color: #F3F3F5; width:100%; text-align:center; margin: 5px 0 0 0; padding: 2px;}
.promoPc, .promoPhone {width: 100%;}
.promoPc p {width: 100%; height: 100px;}
.promoPhone p {display: none;}


/* Responsive Phone by RaikND */
  @ media (max-width: 480px) {
    .promoContent {height:100px;}
.promoPc p {display: none;}
    .promoPhone { float:left; width: 100%; margin-bottom: 5px;}
    .promoPhone p {width: 100%; height: 100px; display: inherit;}
}
</style>
</b:if>

Y en el sitio que quieres ubicar tu anuncio en la parte HTML, claro despues de la etiqueta <body>:

HTML:

<!-- Promo Header by RaikND -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='promoContent'>
    <div class='promoPc'>
<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL PC</p>
</div>
<div class='promoPhone'>
<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL MOVIL</p>
</div>
</div>
</b:if>

Todas las plataformas y ponen esto antes de el </head>:

PHP:

/* Promo Header by RaikND */ 
      .promoContent {background-color: #F3F3F5; width:100%; text-align:center; margin: 5px 0 0 0; padding: 2px;} 
    .promoPc, .promoPhone {width: 100%;} 
    .promoPc p {width: 100%; height: 100px;} 
    .promoPhone p {display: none;} 


/* Responsive Phone by RaikND */ 
  @ media (max-width: 480px) { 
    .promoContent {height:100px;} 
    .promoPc p {display: none;} 
    .promoPhone { float:left; width: 100%; margin-bottom: 5px;} 
    .promoPhone p {width: 100%; height: 100px; display: inherit;} 
}

Y aqui despues del <body>:

HTML:

<!-- Promo Header by RaikND -->
<div class='promoContent'>
    <div class='promoPc'>
<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL PC</p>
</div>
<div class='promoPhone'>
<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL MOVIL</p>
</div>
</div>

Aquí esta mi pequeño aporte, lo que necesiten, avisarme :encouragement:

Consultonta... Que archivos son en WordPress

RaikND · 24 Dic 2014

Akela dijo:
Consultonta... Que archivos son en WordPress

Los de abajo :encouragement:

iNeedYou · 25 Dic 2014

Gracias por el código [MENTION=47896]RaikND[/MENTION] :encouragement:

Vzk91 · 26 Dic 2014

Una duda que tengo, si yo a la caja contenedora del anuncio le doy un width: 100% y un height: 100px; mostrara los anuncios ajustando el ancho pero manteniendo siempre el alto ? Porque lo he intentado pero el anuncio se sale del contenedor, no se ajusta al alto.

Tutorial: Cómo crear anuncios adaptables de Google AdSense para tu sitio Web

GoRXiKaRa

X-Wing

Noshy

iNeedYou

renzoriky

lordskorpius

likepop

iNeedYou

RaikND

iNeedYou

Akela

iNeedYou

Akela

cheli201

Eduardo Piedra

RaikND

Akela

RaikND

iNeedYou

Vzk91

Temas similares

Privacidad y transparencia

Privacidad y transparencia