Insertar un anuncio tras un párrafo cualquiera... o lo que quieras | Oloblogger Una vez más, y parece que va siendo una costumbre últimamente, vamos a utilizar JavaScript para solu...

10 de noviembre de 2015

Insertar un anuncio tras un párrafo cualquiera... o lo que quieras

Una vez más, y parece que va siendo una costumbre últimamente, vamos a utilizar JavaScript para solucionar una tarea que con sólo CSS no parece posible.

Se trata de insertar en la parte que queramos de una entrada (con cierto límite) un elemento cualquiera y además hacerlo de manera automática para que nos salga en todas las entradas de igual manera. En el título cito un anuncio porque suele ser lo más solicitado, pero también podría ser una botonera social como la que veis actualmente en mis posts, o bien cualquier otro contenido. Hasta un vídeo, vaya.

Lo de los límites es porque no vamos a usar ningún marcado HTML extra, pero con una caja con una clase o ID creada al efecto e insertada a mano en un punto exacto del post, el siguiente sistema sería tan preciso como quisiéramos.

Sin embargo lo que intento es que no haya que estar metiendo manualmente nada de código extra en las entradas, así que simplemente elegiremos si lo hacemos tras un párrafo, tras dos o tras los que sea necesarios.

Inserta Adsense en la parte que quieras de un post


Lo primero que hay que hacer es construir la caja con lo que queremos mostrar y darle algo de estilo.

En este primer ejemplo será un anuncio de Adsense por lo que simplemente pegaremos el código que nos facilita ese servicio. Eso sí, todo ese código lo meteremos dentro de una caja con un id que podamos utilizar posteriormente para identificarlo; adsense1 en este caso.

Como queremos que esto salga en todas las entradas lo incluiremos en la plantilla y para que no tengáis que buscar otro lugar, quizás más eficiente pero tan personalizado que sería distinto en cada caso, lo que vamos a hacer es colocarlo justo antes del cierre </body>, lugar dónde a todos os debería funcionar bien.

<div id='adsense1'>
<script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<!-- Bloque adaptable comodin -->
<ins class='adsbygoogle'
style='display:block'
data-ad-client='ca-pub-XXXXXXXXXXXXXXXX'
data-ad-slot='XXXXXXXXXX'
data-ad-format='auto'></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

Lo siguiente -y que también pondremos a continuación de lo anterior en la plantilla- será formatear la caja contenedora con CSS. Como es un anuncio de 300x250 px pues ese será su tamaño. Lo pondremos flotando a la izquierda con respecto al texto y los márgenes serán para que no se pegue demasiado a este. Inicialmente le ponemos un display: none; para que no se vea ni siquiera al final de la página. Con el JavaScript ya lo haremos visible cuando corresponda.

<style>
#adsense1 {
display: none;
float: left;
width: 300px;
height: 250px;
margin: 0 20px 10px 0 ;
overflow: hidden;
background: #ccc;
}
</style>

Y por último -también para incluir a continuación de lo anterior- la parte JavaScript.

He usado jQuery así que si no tenéis esa librería en vuestra plantilla no olvidéis hacerlo ahora. Sólo hay que incluir una línea como esta. En Blogger sería justo después de ]]></b:skin>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

Partiendo de la base de que los saltos de línea separan párrafos, lo que hace es sencillo: busca el segundo salto de línea (<br/>)que hayáis incluido en el contenido de cada entrada y justo después inserta el bloque #adsense1 antes generado. Adicionalmente lo hace visible con ese inline-block que veis.

<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('#adsense1').insertAfter($('br:eq(1)')).css('display','inline-block');
});
//]]></script>

En algunos casos hará falta que ese valor 1 que hay dentro de los paréntesis de eq() sea 0, cosa que dependerá de si vuestro editor de entradas inserta uno o dos saltos de línea para separar párrafos. Es cuestión de probar.

Para hacerlo tras el segundo, tercer o posteriores párrafos sólo habrá que incrementar ese número, pero por si tenéis entradas cortas intercaladas con otras generalmente más largas, lo mejor será que no uséis un número muy alto.

