Código para que nos enlacen con JQuery

Esta es una forma novedosa e interesante de Agregar un elemento para que nos enlacen con un click Gem@ . Requiere el uso de la librería JQuery y fue publicado por CSS Tricks

Si no la usamos, incorporamos la librería desde el mismo Google, poniendo esto antes de </head>:

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>

O bien así:;

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

El resultado, será un formulario con opciones donde los visitantes podrán seleccionar entre diferentes banners:

La función que debemos agregar a la plantilla es muy simple:

<script type='text/javascript'>
//<![CDATA[
$(function() {
  $("#listaBanners").change(function() {
    var graphicFileName = $("#listaBanners option:selected").attr("rel");
    var newCode = '<a href="http://miBlog.blogspot.com/"><img src="' + graphicFileName + '" title="Agregar banner" alt="Agregar banner" /></a>';
    $("#codigoBanner").text(newCode);
    $("#ejemploBanner").html(newCode);
  });
});
//]]>
</script>

donde:

listaBanners será el ID de la etiqueta donde listaremos nuestros banners
codigoBanner será el ID de la etiqueta donde se postrará el códiogo a copiar y pegar
ejemploBanner será el ID de la etiqueta donde mostraremos esos banners a medida que se van seleccionando

En esa función, sólo debemos cambiar la URL por la de nuestro sitio y agregar los textos en alt y title.

El código HTML lo agregaremos en donde querramos mostrarlo, por ejemplo, en un elemento HTML de la sidebar:

<form action="#" id="misBanners">
  <div>
    <span>Tamaño:</span>
    <select name="listaBanners" id="listaBanners">
      <option selected="selected" rel="URL_imagen_1">texto a mostrar</option>
      <option rel="URL_imagen_2">texto a mostrar</option>
      <option rel="URL_imagen_3">texto a mostrar</option>
      <!-- seguimos agregando todas las imágenes que se nos de la gana -->
    </select>
  </div>
  <div>
    <span>Código:</span>
    <textarea rows="10" cols="25" id="codigoBanner">&lt;a href="http://miBlog.blogspot.com/"&gt;&lt;img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /&gt;&lt;/a&gt;</textarea>
    <p>Copie y pegue el código en su sitio.</p>
  </div>
</form>
<div id="ejemploBanner">
  <a href="http://miSitio.blogspot.com/"><img src="URL_imagen_1" titlr="nuestro texto" alt="nuestro texto" /></a>
</div>

La personalización es sencilla y estas son las definiciones elementales:

<style type='text/css'>
  #misBanners div { /* definimos el ancho del formulario y lo centramos */
    margin: 0 auto 10px auto;
    width: 250px;
  }
  #misBanners span {
    /* los texto Tamaño y Código */
  }
  #misBanners select { /* la etiqueta SELECT */
    border: 2px solid #BCD;
    padding: 2px 2px 2px 6px;
    width: 125px;
  }
  #misBanners option { /* la etiqueta SELECT */
    padding: 0 10px;
  }
  #misBanners textarea { /* la etiqueta TEXTAREA */
    border: 2px solid #BCD;
    height: 75px;
    padding: 5px;
    width: 236px;
  }
  #misBanners p {
    /* el texto Copie y pegue ... */
  }
  #ejemploBanner { /* el DIV donde se mostrarán los ejemplos */
    border: 2px solid #567;
    margin:0 auto;
    padding: 5px 5px 0;
    text-align: center;
    width: 236px; /* ancho menos bordes */
  }
</style>