Tutorial: Cómo agregar automáticamente Adsense a las entradas de tu blog

  • Autor Autor Manu Hernandez
  • Fecha de inicio Fecha de inicio
M

Manu Hernandez

Gamma
Redactor
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas chavales, hoy me desperté con ganas de hacerles este tutorial, he visto este método y me puse a buscar como hacerlo, pues tomad ! aqui esta.

Para esto necesitamos tener un blog en blogger, si no lo tienes ve a ello :Enlace eliminado
luego de esto necesitamos un código de anuncio de adense, el que añadiremos de manera automática a nuestras entradas. en este caso usare el anuncio 300x250.

Paso seguido es acceder a nuestra plantilla y dentro de ahí buscaremos el cierre de head pulsa CTRL+F y pega en la caja de búsqueda
HTML:
</head>

Justo antes de agregamos la libreria de JQuery recuerden que esto es con java así que esto es inperscindible:
HTML:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

si ya tienes la librería pues ya no hace falta agregar esta.

el siguiente paso es crear nuestra caja donde posteriormente meteremos nuestro anuncio de adsense, esta caja es para poder darle atributos con css facilmente. yo usare el id
HTML:
publi-ads

Una vez hecha nuestra caja basta pensar donde incluirla y como no queremos sobrecargar nuestro blog poniendolo en el head y usando un sentido un poco ortodoxo lo colocaremos justo antes del cierre de
HTML:
</body>

la caja nos la hemos echo así:

HTML:
<div id='publi-ads'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- PUBLI-ADS -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-############"
     data-ad-slot="###"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

después de agregar esto en nuestra platilla acto seguido es crearnos el css correspondiente, Lo que aremos es ponerlo a la izquierda con respecto al texto y le daremos un margen para que este no se pegue mucho a este. Como el anuncio lo hemos pegado dentro del body este se mostrara al final de la entrada para eso inicialmente le daremos un
HTML:
display: none;

eso es para que no se muestre, descuida ya en el java lo aremos aparecer donde queramos.

nuestro CSS seria algo asi:
HTML:
<style>
#publi-ads {
display: none;
float: left;
width: 300px;
height: 250px;
margin: 0 20px 10px 0 ;
overflow: hidden;
background: #bbb;
}
</style>

bien ya tenemos casi todo echo lo único que nos falta es el script para esto y teniendo en cuenta que al crear un post en blogger usamos los saltos de lineas para separar parrafos pues esto es lo que nos va servir ya que básicamente el script lo que hace es buscar el segundo salto de linea
HTML:
<br/>
y agrega nuestra caja que hemos echo anteriormente que es publi-ads aqui es donde se vuelve visible el anuncio con el atributo inline-block.

este es el java y lo colocaremos igual antes del cierre de </body>:
HTML:
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('#publi-ads').insertAfter($('br:eq(1)')).css('display','inline-block');
});
//]]></script>

si lo que quieres es incluir el anuncio en el tercer,cuarto etc párrafo solo debes cambiar el 1 que esta dentro de los paréntesis de
HTML:
eq(1)
recuerda que no es muy recomendable ponerle un valor tan alto ya que entonces quedaría el anuncio a mitad de la entrada o mas abajo.


NOTAS:

si quieres cambia el id publi-ads por otro debes hacerlo tanto en la caja del anuncio como en el javascript ya que si no no te va a funcionar

debes tener cuidado de que no tengas saltos de linea al inicio del post si no el anuncio se insertara ahí.

1- Fuente: Insertar un anuncio tras un párrafo cualquiera... o lo que quieras | Oloblogger
2- La modificación del comportamiento de los anuncios no se permite por adsense, el uso queda bajo su responsabilidad.
 
Última edición por un moderador:
Muchas Gracias Excelente Tutorial :encouragement:
 
gracias por compartirlo lo reviso detalladamente a ver que tal ^^
 
Muchas gracias!!!!
 
Buen tutorial pero esto no lleva a baneo de adsense
 
¿Es el que salió hace poco en oloblogger? ¿o lo hiciste tú?

Si lo hiciste tú puedes decirme para que sirve el display:none de los estilos, porque estuve probando a ver que era lo que ocultaba pero no pude encontrar lo que hacia y como en las politicas de adsense dice que no usemos display none quiero saber si oculta otro bloque de adsense.
 
buen tutorial, me va a ayudar, gracias
 
Excelente aporte 😉 !
 
Tengo la misma pregunta que belze7 🙂 si pudieras aclarar seria perfecto :encouragement:
 
Buen tutorial pero esto no lleva a baneo de adsense

no estas haciendo nada mas que cambiar la posición de una anuncio... nada mas, esto es para blogger ya que en wordpress con el plugin de adsense se puede hacer lo mismo

- - - Actualizado - - -

¿Es el que salió hace poco en oloblogger? ¿o lo hiciste tú?

Si lo hiciste tú puedes decirme para que sirve el display:none de los estilos, porque estuve probando a ver que era lo que ocultaba pero no pude encontrar lo que hacia y como en las politicas de adsense dice que no usemos display none quiero saber si oculta otro bloque de adsense.

No lo hice yo, lo mire en su codepen de olo...

lo que hacemos con display none básicamente es no mostrar el anuncio ya que como lo hemos puesto en el cierre de body se mostrara al final de la pagina, peeero como en el script hacemos referencia a que aparezca en el segundo salto de linea del post no podemos dejar el anuncio sin el display none. Eso esta explicado en el post, ya con el inline-block. del script lo hacemos visible. pero realmente es el mismo anuncio.

- - - Actualizado - - -

buen tutorial, me va a ayudar, gracias

Excelente aporte 😉 !

puede ser funcional, saludos

- - - Actualizado - - -

Tengo la misma pregunta que belze7 🙂 si pudieras aclarar seria perfecto :encouragement:

lo que hacemos con display none básicamente es no mostrar el anuncio ya que como lo hemos puesto en el cierre de body se mostrara al final de la pagina, peeero como en el script hacemos referencia a que aparezca en el segundo salto de linea del post no podemos dejar el anuncio sin el display none. Eso esta explicado en el post, ya con el inline-block. del script lo hacemos visible. pero realmente es el mismo anuncio.
 
Tremendo tuto... Gracias por el aporte :encouragement:
 
Es ilegal para adsense, no podes ocultar el anuncio ni modificar su comportamiento... :fatigue::fatigue:
 
Tienes un demo la verdad no entendi la funcion de esto te agradeceria mucho
 
Atrás
Arriba