Sólo tenéis que tener una precaución y es que no haya saltos de línea al principio de vuestros artículos para evitar que la caja #adsense1 se inserte dónde no queréis.



Para otro bloque distinto de anuncios en otra parte, simplemente se crea otra caja con otro id distinto (#adsense2, por ejemplo), se crea el estilo necesario y se añade otra línea idéntica a la que hay tras el $(document).ready(function() {, pero con ese otro id y el número de saltos de línea necesarios.

Y ahora siguiendo el mismo sistema ¿qué tal si metemos una botonera social al principio de las entradas en lugar de un anuncio?

<style>
#redes {
display: none;
float: right;
width: 76px;
margin: 0 0 10px 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
background: #eee;
text-align: center;
}
</style>
<div id='redes'>
<!--Twitter -->
<div class='bottwi'>
<a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
<!--Facebook-->
<div class='botfac'>
<iframe src='//www.facebook.com/plugins/like.php?width&amp;layout=box_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=65' scrolling='no' frameborder='0' style='border:none; overflow:hidden; height:65px;' allowTransparency='true'></iframe>
</div>
<!-- Google +1 -->
<div class='botgoo'>
<div class='g-plusone'/>
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>
</div>
</div>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('#redes').insertAfter($('br:eq(3)')).css('display','inline-block');
});
//]]></script>



Me consta que no todos llegáis al final de todos los posts que escribo, pero para los que sí, este enlace os llevará a un CodePen dónde podéis practicar y ver una variante para poner la botonera justo al principio de la entrada usando como referencia el post-body que todas las entradas de Blogger incluyen.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

