Pagina para banners de afiliación

Pagina para banners de afiliación para blogger Pagina para banners de afiliación para blogger

Una de los métodos que tenemos para aumentar rápidamente las visitas en nuestros blogs, es creando enlaces de afiliación mediante banners hacia otros blogs de igual o similar temática, con lo cual conseguimos ese "empujón" inicial necesario para darnos a conocer.


El dia de hoy vamos a aprender a crear una buena pagina de afiliacion, ya que si un blog esta dispuesto a enlazarnos, lo mas conveniente sería facilitarle el trabajo. Por ello la página de afiliación que instalaremos permite copiar todo el código con tan solo un clic.


Instalar

En Blogger vamos a ir a la pestaña "Páginas" y presionamos el botón "Nueva página". En Wordpress vamos al panel de administración, a la sección "Paginas" y seleccionamos "Añadir nueva página". Tanto en Blogger como en wordpress cambiamos el editor a modo HTML y pegamos el siguiente codigo:


<p>Bienvenido a nuestra página de afiliación. Para empezar <strong>elige un banner dando clic para copiar el código</strong> y agregalo a tu blog mediante un <strong>Gadget HTML/Javascript</strong> (Blogger o Wordpress). Regresa a esta pagina y comenta la <strong>url del blog</strong> en donde nos enlazaste y la <strong>url de tu Banner</strong>.</p><br>

<style>.reset{background:0 0;padding:0;margin:0;border:0;outline:0;box-shadow:0 0 transparent;font:inherit}.banners button{cursor:pointer;display: inline-block;}.banners button:not(:last-child){margin-right:.5rem}</style>

<h3>Banner 80x80</h3>
<div class='banners'>

   <!-- Repetir este código para mas banners -->
   <button class="reset" data-clipboard-text="&lt;a href='https://tublog.com' target='_blank' rel='nofollow'&gt;&lt;img alt='80x80' src='https://i.imgur.com/8dTbS0L.jpg'/&gt;&lt;/a&gt;">
      <img src='https://i.imgur.com/8dTbS0L.jpg'/>
   </button>
   <!-- fin banner 80x80 -->

</div><br>

<h3>Banner 125x125</h3>
<div class='banners'>

   <!-- Repetir este código para mas banners -->
   <button class="reset" data-clipboard-text="&lt;a href='https://tublog.com' target='_blank' rel='nofollow'&gt;&lt;img alt='125x125' src='https://i.imgur.com/rHcY6NI.jpg'/&gt;&lt;/a&gt;">
      <img src='https://i.imgur.com/rHcY6NI.jpg'/>
   </button>
   <!-- fin banner 125x125 -->

</div><br>

<h3>Banner 180x90</h3>
<div class='banners'>

   <!-- Repetir este código para mas banners -->
   <button class="reset" data-clipboard-text="&lt;a href='https://tublog.com' target='_blank' rel='nofollow'&gt;&lt;img alt='180x90' src='https://i.imgur.com/CwzURNY.jpg'/&gt;&lt;/a&gt;">
      <img src='https://i.imgur.com/CwzURNY.jpg'/>
   </button>
   <!-- fin banner 180x90 -->

</div><br>

<h3>Banner 250x250</h3>
<div class='banners'>

   <!-- Repetir este código para mas banners -->
   <button class="reset" data-clipboard-text="&lt;a href='https://tublog.com' target='_blank' rel='nofollow'&gt;&lt;img alt='250x250' src='https://i.imgur.com/qcib9SV.jpg'/&gt;&lt;/a&gt;">
      <img src='https://i.imgur.com/qcib9SV.jpg'/>
   </button>
   <!-- fin banner 250x250 -->

</div><br>

<h3>Banner 728x90</h3>
<div class='banners'>

   <!-- Repetir este código para mas banners -->
   <button class="reset" data-clipboard-text="&lt;a href='https://tublog.com' target='_blank' rel='nofollow'&gt;&lt;img alt='728x90' src='https://i.imgur.com/4KQHCBW.jpg'/&gt;&lt;/a&gt;">
      <img src='https://i.imgur.com/4KQHCBW.jpg'/>
   </button>
   <!-- fin banner 728x90 -->

</div><br>

<script src='//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js'></script>
<script>var btns=document.querySelectorAll("button"),clipboard=new Clipboard(btns);clipboard.on("success",function(){alert("Código copiado!")}),clipboard.on("error",function(){alert("Oops, ocurrió un error x_x")});</script>

Guardamos los cambios y listo, la página de afiliación ya está instalada. Dependiendo del formato de tus artículos tendrá un aspecto u otro, sin embargo en todas las posibles variantes serán similares. Este sería el ejemplo (da un clic sobre el banner para copiar el código):


Pagina de afiliación

Bienvenido a nuestra página de afiliación. Para empezar elige un banner dando clic para copiar el código y agregalo a tu blog mediante un Gadget HTML/Javascript (Blogger o Wordpress). Regresa a esta pagina y comenta la url del blog en donde nos enlazaste y la url de tu Banner.


Banner 80x80


Banner 125x125


Banner 180x90


Banner 250x250


Banner 728x90


Modificar los banners

Evidentemente aún tenemos que cambiar la url de los banners de ejemplo y el enlace la página de ejemplo. El código de cada banner tiene un aspecto similar a este:


<!-- Repetir este código para mas banners -->
<button class="reset" data-clipboard-text="&lt;a href='https://tublog.com' target='_blank' rel='nofollow'&gt;&lt;img alt='125x125' src='https://i.imgur.com/rHcY6NI.jpg'/&gt;&lt;/a&gt;">
   <img src='https://i.imgur.com/rHcY6NI.jpg'/>
</button>
<!-- fin banner 125x125 -->

Necesitamos modificar el banner https://i.imgur.com/rHcY6NI.jpg, este enlace se encuentra 2 veces ya que una pertenece al banner de ejemplo, y el otro al código que copia el usuario al dar clic. Recomiendo subir los banners a imgur.


El otro vinculo a modificar es https://tublog.com, solo se encuentra una vez y corresponde a la dirección de sus respectivos blogs.


Duplicar banners

Por defecto, el código crea una pagina con un banner de cada tamaño, sin embargo si tienes versiones alternativas a ese mismo banner, lo único que debes hacer es duplicar el código encerrado entre comentarios:


<!-- Repetir este código para mas banners -->
{{Mi Banner}}
<!-- fin banner 125x125 -->

Puedes duplicarlo tantas veces como sea necesario. Asi mismo tambien puedes agregar tamaños nuevos duplicando una sección completa y cambiando los datos, el codigo a duplicar seria el siguiente:


<h3>Banner 80x80</h3>
<div class='banners'>

   <!-- Repetir este código para mas banners -->
   <button class="reset" data-clipboard-text="&lt;a href='https://tublog.com' target='_blank' rel='nofollow'&gt;&lt;img alt='80x80' src='https://i.imgur.com/8dTbS0L.jpg'/&gt;&lt;/a&gt;">
      <img src='https://i.imgur.com/8dTbS0L.jpg'/>
   </button>
   <!-- fin banner 80x80 -->

</div><br>

Puedes modificar completamente la pagina, como si de una de las tuyas se tratara, agregar mas imagenes de presentacion, cambiar el texto, agregar más información, etc. Lo unico que debes mantener son las etiquetas <button/> y las modificaciones deben ser en modo HTML.


Eso ha sido todo de momento, Si tienes alguna duda por favor déjala en los comentarios. Si te ha servido no olvides compartir, ayudaras a mas personas y me ayudaria mucho tambien. Gracias por pasar.

Quizás te interese