2018-09-25

Poner anuncios AdSense dentro del texto en Blogger (desde plantilla)

9/25/2018
Poner anuncios AdSense dentro del texto en Blogger, es comúnmente un problema para los usuarios de esta plataforma, yo mismo sufrí este inconveniente por años, sin embargo, actualmente puedo configurar mi sitio para que muestre anuncios en cualquier lugar de una entrada, sin que tener que colocar códigos cada vez que voy a hacer una publicación.

Durante muchos años la mejor solución para este inconveniente era pegar directamente el código del anuncio en el texto y, además, colocar el CSS para que se viera bien. Esto último no va bien con el SEO y resulta bastante engorroso, sobre todo porque en un futuro te puedes ver obligado a editar entrada por entrada para cambiar el anuncio o para simplemente quitarlo. Con la solución que explicaré aquí, sólo tendrás que hacer un cambio en la plantilla de tu Blog y, podrás mostrar anuncios en las posiciones que elijas, sin tener que hacer más acciones con cada entrada de tu sitio web.

Los anuncios dentro del texto de una entrada resultan muy convenientes sobre todo en la actualidad, ya que un alto porcentaje de las visitas llegan desde teléfonos inteligentes y, en un smartphone el sitio sólo ocupa el ancho de la entrada, por lo que la publicidad que tendrá prioridad será la que se encuentre alineada con el texto del artículo de nuestro sitio web.

¿Cómo mostrar anuncios de AdSense debajo de cualquier párrafo en Blogger?

Con este método podrás escoger en que lugar del texto mostrar anuncios y, la cantidad de anuncios que quieres mostrar dentro de la entrada, en mi caso, lo tengo configurado para que se muestren dos, pero se puede hacer con más si así se desea, dependiendo también de lo extensos que sean los artículos de tu blog

1. Iniciar sesión en Blogger escoger el blog que quieres modificar, hacer clic en “Tema”, hacer una copia de seguridad de tu plantilla y, posteriormente abrir el editor HTML de Blogger.

2. Una vez tengas el editor abierto, presiona las teclas Ctrl + F y busca la siguiente línea de código: <data:post.body/>.  Encontrarás varias veces este código, pero debes ubicarte en el segundo. En el caso de que no funcione, tendrás que probar con el siguiente.

3. Cambia ese código por la siguiente línea: <div id='adsense-target'><data:post.body/></div>

4. Arriba del anterior código deberás pegar tu anuncio de AdSense paseado, dentro de un DIV, de la siguiente forma:     <div id='adsense-content'> CÓDIGO DE ADSENSE AQUÍ </div>. Deberá quedar algo así como se ve en la imagen de abajo.

Cómo poner anuncios AdSense dentro del texto en Blogger

5. Colocar CSS para para que el anuncio se vea bien dentro del texto. Para eso vaya a su apartado CSS dentro de la plantilla y llame el DIV colocando: #adsense-content {text-align:center;}. Si quieres alinearlo a la izquierda o a la derecha, cambie “center” por “lefft o rigth” respectivamente. También podrás ponerle margen si así lo deseas.

6. Debajo de la línea <div id = 'adsense-target'> <data: post.body /> </ div> deberás pegar el código JavaScript que hará posible que se muestre tu anuncio de AdSense debajo del primer párrafo de tu entrada o, del párrafo que elijas.

<script type='text/javascript'>
function insertAfter(addition,target){
var parent = target.parentNode;
if (parent.lastChild == target){
parent.appendChild(addition);
} else {parent.insertBefore(addition,target.nextSibling);}}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[1]);}
</script>

Nota: Si quiere que el anuncio aparezca debajo del segundo párrafo o del tercero, sólo tendrá que editar la línea del script: insertAfter(adscont,linebreak[1], cambiando el “1” por 2 o por 3 según corresponda.

Para poner espacio entre el anuncio y el texto, o alinear los anuncios, lo único que tienes que hacer es ir a CSS de tu blog, llamar el espacio del anuncio de la siguiente manera: #adsense-content {text-align:center;} y colocar dentro de las llaves, lo que consideres necesario.

Si, estás usando la nueva versión de Blogger y, en lugar de </br> tus párrafos se dividen con <p>, lo único que debes hacer es editar el código anterior en la linea "var linebreak = target.getElementsByTagName(&quot;br&quot;);" reemplazando </br> por <p>

¿Cómo poner 2 o más anuncios de AdSense dentro del texto en Blogger?

Si lo que quieres es poner más de un anuncio como lo he hecho yo, lo que tendrás que hacer es repetir el paso 4 y colocar un anuncio más dentro de la plantilla, editando el nombre del DIV, es decir, que ya no será <div id='adsense-content'> sino que tendrás que agregarle una letra más para que se diferencien, algo como esto: <div id='adsense-contentb'>.

También tendrás que agregar una nueva línea en tu CSS con el nombre del nuevo DIV, siguiendo las indicaciones de paso 5.

Finalmente deberás agregar dos nuevas líneas en tu script, para hacer el llamado del nuevo anuncio y para definir la ubicación en la que debe aparecer, quedando de la siguiente manera:

<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {parent.appendChild(addition);} else {
parent.insertBefore(addition,target.nextSibling);}}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var adsconte = document.getElementById(&quot;adsense-contentb&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[1]);
insertAfter(adsconte,linebreak[5])
} </script>

Nota: Yo he puesto para que el segundo anuncio aparezca debajo del quinto párrafo, pero si tú puedes escoger otra posición cambiando ese número. Ten en cuenta que en algunos casos es posible que Blogger interprete un subtítulo como un párrafo y por tanto eso afectará la posición del anuncio.

También recomiendo tener cuidado con la posición de las imágenes dentro del texto, ya que según entiendo, va contra las políticas de AdSense poner el anuncio muy cerca de una imagen, lo que pueda llegar a confundir al visitante de tu sitio web.

Para poner un tercer anuncio dentro de la entrada bajo esta modalidad, sólo tendrás que repetir los pasos y hacer los cambios correspondientes.

6 Comments:

Tu comentario será revisado antes de ser publicado.

  1. Me parece de mucha utilidad la información , gracias por compartir

    ResponderBorrar
  2. Buen aporte! lo implementé, pero no salen los anuncios donde deben, sino que me aparece al inicio y al final. que estaré colocando mal??

    ResponderBorrar
    Respuestas
    1. Hola Daniel, gracias por tu comentario. Por lo que veo en tu blog sobre plantas, has puesto mal el código, además veo que tienes dos veces el script, el cual sólo debe ir una vez. También puedes cambiar el número en "insertAfter(adsconte,linebreak[5])" y probar hasta que te salga en la posición que deseas.

      Borrar
  3. y si en vez de adsense es otro codigo de otra empresa publicitaria seria el mismo precedimento

    ResponderBorrar
    Respuestas
    1. Hola, claro que sí, es lo mismo, de hecho las pruebas de este método las hice con un código diferente al de AdSense. No importa de que empresa sea, te debe funcionar de la misma manera. Saludos.

      Borrar