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
Justo antes de agregamos la libreria de JQuery recuerden que esto es con java así que esto es inperscindible:
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
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
la caja nos la hemos echo así:
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
eso es para que no se muestre, descuida ya en el java lo aremos aparecer donde queramos.
nuestro CSS seria algo asi:
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
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>:
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
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:
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.
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/>
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)
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: