JMiur [E]

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>

6 comentarios:

UFE-Activo  

Simplemente Genial
Tremenda idea Amigo esta Super se le agradece

Responder
Jaime Trujillo Escobedo  

Hola JMiur! antes que nada quería felicitarte por esta entrada, resulta espectacular (un brillantísimo descubrimiento).

Bueno, quería pedirte una cosilla.

¿Podrías decirme como puedo poner la fuente de texto idéntica a la de los artículos de Wikipedia?

Probé usando las propiedades que dicho sitio web utiliza:

body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-x-system-font:none;
background:#F9F9F9 url(headbg.jpg) no-repeat scroll 0 0;
color:black;
font-family:sans-serif;
font-size:x-small;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0;
padding:0;
}

Pero no me queda igual... la letra aparece muy pequeña :S.

Desde ya, Muchísimas Gracias!

y... ¡¡Feliz Navidad!! :P.

Responder
JMiur  

UFE-Activo: Me alegro que te resulte interesante. Es verdad, es una buena idea :)

Jaime: Ahí, en ese código, sólo hay dos valores definidos:

font-family:sans-serif;
font-size:x-small;

Todo lo demas es "normal", es decir, no hay variaciones respecto a la fuente por defecto del navegador. Eso que muestras es algo que te dice Firebug. El CSS real sólo dice esto:

font: x-small sans-serif;

El valor x-small es equivalente a 10px pero si lo ves my pequeño, simplemente auméntalo; por ejemplo, 13px mostraría un tamaño similar a las entradas de la wikipedia:

font: 13px sans-serif;

Responder
Jaime Trujillo Escobedo  

Muchas gracias por tu ayuda JMiur, lo entendí a la perfección ;).

Saludos!

Responder
Gem@  

Ni recordaba ya esa entrada que mencionas, me gusta esa opción de varios banners en uno :)

Responder
JMiur  

Me alegro, Jaime.

En un rato viene la misma opción pero sin JQuery, Gem@

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR