Ir al contenido principal

Así de fácil es poner anuncios bajo el título de todas las entradas del blog (o cualquier otra parte)

Poner anuncios, ya sean de Adsense, Smowtion, Bidvertiser, etc es bastante sencillo, pero cuando queremos que estos aparezcan en el el cuerpo de todas las entradas, por ejemplo bajo el título o al final de estas, y de un solo paso, sin tener que editar una por una, puede no serlo tanto como parecía...


Colocar esta publicidad, anuncios o banners -realmente da igual el formato, puede tratarse de enlaces, vídeos, etc- es tan sencillo como copiar el código de nuestro anuncio en alguna parte del código de nuestro blog e intentar "invocarlo" para no tener código repetido en nuestro sitio.

ESENCIAL PARA ADSENSE Y OTROS

Además en el caso concreto de Adsense no se puede copiar el código del anuncio directamente en la entrada ya que no se mostrará. Con el resto de anuncios tales como los de Smowtion y Bidvertiser sí es posible copiar el código directamente en las entradas pero sin este método tendríamos que copiar en cada una de las entradas el código del anuncio, lo que podría ser una tarea demasiado tediosa..

PORQUE USAR ESTE MÉTODO

El método que os voy a explicar tiene varios beneficios:
  1. Es muy rápido de implementar y afecta a todas las entradas publicadas y por publicar.
  2. Funciona con todos los tipos de anuncio tipo banner y bloques de enlaces.
  3. No viola ninguna norma ya que no se modifica el código de los anuncios (aunque sí tenemos que parsear los de Adsense para que los reconozca la plantilla de blogger).
  4. Se puede modificar el anuncio o su tipo de en un solo paso afectando a todas las entradas solo con reemplazarlo en la plantilla.
  5. Se puedo configurar. Con una etiqueta podremos modificar la ubicación del anuncio en el texto y podemos colocarlos centrados, a izquierda o derecha modificando el código original.
  6. Podemos hacer que los anuncios aparezcan siempre o solo en las páginas de las entradas individuales.

El código está compuesto por un script y una opcional y simple etiqueta. Esta etiqueta la usaremos dentro de la entrada y en el lugar en que queramos que aparezca el anuncio para que sea sustituida por el código. Si no ponemos la etiqueta los anuncios se muestran por defecto debajo del título de la entrada.

CÓMO EMPEZAR 

Entra en tu blog y ve a "Diseño", seguido de "Edición de HTML", despliega los artilugios y busca esta etiqueta en el código fuente de tu plantilla:  <data:post.body/> (usa control + F para encontrarlo más rápido)Ahora reemplazalo totalmente por el siguiente código:

  • Antes de copiar el código de Adsense o tu compañia elegida para ubicar en las entradas debes tener una cosa muy en cuenta. Debes parsear el código para que la plantilla de Blogger te la acepte; es XML y el código de Adsense es HTML así que te daría un error. Te quedarán unos símbolos muy extraños (tales como esto "quot;&gt") pero no te preocupes, funcionará bien.

<!-- sustituye a <data:post.body/> anuncios en las entradas --> 
<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
Aquí debes pegar el código de los anuncios
</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- anuncio --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
<!-- sustituye a <data:post.body/> anuncios en las entradas -->

Ahora solo te falta copiar el código de tus anuncios en donde se indica en rojo. Cuando quieras puedes cambiar de compañía y automáticamente se actualizará en todas tus páginas. Maravilloso, ¿no? Espera...

UN PEQUEÑO DILEMA

Debéis tener en cuenta que cuando colocamos anuncios en las entradas ocurre algo que no muchos se esperan; En la página principal -y cuando se muestran varias páginas- solo se muestran anuncios en las primeras entradas -debido al límite de anuncios por página-, en las demás entradas simplemente desaparece dejando un hueco vacío.

Esto modifica la apariencia del blog de un modo que a veces no se desea, pero hay varias soluciones:
  • Añadir un código extra para que solo se muestren anuncios en las páginas de entradas individuales. Si quieres que sólo sean visibles en las páginas individuales de cada un de ellas debes colocar tu código del anuncio entre las siguiente etiquetas:
    • <b:if cond='data:blog.pageType == &quot;item&quot;'> Aquí es en donde debes copiar el código del anuncio </b:if>
  • Reducir el número de entradas en la página principal para no exceder el número de anuncios (en el caso de Smowtion son 5 banners) para que el nº de entradas no sea mayor que el límite de anuncios. De este modo los anuncios se verán en las entradas de la portada y también de cada página individual.

Dependiendo del tipo de anuncio y sobre todo de su tamaño te convendrá más una opción que otra.


UNA ETIQUETA PARA INVOCAR ANUNCIOS


Además, ahora, cuando estés escribiendo una entrada y en el momento que desees que aparezca un anuncio, coloca la siguiente etiqueta dentro de la entrada:  <!-- anuncio --> En el lugar que la coloques -al principio, después el primer párrafo, del segundo, etc- aparecerá el anuncio cuyo código copiaste en tu plantilla.

Un ejemplo sería este:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis eleifend est a ultrices. Vestibulum consectetur eleifend feugiat.
<!-- anuncio -->
Curabitur mattis interdum faucibus. Nullam pellentesque magna in sapien mollis varius luctus quam egestas. Morbi sem lectus, condimentum eget rhoncus quis, dapibus vitae mi.

Si no se usa la etiqueta, los anuncios se muestran por defecto bajo el título. Notaréis que el resto de imágenes, texto y demás elementos que tengamos en nuestra entrada quedan justo por debajo del anuncio. En algunos casos interesaría que el texto quedase al lado del anuncio o que el anuncio se mostrase a la izquierda y no por debajo.

TIENES MÁS OPCIONES

Si por ejemplo deseas que el anuncio quede integrado como una imagen, entre el texto de la entrada, busca este fragmento que tienes más arriba en el código de la plantilla de tu blog:

<div style="clear:both; margin:10px 0"> y sustitúyelo por es este otro: <div style="clear: left; float: left; margin:10px 0">. Aquí tienes más información sobre las posiciones flotantes de estos elementos.


Notas y consejos:

  • Nota: Si os encontráis con varias etiquetas <data:post.body/>, usad la primera.
  • Nota: Creo que no se puede hacer con diferentes anuncios y usando diferentes etiquetas, si alguien es capaz, por favor, que avise.
  • Consejo: Es recomendable hacer una copia de seguridad de tu plantilla.
  • Consejo: Si estáis probando usad el botón de vista previa mejor que guardar.

Puedes seguir sacando el máximo partido a los banners con esta pequeña guía. Recordad que podéis hacerlo con cualquier campaña de publicidad que uséis.


¿Qué tal os ha parecido interesante? ¿Lo habéis usado, os ha dado algún problema o por el contrario ya habéis notado el aumento en los clicks?

Entradas populares de este blog

Optimiza las ganancias de acortadores al máximo fácil con Lanza.me

Seguro que ya conoces  Lanza.me ; el primer acortador y metaacortador que te permite cambiar todos tus enlaces en pocos segundos a los acortadores que quieras, evitando con ellos problemas con los principales acortadores que pagan . Estoy seguro de que también conoces Shorteners.net ; el primer comparador de tasas y otras características de acortadores de acortadores que pagan y que te ofrece las tasas de estos siempre actualizadas, valoraciones y más. Ha llegado el momento de unir ambos sitios para una obtención de datos práctica y automática. Lanza.me + Shorteners.net: La unión perfecta Así es. Lanza.me y Shorteners.net ya tienen una conexión conjunta. Con ella, Lanza.me puede conocer las tasas de los acortadores y con ello, decirte cuál es el acortador que más te conviene para las visitas que recibas. Y no me estoy refiriendo al recomendador de acortadores integrado en Lanza.me , que te anuncia cuales son los acortadores que no estás empleando y que tienen

Compatible con Youtube, Lanza.me trae otras muchas mejoras

Lanza.me es es un acortador y metaacortador con funcionalidades únicas. Una de ellas es la de mostrar páginas externas de nuestra preferencia, así como acortar nuestros enlaces con los principales acortadores de enlaces. Hubo novedades, y en esta entrada te las presento. Si quieres saber más acerca de Lanza.me visita esta sección del blog . Vídeos de Youtube como páginas intermedias Desde la madrugada del 24 de febrero Lanza.me es compatible con Youtube. Cuando inserten la URL de un vídeo de youtube como una página externa, el acortador lo detectará y lo mostrará ocupando todo el ancho de la pantalla cuando los usuarios visiten el enlace. Los usuarios VIP pueden configurar estas páginas para que reproduzcan el vídeo automáticamente, con lo que conseguirán más visitas. Más datos añadidos y un repaso a las estadísticas Hace tiempo comenté que otra vez había habido cambios en las estadísticas. Miraremos más por encima esas estadísticas porque tienen algunas opciones que sería inte

Multiplica tus ingresos con el encadenador de acortadores de Lanza.me

Lanza.me es el acortador y metaacortador que he estado desarrollando durante los últimos 4 años. Con él puedes usar otros acortadores para acortar tus enlaces y cambiarlos fácilmente y en muy pocos segundos. También permite usar páginas externas para mostrar en tus enlaces cortos o simplemente usar enlaces directos.  Ya es muy estable y está lleno de opciones, como estadísticas a nivel de usuario y enlace, optimización de acortadores, alertas dinámicas y reactivas de acortadores caídos o en problemas,  listas públicas de enlaces , programa de referidos, etc. Hoy te traigo una nueva característica. Encadenador: Multiplica tus ingresos sin esfuerzo ni riesgo Este lunes 5 de julio de 2021 se ha lanzado el encadenador de acortadores. Se trata de una nueva característica, única de Lanza.me, con la que podrás conseguir duplicar tus ingresos sin esfuerzo ni riesgo. Cómo funciona el encadenador El encadenador de acortadores usa varios acortadores a la vez sobre un mismo enlace; Los visitantes