39 comentarios :

  1. Muy interesante, como siempre, aunque yo no tengo publicidad en mi blog, lo de la botonera al principio está genial. Pero tengo una pregunta para ti Olo y no sé si esto ya lo has publicado. Veo en algunos blogs que visito, que aparece una pequeña pantalla para que te suscribas al facebook, por ejemplo. He visto algunas que son enormes visualmente y feísimas, pero otras son pequeñas y elegantes, como por ejemplo la que sale en este blog: http://queenofjetlags.com/ Me gustaría saber si ya has hecho algún post de como insertar algo similar, y si no es así, lo tengas en cuenta para futuros post, y que valgan para visitantes de todo el mundo¡¡ Muchas gracias y un abrazo¡¡ :)

    ResponderEliminar
    Respuestas
    1. Bueno, expresamente para eso no, pero sí que publiqué hace tiempo un sistema que servía para mostrar una caja de esa manera... y dentro de ella puedes poner lo que quieras, lo de Facebook u otra cosa.

      Se trata de esta entrada

      Eliminar
  2. Por cierto, perdona se me ha olvidado comentarte, aunque supongo que será un tipo de plantilla determinada y no se podrá implementar a todos, en ese mismo blog que te he indicado en mi otro comentario, me encanta su apariencia, es decir, tener una imagen central arriba que vayan pasando los post primeros o mas destacados, y después una imagen principal de cada publicación para pinchar y entrar a ellas. Espero haberme explicado bien... Se puede conseguir algo así con una plantilla como la que tengo yo en mi blog? Qué habría que modificar? Me parece una imagen muy moderna, actual y fresca para un blog del estilo del mio.. ¿Que te parece? Ya me dices, jajaja ;)

    ResponderEliminar
    Respuestas
    1. Para conseguir eso debes reconstruir por completo tu plantilla. Bueno, mas que eso, hacer una plantilla nueva desde cero. Los elementos principales que ves son simplemente un "slider" y un sistema de "sumarios". Si buscas en el blog encontrarás algunos artículos sobre ambos elementos que quizás te puedan servir para hacer pruebas ;)

      Eliminar
    2. Gracias a ambas preguntas Olo. Ya me imaginaba que con la plantilla que tengo iba a ser imposible conseguir eso, pero buscaré lo del tema del "slider", que me gusta eso y el tema de los sumarios que dices. Espero encontrar algo similar que me pueda servir y probar. También lo de la caja para suscribirse, ya te contaré ;) Gracias como siempre, por contestar. Un saludo.

      Eliminar
  3. Nuevamente por tus lares Oloman:
    Esta vez solicitándote me orientes como puedo hacer para que cuando alguien escriba un comentario en mi blogg tenga la posibilidad de elegir "una" entre "dos" imágenes pequeñas (estilo avatar) para que aparezcan en su comentario abajo a la derecha del mismo.
    Muchas gracias y saludos

    ResponderEliminar
    Respuestas
    1. Eso tendría que desarrollarlo expresamente para tu caso, Salto on line. No tengo publicado nada similar.

      Eliminar
  4. Hola Oloman sabes que el botón de facebook para compartir no va bien? Tienes que pegar la url para q funcione. No comparte directamente. A ti te pasa. Alguna solución?
    Nos encomendamos a ti Oloman.
    Gracias!!!

    ResponderEliminar
    Respuestas
    1. ¿Cómo que no funciona? Acabo de probar el mío y parece que va bien. Quizás fue un fallo temporal...

      Eliminar
  5. Perdón, no especifiqué: no funciona bien cuando compartes por móvil. He visto que lo hablábais en tu post de botones sociales ligeros de peso y que no se solucionó el asunto.
    No es que no funcione, sino que tienes que pegar la url del post que quieres compartir. Para mí es nada, pero para la mayoría de gente si se tiene que parar a pegar la url ya no lo comparte.
    Gracias por responder!!!
    Un saludo

    ResponderEliminar
  6. OK. Ahora lo he vuelto a ver y efectivamente no va en móviles. El problema es que al igual que leiste en aquel post, sigo sin saber cómo solucionarlo.

    ResponderEliminar
  7. OLoman que bien por tus recursos, tengo éste blog www.copolitica.blogspot.com, cuando en la plantilla ingreso el 1er código me señala (en rojo) ='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' es decir que hay un error ¿Qúe debo hacer? Gracias

    ResponderEliminar
  8. Debes ignorar ese color e intentar guardar. Si no te da ningún problema al guardar, ten por seguro que no existe ningún error. De lo contrario te avisaría de ello con un mensaje... no con un color en letra.

    ResponderEliminar
  9. Hola Oloman, he tratado de ponerlo en la plantilla pero no sale nada. Lo que hice fue agrupar los tres codigos que proporcionas y ponerlos arriba de /bod. El codigo adsense lo tuve que parse, porque la linea de codigo donde viene //pagead2.googlesyndication me arrojaba error.

    Haber si me iluminas... para poder insertar (poner) un anuncio adsense despues de un párrafo en los post de blogger.

    ResponderEliminar
    Respuestas
    1. Jhonny ¿en cuál de tus sitios tienes puesto eso que intente ver dónde está el problema?

      Eliminar
    2. Hola Oloblogger, aqui te dejo la url http://goo.gl/4kLFRN

      Eliminar
    3. No veo el JavaScript este en ese blog, Jhonny

      Eliminar
    4. Pues el bloque Adsense1 ni se mueve, así que el problema debe venir por el jQuery. Observo que tienes dos versiones distintas de esa librería por lo que yo probaría a usar el noConflict()

      Eliminar
    5. Gracias Oloman, aunque no se donde esta la otra versión de jQuerry para quitarla, lo que si he visto que mi plantilla ya tiene el noConflict. Asi que solo tuve que agregarle la palabra jQuery al comodín y funciona a la perfección el anuncio de Adsense después del primer párrafo. Se podría poner un anuncio responsive de 338x280 y de 300x250. Y como se podría hacer? Mil gracias por tu tiempo y valiosa ayuda.

      Eliminar
    6. No entiendo muy bien la pregunta Jhonny Sán. Cualquier otro anuncio que quieras añadir será de igual manera a como hiciste con ese que comentamos.

      Eliminar
  10. Hola Oloman, ¿hay alguna manera de evitar que el anuncio se muestre en pantallas de cierto tamaño? He probado a añadir "if (screen.width < 700) {" en el código javascript pero no logro hacerlo funcionar. Me gustaría que el bloque sólo fuese visible en móviles y tablets.

    Gracias de antemano por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Hola Alejandro. Lo de las medidas de la pantalla no lo sé hacer si no consulto guías ajenas, pero aquí encontré algo que quizás te puede servir.

      Eliminar
  11. Hey Oye gracias por la información y una consulta si quiero que aparezca solo dentro del post, en que parte tendría que pegar el código, saludos.

    ResponderEliminar
    Respuestas
    1. En ese caso y para un único post, pues precisamente formando parte del contenido de este. Es decir, según redactas un artículo desde el editor, pues añades dónde quieras el código de Adsense. Si no te funciona, pásalo antes por un conversor de código HTML a texto plano, que no recuerdo si era necesario.

      Eliminar
  12. Hola Oloman:
    Veo que en tus post y debajo de tus botones sociales
    se muestran tus entradas relacionadas pero al parecer
    se tratan de avisos adsense.Incluso dice "Powered by Google"
    Por favor Oloman,¿Como se hace eso?
    Gracias anticipadas por compartir tus conocimientos.

    ResponderEliminar
    Respuestas
    1. Hola. Pues son como dices un gadget de Adsense (que no anuncios). El código es personalizado para cada uno y lo consigues accediendo a Adsense y buscando bloques de "Contenido relacionado". Creo recordar que se llama así.

      Eliminar
  13. hola que tendria que ponerle al codigo para que me aparezca al final de la entrada un banner ? quiero poner al final de una entrada no al principio+

    ResponderEliminar
  14. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Para ponerlo al final de una entrada no te hace falta JavaScript. Simplemente edita la plantilla e inserta el código en cualquier parte del post-footer que te interese. Eso sí, si es de Adsense, el código tendrás que pasarlo previamente a texto plano.

      Y a continuación otro sistema: http://www.oloblogger.com/2008/02/adsense-dentro-de-un-post.html

      Eliminar
  15. Hola Oloman, excelente tutorial, ya lo agregué a mi blog. Deseo colocarlo centrado en la entrada al anuncio, pero no logro cambiarlo. Podrías orientarme? gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Como cosa rápida, aunque no es muy ortodoxo, mete el código del anuncio entre las etiquetas <center> y </center>

      Eliminar
    2. gracias por responder. Coloco estas etiquetas y no veo el cambio... será que no lo hago donde corresponde? las puse justo antes y después del anuncio.

      Eliminar
    3. Perdón. Como voy muy rápido contestando de un post a otro, no sabía ni en qué post me encontraba y no leí bien lo que escribiste.

      Lo que tienes que cambiar es el código CSS. En lugar de este:
      <style>
      #adsense1 {
      display: none;
      float: left;
      width: 300px;
      height: 250px;
      margin: 0 20px 10px 0 ;
      overflow: hidden;
      background: #ccc;
      }
      </style>

      ...prueba con este otro:
      <style>
      #adsense1 {
      display: none;
      width: 100%;
      text-align: center;
      margin: 10px auto;
      overflow: hidden;
      background: transparent;
      }
      </style>

      Eliminar
    4. ahora sí se han centrado. Muchas gracias por tu ayuda, Oloman. Saludos.

      Eliminar
  16. Hola Oloman, tengo un problema como el de Pat MV que yo quiero centrarlo y no funciona. Otro problema que tengo es que el anuncio aparece incompleto, es decir, el titulo del anuncio aparece la mitad y debajo aparece cuadro gris. En movil funciona muy bien pero en escritorio tengo ese problema.

    ResponderEliminar
    Respuestas
    1. Como tu blog está actualmente eliminado, supongo que el problema se eliminó también :D

      Eliminar
    2. Oloman yo quiero que anuncio aparezca donde yo quiera, es decir sin programar en cual parrafo ponerlo, porque mira, con el código de arriba uno le pone 1 o dos o tres pero yo quiero como poner algo estilo <-- texto --> dentro del post y asi hacer que aparezca el anuncio donde yo quiera. Como lo puedo hacer?

      Eliminar
    3. Eso no lo tengo explicado en ningún artículo y aquí sería imposible hacerlo, así que te remito a un post de otro dónde podrás ver cómo se hace.

      Eliminar