Tutorial Agrega adsense automatico a tus entradas solo con javascript

MixViral

Estafador
Mensajes
45
Puntuación de reacción
0
Para esto necesitamos tener un blog en blogger, si no lo tienes ve a ello :Blogger
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

Código:
</head>
Justo antes de agregamos la libreria de JQuery recuerden que esto es con java así que esto es inperscindible:

Código:
<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

Código:
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

Código:
</body>
la caja nos la hemos echo así:

Código:
<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

Código:
display: none;
eso es para que no se muestre, descuida ya en el java lo aremos aparecer donde queramos.

nuestro CSS seria algo asi:

Código:
<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

Código:
<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>:

Código:
<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

Código:
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í.
 
Mensajes
172
Puntuación de reacción
0
Buen aporte men, aunque hay una forma mas sencilla pero bueno aporte :mola:
 
Mensajes
162
Puntuación de reacción
0
gracias por el aporte, puede ahorrarme trabajo en proximos proyectos
 

Mauricio Sunde

Piedra
Usuario de Piedra
Mensajes
42
Puntuación de reacción
0
Gracias por el aporte amigo, aunque también podemos utilizar los Widgets de Google Adsense que vienen en Blogger.
 
Arriba