Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Pictobrowser. Galería y slider.

26/02/2010
Alguna que otra vez me habeis preguntado por algún slider majo para mostrar vuestras imágenes. Este lo es y además se puede incorporar al blog como gadget, por lo que no requiere mucha historia ni por supuesto, tocar la plantilla. Eso sí, sólo carga imágenes desde Flickr o Picasa, pero esto es precisamente lo que lo hace muy cómodo de configurar.

Podemos ir navegando por las imágenes pinchando en las propias imágenes, en sus miniaturas o de manera automática mediante el botón slide-show. Al final de este post teneis un ejemplo.

Se llama PictoBrowser y la primera pantalla que os aparece (la que se reproduce a la derecha) es dónde se selecciona si vamos a utilizar imágenes de Flickr o Picasa. Seleccionamos la que corresponda e introducimos nuestro usuario en el correspondiente servicio. A tener en cuenta: las imágenes deben ser públicas para que se muestren.

Una cosa interesante es que podemos mostrar galerías "ajenas", porque podemos usar el nick de cualquier usuario. En este caso, lo único que hay que tener presente es que no tendremos el control de esas imágenes y si el usuario las borra o simplemente las hace privadas, la galería no funcionará.

Si usamos Flickr, podremos escoger entre mostrar un set completo (albúm), las imágenes de determinada etiqueta (tag) o el contenido de un grupo. Sin embargo, si utilizamos Picasa, sólo podremos elegir entre las dos primeras opciones al no disponer este servicio de la utilidad de grupos. Os recordamos que todas las imágenes que subís a un blog Blogger, van a parar a un album Picasa automáticamente.

En el tercer paso es dónde escogemos tamaño de las imágenes, del visor, alineación, color de fondo, transparencia, mostrar o no títulos,... y unos cuantos parámetros más. Aquí hay algunos ejemplos de los resultados que se obtendrán en función de los parámetros de configuración que escojamos y debajo de este párrafo una galería totalmente operativa. Prueba la reproducción automática.

Get the flash player here: http://www.adobe.com/flashplayer


Un buen servicio a cambio sólo del enlace que incorpora el script.

Actualización: Una prueba con imágenes de Flickr seleccionadas por etiqueta.

Get the flash player here: http://www.adobe.com/flashplayer


Entradas que te pueden interesar

24/02/2010
El título se explica sólo ¿no?

  • Vocabulario básico de Twitter. TodoTwitter.
  • Insertar un foro en Blogger. Pizcos Blog.
  • Incluir iconos para redes sociales. Gem@ Blog.
  • Añadir un texto al pie de las imágenes desde el editor Blogger. El Escaparate.
  • Solución a la "invisibilidad" de la lista de Seguidores. Ciudad Blogger.
  • Efectos para oscurecer e iluminar las ventanas. Vagabundia.





Aviso de carga sólo con CSS.

22/02/2010
Las cosas casi siempre se pueden simplificar y esto es precisamente lo que ha hecho José GDF, con el script de aviso para la carga de una página. Nos lo hizo saber a través de este comentario.

Image Hosted by ImageShack.usImage Hosted by ImageShack.usImage Hosted by ImageShack.usImage Hosted by ImageShack.us


La idea es más o menos la misma que se comentó en su momento, pero ahora sólo utilizaremos CSS. Cómo el código se va cargando por el orden en que está escrito, lo que haremos en esta ocasión será cargar primero de todo una capa con el aviso y justo al final del código (cuando se haya cargado todo), la hacemos invisible.

Para ello, justo después de <body> insertaremos el código de la capa:

<!-- DIV AVISO -->
<div id='aviso' style='text-align:center;margin:0px auto;position:absolute;left:20px;top:80px;width:136px;background-color:#eeeeee;border:1px #000000 solid;padding:5px;'>
<img style='display:block;margin:0px auto;' src='http://img38.imageshack.us/img38/8775/ajaxloader2h.gif'/>
<span style='font-family:Verdana;font-size:10px;font-weight:bold;color:#990000;'>Cargando datos.</span>
</div>

Este es sólo un ejemplo y vuestra creatividad es la que decidirá qué poner dentro del DIV. Lo único imprescindible es que tenga un ID (en el ejemplo aviso) y que lo recordemos, porque es el que necesitaremos a continuación.

Como decíamos, ahora al final del código colocamos estilo CSS para para que el anterior ID se vuelva no-visible. Por tanto, justo antes de </body>, tenemos que insertar:

<style type='text/css'>
#aviso {
visibility:hidden;
display:none;
}
</style>


Y eso es todo. Gracias José GDF.

Bonus: Ajaxload. Una aplicación online para diseñar tus propios iconos animados de carga.

Actualización: Loader Generator. Otra aplicación para crear cargadores que en este caso nos chiva Rodry D.


Buscador emergente Lijit

19/02/2010
Navegando por ahí lo ví en funcionamiento y enseguida pinché en el logo para añadir la dirección a mis marcadores y poderlo ver después con más tranquilidad. Ahora, tras probarlo, todavía me ha gustado más.

Lijit es un gadget para montar un buscador en nuestra web ¿Eso es todo? Sí y no. Es un buscador interno pero tiene un buen puñado de servicios añadidos que para mí lo pueden hacer más interesante que otras barras de búsqueda. Para general tranquilidad, el motor que lleva es el de Google, por lo que los resultados serán tan buenos como con este conocido buscador.

El registro es necesario, pero antes de hacerlo puedes teclear tu dirección y ya aparece la primera utilidad. El artilugio no sólo busca en nuestra web, sino que también nos permite seleccionar en qué servicios más queremos que lo haga de entre muchos de los más conocidos: Delicious, Flickr, YouTube, MySpace, Twitter... En algunos de ellos tendremos que dar datos adicionales para tener unos resultados correctos (p.ej. en Twitter, el nombre de usuario). Al final de la página puedes incluso introducir manualmente cualquier dirección o fuente (RSS) en la que también te interese buscar.

Si seguimos con el proceso de alta, vemos que el sistema detecta automáticamente los enlaces de nuestro blogroll y también los incluye. Navegando por las pestañas que hay en esa parte, veremos que se hace lo mismo con Twitter, otros blogs (se pueden añadir más) y con otros usuarios Lijit. Todos son optativos por lo que podemos desmarcarlos si no es eso lo que nos interesa.

Si no lo habíamos hecho, por este paso más o menos, ya nos solicitan registrarnos para poder continuar. Podemos personalizar un poco el gadget añadiendo una imagen de nuestra elección y con Manage Your Wijits entramos en el terreno de configurar tanto el gadget como el cuadro de resultados de búsqueda. Colores, tamaños, cacharritos adicionales, mostrar los resultados en un post o en una ventana modal... Con Make mine an all-in-one Wijit!, podemos añadir al gadget un par de pestañas que llevan respectivamente a un listado de nuestros visitantes recientes y a un mapa de su ubicación

Una vez en marcha y desde el panel de control de Lijit, también teneis acceso a diversas estadísticas sobre la búsqueda en vuestro blog y por supuesto, a otras pestañas dónde podeis modificar el gadget.

Lo que más me ha gustado ha sido la posibilidad de incluir diversas direcciones en la búsqueda "interna", ver los resultados en una ventana modal y la inclusión de dos gadgets más, que si los tenemos actualmente nos permitirá mostrarlos en menos espacio.


Otra pantalla de presentación fácil

17/02/2010
Siempre, o casi siempre, hay diversas maneras de conseguir hacer lo que queremos, siguiendo distintos caminos. Unos comentarios cruzados con Cocodrolo, me dieron la idea de una nueva chapucilla para simular una pantalla de presentación como la que habeis visto al entrar al blog o al hacerlo en esta misma entrada (depende de la fecha en la que leais esto).

Antes vimos otros sistemas en Blog con pantalla de presentación y Portada en página Inicio. Esta sería la versíón light y se consigue combinando pequeños trucos ya vistos.

Este enlace es por si no han pasado todavía 96 192 horas (lo que hemos programado aquí) desde la primera vez que viste esto, pero quieres volver a hacer visible la entradilla.


Básicamente, vamos a usar el código de Mostrar un DIV sólo una vez al día, pero haciendo el DIV del tamaño completo de la ventana del visitante y quitando la -ahora- innecesaria capa semitransparente. Me ahorraré la explicación que ya figura en el anterior enlace.

Antes del </head>, insertamos...

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>
<script type='text/javascript'>
function plegardesplegar(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == 'visible'){
menu.className = 'invisible';
}else{
menu.className = 'visible';
}
}
</script>

...y tras <body>, esto otro...

<div class='visible' id='id_bloque' style='z-index:100;position:fixed; overflow:visible; width:100%; height:100%; color:#000000; background:url(http://3.bp.blogspot.com/_0eC4K-qZ7AM/S3WCMAxXd8I/AAAAAAAALHU/K9YI68rhMDQ/s00/fondo.jpg) no-repeat 50% 50% #F4F8F9; padding:20px; text-align:center;'>

<div style='width:600px;height:400px;position:absolute;top:50%;left:50%;margin-top:-220px;margin-left:-300px;font-family:courier new;font-size:20px;line-height:20px;'>
Aquí ponemos poner una imagen, enlaces, texto, un menú, un vídeo, una lista, un flash... en fin, lo que sea. Pero lo que no puede faltar es un enlace que nos lleve a alguna página o al menos, que cierre el DIV solapado por encima del contenido.
<a href='javascript:plegardesplegar(&quot;id_bloque&quot;);'>ENLACE PARA CERRAR EL DIV</a>
<a href='http://oloblogger.blogspot.com'>ENLACE A UNA PAGINA</a>
<br/>
<span style='font-size:10px;'>Imagen de fondo: <a href='http://www.flickr.com/photos/wheatfields/'>net_efekt</a></span>
</div>

</div>

Personalizamos el contenido del DIV, el fondo y los enlaces, y con esto ya tenemos nuestra pantalla inicial, que se mostrará cada vez que se acceda a una página del blog.

Y lo marcado en negrita es el origen de un problema. Imaginaos navegando por una web en la que cada vez que cambiamos de página, nos sale la presentación de las narices. Si por las características de nuestro sitio, esto es justo lo que queremos, pues ya hemos acabado, pero si no es eso, tendremos que añadir algo más de código.

1. Supongamos que sólo lo queremos mostrar cuando se accede a la página principal y no cuando se hace a través de otras páginas. En ese caso, el segundo trozo de código habrá que meterlo dentro de un condicional, que para Blogger sería:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
CODIGO QUE FORMA LOS DIV's
</b:if>

2. Sin embargo, puede que lo que queramos es que salga esa entradilla independientemente del tipo de página desde la que el visitante empieza a visitar el blog, pero sin ser tan cansinos. En ese caso, sólo se me ocurre volver a las cookies.

Como ya se explicó en una entrada anterior, para esto tendríamos que montar las funciones para grabar y leer cookies y a continuación, añadir detrás del código que forma los DIV's una comprobación sobre si es la primera vez que se visita el blog en cierto intervalo de tiempo.

<script type='text/javascript'>
var comprobar = getCookie(&quot;primeravez&quot;);
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + 86400000);
setCookie(&quot;primeravez&quot;,&quot;1&quot;,expiration);
plegardesplegar(&quot;id_bloque&quot;);
}
</script>


El número en verde marca el tiempo hasta el cual no se volverá a mostrar la "presentación". En el ejemplo, 24 horas en milisegundos.

Si se aplica esto de las cookies, hay que hacer un cambio más en el ejemplo que hemos puesto. El DIV cuya ID hemos marcado en azul con VISIBLE, debería cambiarse a INVISIBLE.

En Blogger, también podeis poner todo este código (primer script, creación de capas y script de cookies en su caso) dentro de un gadget HTML/JavaScript, con lo que se podría eliminar muy fácilmente el día que decidamos cambiar el sistema. Si lo hacemos así, tendríamos que colocarlo lo más arriba posible. Encima del HEADER si es posible. De lo contrario, se cargarían otras cosas primero y luego saldría la presentación, lo cual quedaría un poco raro.

Aunque se haga de esta última manera, en mi opinión, al menos las funciones de las cookies sí se deberían dejar en la plantilla. De esta manera las tendremos siempre disponibles para cualquier uso futuro.


Portada en página Inicio

15/02/2010
Hay diversas formas de conseguir que nuestra página de Inicio, se convierta en una especie de portada que se vea de manera similar a la página principal de una web convencional (una que no sea un blog). De entre ellos, aquí vamos a explicar uno sencillito y que requiere pocas modificaciones en la plantilla. Aquí un ejemplo simplón de lo que se puede conseguir.


Vamos a utilizar para ello, un par de condicionales ubicados en sitios estratégicos, de manera que cuando estemos en la página Inicio se vean ciertas cosas, pero no se muestren las entradas y cuando estemos en cualquier otro tipo de página, no se vea lo que coloquemos en la susodicha página Inicio y sí las entradas.

En primer lugar, vamos a quitar las entradas de nuestro Home. Para ello, con Expandir plantillas de artilugios seleccionado, insertamos una condición y su cierre correspondiente, para que el loop principal que crea las entradas no se ejecute cuando estemos allí:

<b:includable id='main' var='top'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
...
google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
function initialize() { google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
</b:if>
</b:includable>

Las dos líneas en verde son las nuevas. El resto son sólo una referencia para saber dónde hay que ponerlas. Con Vista Previa ya podeis ver el resultado.

Ahora, el contenido que queramos mostrar en Inicio, lo pondremos dentro de un gadget tipo HTML/JavaScript. Esto nos permitirá poner todo el código que queramos para incluir texto, imágenes, tablas, efectos rollover, un flash... o lo que sea. Aquí es dónde ya le teneis que echar imaginación, porque con este sistema, podeis poner prácticamente todo lo que querais. En el ejemplo sólo hemos puesto cuatro imágenes con enlace a las distintas categorías y un pequeño efecto rollover. Debajo un menú hecho con el gadget de etiquetas convertido en botones. Todo ello está redactado en HTML dentro de un widget como se ha dicho al principio este párrafo.

Según lo que queramos, el gadget lo podemos poner debajo de la cabecera o en el footer, para que ocupe todo el ancho del blog. Si lo ponemos debajo o encima del cuerpo de las entradas, ocupará sólo el hueco que ocupan las entradas normales (todo el ancho menos el que ocupa la/s barra/s lateral/es)

En la primera opción, si visualmente os estorba la barra lateral, habrá que utilizar un truquillo para que no se vea. Suponiendo que tuvierais una plantilla estándar Blogger, tendríais que colocar justo detrás de <body> las siguientes líneas:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>#sidebar-wrapper {display:none !important;}</style>
</b:if>

Si el ID del DIV que forma la barra lateral tuviera otro nombre, ese es el que tendríamos que poner en las nuevas líneas. Entre esos dos condicionales, podeis meter con la misma técnica (haciendo referencia al nombre del selector), todo aquello que no querais que se vea en la página de Inicio. Por ejemplo, se podría añadir un #header {display:none !important;}; Incluso se pueden alterar algunas propiedades (sólo para la página Inicio) que nos interese. Vg: #outer-wrapper {margin-top:20px !important; background: url("http://imagen.jpg") !important;}

De todas formas, si haceis esto, desde Elementos de Página no tendreis la opción de añadir gadgets, simplemente porque la barra lateral no se verá. Se conoce que para Blogger, estar en Diseño es como estar en Home. Siendo así las cosas, se recomienda dejar la barra lateral como esté y añadir todo el contenido de la portada en un gadget encima del cuerpo de las entradas, usando el truquillo sólo para lo imprescindible.

Ahora nos vamos a preocupar de que este gadget que forma la portada desaparezca cuando estamos en otro tipo de páginas distintas de la principal. Para ello, lo buscamos en nuestra plantila con Plantillas de Artilugios Expandidas. Lo más rápido y cómodo, es darle un título cuando lo creemos. Este título no se verá cuando terminemos porque vamos a eliminar su visualización desde la plantilla. Supongamos que le hemos llamado PORTADA; tendremos que buscar un widget con title='portada' y una vez localizado, insertamos/borramos las siguientes líneas:

<b:widget id='HTML1' locked='false' title='portada' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

En verde las líneas a insertar y tachadas las que hay que borrar.

Un pequeño detalle. Podeis eliminar el rótulo "Mostrando entradas con la etiqueta..." si borrais de vuestra plantilla la línea <b:include data='top' name='status-message'/>. El mismo resultado se consigue si en lugar de borrarla la encerrais entre símbolos de comentarios: <!-- CODIGO -->

Lo mejor de este sistema es que si alguna vez, más adelante, quereis deshacer todo esto, con quitar los dos condicionales y eliminar el gadget PORTADA, será suficiente.

Actualización: Otro ejemplo de un blog con portada... Poemaciones. Aunque no he mirado el sistema con el que se construyó, sirve para hacerse una idea de lo que se puede conseguir.


Fijar un elemento en horizontal. LEFT y RIGHT con 50%.

12/02/2010
Cuando usamos FIXED para mantener siempre visible un elemento aún haciendo scroll, tenemos que indicar una distancia al borde superior (o inferior) de la ventana y lo mismo con respecto al borde izquierdo (o derecho). Normalmente lo hacemos con valores absolutos (px, em...) y esto provoca que al hacer la ventana del navegador más grande o más pequeña, o simplemente con el uso de una pantalla con distinto ancho, el elemento no se muestre dónde queríamos en un principio.

Los que tengais la flecha Ir arriba construida de esta manera, podeis hacer una prueba cambiando el ancho de vuestra ventana. Este es el código tipo con el que ocurre esto y el siguiente es con el que se ha construido el DIV con fondo rojo que podeis ver arriba a la derecha. Con él también podeis comprobar lo que comentábamos antes:
Este DIV se "mueve a la izquierda según vayamos haciendo más pequeña la ventana de nuestro navegador, mientras que la flecha negra de abajo no.

<a href="#"><img src="URLdeTUimagen" title="Ir al principio" style="position: fixed; bottom: 10px; right: 10px;" /></a>

<div style="position: fixed; top: 10px; right: 200px;background:#990000;text-align:center;font-size:9px;color:#ffffff;width:150px;padding:10px;border:1px solid black;" >TEXTO&let;/div>


Con el primer código, la imagen estará SIEMPRE a 10px del borde derecho de la ventana y con el segundo, el DIV SIEMPRE estará a 200px. Con el TOP no tenemos este inconveniente porque el borde superior siempre está en el mismo sitio: arriba (perogrullada necesaria).

Para solucionar este desplazamiento horizontal, podemos utilizar un sencillo truco que consiste en cambiar la posición horizontal absoluta (LEFT, RIGHT), por un valor en porcentaje y, en concreto, por el valor 50%. Esto hace que el elemento se situe hacia la mitad de la página en cualquier resolución. Una vez allí, sólo tenemos que aplicar un margen a derecha o a izquierda, según el caso, y con ello conseguimos desplazarlo del centro hasta donde nos convenga. Tomar como referencia el centro es la clave para que no se nos "mueva" el DIV.

La flecha que ahora mismo hay en la parte inferior derecha está construida con este sistema. Quizás sea más fácil entender la diferencia, observando el comportamiento del DIV rojo y de la flecha, al ir estrechando poco a poco la ventana de vuestro navegador.

<a href="#"><img src="URLdeTUimagen" title="Ir al principio" style="position:fixed; bottom:0px; left:50%;margin-left:410px;" /></a>

Cosas a tener en cuenta...


En el gráfico podeis observar a modo de resumen el comportamiento de diversas combinaciones LEFT/RIGHT, MARGIN-LEFT/MARGIN-RIGHT.

Con LEFT:50% y sin margen, el vértice superior izquierdo del DIV se sitúa a partir de la mitad de la ventana. Sin embargo, el mismo caso con RIGHT:50% lo que hace es posicionar la esquina superior derecha en el centro.

En los cuadros claros de la segunda fila, utilizamos LEFT:50% con un MARGIN-LEFT:120PX y efectivamente, el intérprete nos deja ese margen por la izquierda, contando desde el centro. En este caso, un MARGIN-RIGHT no producirá ningún desplazamiento. Si partimos de un RIGHT:50%, el resultado será justo al contrario.

El cuadro claro que se encuentra en último lugar, refleja la posición que adoptaría un elemento posicionado con LEFT:50% y con un MARGIN-LEFT negativo. Este es un efecto bastante interesante para según qué cosas...


Mostrar un DIV sólo una vez al día.

10/02/2010
Basándonos en el script para generar/leer/borrar cookies que vimos anteriormente, ahora intentaremos que cualquier elemento de nuestra página metido en una capa concreta, no se vea constantemente, sino sólo con la periodicidad que nosotros determinemos.

En concreto, vamos a crear un cuadro que se solapará por encima de la página con un fondo oscuro semitransparente (ver Simular una ventana modal), que contendrá un aviso. Para no aburrir al personal mostrándolo contínuamente, se verá de manera individual PARA CADA VISITANTE, una sola vez cada 24 horas. En honor a la verdad, al tratarse de una cookie, el sistema discriminará realmente CADA ORDENADOR que se conecte a nuestra página.

En primer lugar hay que instalar las funciones que se citaron en Generar y recuperar cookies. Una vez hecho esto, ahora añadimos a continuación otro pequeño script que servirá para cerrar el cuadro emergente. Bueno, más bien para hacerlo visible o no-visible:

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>
<script type='text/javascript'>
function plegardesplegar(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == 'visible'){
menu.className = 'invisible';
}else{
menu.className = 'visible';
}
}
</script>

El funcionamiento es bien sencillo. Se envía una ID de determinada capa a la función, que recogemos con la variable identificacion. Si esta capa tiene la clase visible, la pasamos a invisible y viceversa. Dicho de otra forma, cada vez que lleguemos a la función, la capa cambiará su visibilidad (display:block, display:none). Esto lo usaremos adecuadamente después.

Ya tenemos los pasos previos para que todo funcione y ahora es cuando justo detrás de <body> colocaremos la capa y el código que comprobará si es la primera vez que el usuario ha estado en las últimas 24 horas. Si es así, la capa se verá. De lo contrario, no se verá:

<div class='invisible' id='idatenuar' style='z-index:99; position:fixed; top:0px; left:0px; overflow:visible; height:100%; width:100%; background:#000000; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8;'/>

<div class='invisible' id='idbloque' style=' z-index:100;position:fixed; overflow:visible; top:50%; left:50%; width:400px; height:300px; margin-top:-150px; margin-left:-200px; border:5px solid #990000; background:#ffffff; color:#000000; padding:20px; text-align:center;'>
Ya he leído este aviso y ahora quiero <a href='javascript:plegardesplegar(&quot;idatenuar&quot;);javascript:plegardesplegar(&quot;idbloque&quot;);'>ENTRAR</a>
</div>

<script type='text/javascript'>
var comprobar = getCookie(&quot;vezprimera&quot;);
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + 86400000);
setCookie(&quot;vezprimera&quot;,&quot;1&quot;,expiration);
plegardesplegar(&quot;idatenuar&quot;);
plegardesplegar(&quot;idbloque&quot;);
}
</script>

El primer DIV de este código, sólo es para construir una capa oscura semitransparente que ocupará el 100% del espacio disponible en el navegador, colocándose por encima de la página.

El segundo DIV crea otra capa por encima de la anterior (esto se hace con z-index) con un pequeño texto y un enlace que lleva a la función antes creada (plegardesplegar) y que permite hacer invisible las dos capas solapadas, para ver el contenido normal de la página. Dentro de esta capa es donde pondremos también lo que queramos: publicidad, un aviso, un flash... en fin, lo que deseemos mostrar.

Todo esto no presenta ninguna novedad sobre lo que ya vimos en anteriores entradas, salvo que las capas las haremos inicialmentes invisibles (class='invisible').

A continuación, dentro del último script, es cuando:
  • recuperamos el valor de la cookie vezprimera
  • abrimos un condicional para comprobar si tiene algún valor
  • si lo tiene (ya se ha visitado la página anteriormente)
  • no se hace nada y por tanto las capas permanecen invisibles
  • si no tiene ningún valor (null)
  • primero hacemos la variable expiration igual a la fecha actual (incluye hora)
  • le sumamos a esa variable el tiempo requerido (24h en milisegundos=86400000)
  • añadimos (setCookie) la cookie vezprimera al ordenador del usuario con el valor 1 y una fecha de caducidad igual a expiration (24 horas después)
  • cambiamos la clase de idatenuar (capa oscura); como estaba en invisible ahora será visible
  • idem con idcapa (el contenido del segundo DIV); ahora será visible
Si volvemos a entrar por segunda vez en las siguientes 24 horas, el condicional detectará la cookie con un valor y no hará nada, por lo que no se mostrarán las capas con ID idatenuar e idcapa, que era precisamente lo que intentábamos conseguir.

Evidentemente podeis hacer esto para un tiempo mayor o menor que 24 horas cambiando el valor sugerido (86400000). De hecho, para hacer pruebas lo mejor es cambiarlo a uno más pequeño, por ejemplo 15000 (15 segundos). Desde este enlace podeis lanzar una capa de prueba. Una vez vista y durante 15 segundos, por mucho que pincheis, no volverá a ser visible. Una vez transcurridos los 15 segundos, si pinchais volverá a salir sin problemas.


Criteo ya no dará más servicio de autoroll. Rollsense

09/02/2010
No sé si habrá mucha gente que todavía tenga este servicio gratuito de Criteo y que generaba una lista de enlaces automática, extraida por criterios de afinidad a nuestro propio contenido, de entre los usuarios que visitan nuestro blog.

En cualquier caso, sean los que sean, a partir del 1 de Marzo el servicio cesará. El cacharrito no estaba mal, porque creaba a través del gadget una mini-comunidad de usuarios interconectados con temática normalmente común pero, evidentemente, en estas circunstancias lo mejor es borrar el código correspondiente, tal y como nos indican en su correo:
Estimados usuarios,
Estais recibiendo este correo porque teneis instalado un gadget Autoroll de Criteo en vuestros blogs.
Hoy, todos nuestros recursos técnicos y comerciales están centrados en nuestra actividad principal, la redistribución personalizada.
Con pesar y nostalgia, nos vemos obligados a suprimir el widget Autoroll y el consecuente ranking de los blogs Criteo, el cual sirvió para la promoción inicial de Criteo.
Desde el 1 de Marzo, todos nuestros gadgets Autoroll dejarán de funcionar y consecuentemente, os invitamos a borrarlos de vuestro blog tan pronto como podais...


Si alguien quiere sustituir este gadget por otro similar, por ahí anda RollSense, que aunque más bien está orientado a la publicidad, bien puede servir. A diferencia del gadget de Criteo, aunque los contenidos mostrados también son automáticos y relacionados con el post visitado, nosotros somos los que tenemos que indicar qué fuentes utilizaremos, permitiéndonos grabar aquellas webs que nos gusten.


Gadgets Twitter

08/02/2010
Si utilizas Twitter, en su web puedes conseguir fácilmente unos cuantos gadgets para tu blog, basados en la conocida utilidad del simpático pajarito.



Todos los gadgets son configurables en cuanto a nombre de usuario, tamaño y colores. También se puede controlar el número de datos a mostrar, fecha, avatar, información estática o en carrousel, actualización...

  • Widget de perfil: Lo más básico. Muestra una lista de tus últimos twitts. No sólo puedes utilizar tu usuario para crearlo, sino también cualquier otro que te pueda interesar.
  • Widget de búsqueda: Encuentra temas que te interesen por palabras clave en tiempo real. Recomendable para estar al día de eventos, noticias... Interesante la opción de poder utilizar operadores.
  • Faves Widget: Tus twitts marcados como favoritos, también en tiempo real.
  • Widget para listas: Utiliza tus listas o las de otros para personalizar el gadget mostrando los twitts de varios usuarios en el mismo artilugio.


Paginación para Blogger.

05/02/2010
Entre otros, este ha sido uno de los gadgets destacados de 2009. Hay ya muchas explicaciones, de cómo aplicar este script que sirve para navegar por las entradas mediante unos cuadraditos de paginación; pero el caso es que de vez en cuando todavía seguís preguntando por este artilugio. Así que, para general constancia, hemos decidido crear este post.



La información original la teneis en Blogger Widgets y otra explicación en castellano por si la de esta entrada no se entiende bien, en Gem@ Blog.

Aunque en esencia es lo mismo, podemos instalar el artilugio de tres maneras.

Sistema A (semi-automático)

1. Nos logueamos en nuestra cuenta de Blogger y a continuación accedemos a la página de BloggerPluggins correspondiente a este gadget. Rellenamos los datos de las casillas según nos interese.


Si no quereis calentaros la cabeza, los valores que se ven en la imagen quedarán bien para un blog en español, pero por si acaso, este es el significado de las distintas variables que se piden:
  • Previous Page Text: Texto para el botón de las páginas previas
  • Next Page Text: Texto para el botón de las páginas siguientes
  • Posts Per Page: Número de entradas que se mostrarán en cada página
  • Max Number of Page... : La cantidad de cuadraditos máxima que se mostrarán delante y detrás de la página activa

2. Ahora pinchamos en Customize y a continuación en Add Widget To My Blog. Se nos abrirá una nueva página (ya en Blogger) y desde allí pinchamos en Añadir Artilugio para que el idem se instale automáticamente en nuestro blog.


3. Por último, tenemos que ir a nuestro Panel de Control y desde Elementos de Página, desplazamos el gadget desde la barra lateral, hasta situarlo justo debajo del bloque de Entradas del Blog. Pinchamos en Guardar y comprobamos que ya tenemos nuestro marcapáginas activo.

4. Entrando por Elementos de Página y Editando el gadget, veremos que al principio lleva todo el código del estilo entre etiquetas <style>. Allí es dónde podremos cambiar colores de texto y fondo, efecto hover, espaciado, etc.

Sistema B (añadiendo un gadget)

1. Añadimos un nuevo gadget HTML/JavaScript y allí pegamos este código:

<style type="text/css">
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}
</style>
<script style="text/javascript">var pageCount=5;var displayPageNum=3;var upPageWord="Anteriores";var downPageWord="Siguientes";</script>
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js"></script>

Para personalizarlo se pueden cambiar los siguientes valores antes de Guardar el gadget:
  • var pageCount=5 : Número de entradas que se mostrarán en cada página
  • var displayPageNum=3 : La cantidad de cuadraditos máxima que se mostrarán delante y detrás de la página activa
  • var upPageWord="Anteriores" : Texto para el botón de las páginas previas
  • var downPageWord="Siguientes" : Texto para el botón de las páginas siguientes
También antes de Guardar o Editando posteriormente, podeis configurar todo el aspecto de la botonera de las páginas modificando las propiedades de las clases correspondientes:

.showpageArea a : Contenedor general del artilugio. Enlace.
.showpageNum a : Cada uno de los botones, excepto la página activa. Enlace.
.showpageNum a:hover : Idem anterior. Enlace al pasar el puntero.
.showpagePoint : El botón de la página activa.
.showpageOf : Texto que muestra el total de páginas.
.showpage a : Botones de texto Anteriores/Siguientes. Enlace.
.showpage a:hover : Botones de texto Anteriores/Siguientes. Enlace al pasar el puntero.
.showpageNum a:link,.showpage a:link : Para no cambiar los enlaces visitados.

Este código es el mismo al que podemos acceder cuando viendo la imagen del punto A.2, pinchamos en Editar Contenido. Comento esto porque aunque el resultado sea el mismo, en ocasiones es conveniente ver qué es lo que estamos instalando... sobre todo si la fuente no es fiable.

2. Al igual que antes, el gadget hay que moverlo debajo de Entradas del Blog para que empiece a funcionar.

3. Si vamos probando, veremos que el artilugio se muestra y funciona perfectamente en la navegación por fechas, pero que cuando accedemos a una entrada o navegamos por etiquetas, aparecen los enlaces habituales (Entradas Antiguas / Entradas más recientes). Para solucionar esto hay que acceder al código de la plantilla con los Artilugios Expandidos y buscar todas las menciones a la variable 'data:label.url'. Allí donde estuviera ese trozo de código, sustituirlo por 'data:label.url + &quot;?&amp;max-results=5&quot;'

Aquí se ha usado el número 5 porque es el número de posts por página que seleccionamos al principio. Si hubiéramos optado por otra cifra entonces, ahora tendríamos que usar esa en lugar del 5.

Ojo al buscar la cadena 'data:label.url'. Sólo hay que cambiar aquella que sea exactamente igual, con sus comillas simples incluidas. En algún sitio os encontrareis la variable formando parte de un condicional, pero no está encerrada entre comillas y en ese caso NO hay que sustituir nada. Por lo general encontrareis cuatro ocurrencias, pero puede haber alguna más o alguna menos.

Una vez hechas las sustituciones, Guardamos la plantilla y ya funcionará el gadget también para la navegación por etiquetas. En las páginas individuales de las entradas, seguirá sin funcionar, pero esto es lo lógico puesto que aquí no se pueden mostrar cinco posts, sino sólo aquel al que se accede.


Sistema C (modificando plantilla)

1. Editamos plantilla y antes de ]]></b:skin> pegamos toda la parte CSS que configura el estilo de la botonera.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Igual que se ha explicado anteriormente (ver B.1), todas estas propiedades se pueden cambiar para adaptar la estética a la de nuestro blog.

2. Ahora localizamos </body> y justo antes pegamos los parámetros y la llamada a la función JavaScript.

<!-- Paginación -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=3;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
</b:if>

También se pueden configurar los valores de las variables var pageCount, displayPageNum, upPageWord y downPageWord, y su significado es el mismo que ya tambien se explicó antes (B.1).

3. Ahora hacemos la sustitución de 'data:label.url' explicada en B.3 y Guardamos cambios.


Generar y recuperar cookies

03/02/2010
Una cookie (del inglés 'galleta') es simplemente un texto que a petición del servidor de determinada página, se almacena en el disco duro del usuario que la visita. Esta información puede ser luego recuperada por el servidor en posteriores visitas y esta segunda parte es la que realmente les da utilidad.

Cuando visitamos con frecuencia un sitio web, las cookies pueden 'recordar' cosas que consiguen que la navegación por esa página sea un poco más fácil e incluso en ocasiones, más rápida. Esto ocurre por ejemplo, cuando visitamos una web dónde tenemos que identificarnos con usuario y contraseña. En este caso, tras comprobar que el login es correcto, lo normal es que se grabe una cookie en nuestro ordenador, para que el sistema no esté pidiendo constantemente que volvamos a loguearnos.

Otro ejemplo sería la conocida página de Google. Este motor de búsqueda permite a los usuarios decidir cuántos resultados de quieren ver en cada página. Gracias a una cookie, esta configuración permanece invariable para cada ordenador aún después de reiniciar distintas sesiones. La personalización de páginas es otra utilidad de estos ficheritos.

A pesar de esto, es bueno borrarlas de cuando en cuando, porque aunque algunas caducan tras un tiempo borrándose automáticamente, otras no lo hacen nunca. Por otra parte, muchas de ellas no nos servirán mas que una vez porque no repetiremos con la página que nos la grabó.

Si por parte del programador no se define una fecha de caducidad, la cookie se borrará en cuánto el usuario cierre su navegador, por lo que indicar cuando expirará una cookie, sirve realmente para que esta sobreviva entre distintas conexiones.

Como tantas otras cosas, las cookies pueden sufrir un mal uso y de ahí su mala fama. Con ellas se pueden almacenar y estudiar los habitos de navegación de una persona sin su conocimiento. Por esto precisamente, la mayoría de los navegadores ya incluyen algún sistema para filtrarlas, pudiendo decidir si se cede algo de intimidad a cambio de algunas comodidades o no.

¿Y cómo podemos nosotros utilizar esto? Pues seguramente habrá otras formas, pero un servidor sólo sabe hacerlo con JavaScript. El código es sencillo y una vez instalado nos permite recurrir a él tantas veces queramos aunque sea para distintos usos. Básicamente se trata de crear tres funciones: respectivamente, una que graba, otra que lee y una última que borra. El lugar dónde insertarlas en Blogger es antes del </head>:

<script type='text/javascript'>
//<![CDATA[

// Grabar
function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}

// Leer
function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}

//Borrar
function delCookie (name,path,domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

//]]>
</script>

Una vez hecho esto, para grabar una cookie sólo necesitamos llamar a la primera función, pasando como parámetros al menos el nombre y el valor que queremos guardar. Adicionalmente, también la fecha de caducidad. Esta se pasará sumando al momento actual, los milisegundos que consideremos:

<script type='text/javascript'>
var expiration = new Date();
expiration.setTime(expiration.getTime() + 600000); //Caduca 600 segundos después
setCookie("micookie","hola",expiration);
}
</script>


El código anterior graba en una cookie llamada micookie, el texto hola, fijando su caducidad para diez minutos después del momento de la grabación (600.000 milisegundos = 600 segundos = 10minutos). Si queremos recuperar el valor de la cookie, entonces usamos la segunda función, buscando por su nombre entre las diversas cookies que pudiera haber:

<script type='text/javascript'>
var comprobar = getCookie("micookie");
}
</script>

Este código colocado a continuación de <body>, nos graba una cookie con el valor 'hola' y a continuación nos muestra el valor grabado en pantalla. La cookie desaparecerá en este caso a los 10 segundos:

<script type='text/javascript'>
var expiration = new Date();
expiration.setTime(expiration.getTime() + 10000);
setCookie("micookie","hola",expiration);
var comprobar = getCookie("micookie");
document.write(comprobar);
</script>

La función de borrado se utiliza de la misma manera que la de leer, accediendo por el nombre de la cookie. Los parámetros path y domain, no sé si serán de utilidad para Blogger, pero como no estorban mucho, creo que conviene dejarlos por si en alguna ocasión nos hicieran falta.

Las funciones se pueden dejar grabadas en la plantilla aun cuando no las utilicemos, a modo de librería para cuando se necesite. La combinación de las tres funciones nos permitirá manejar cookies para fines concretos, como el que veremos en próximas fechas.


BPT. Instalar Cufón en Blogger.

01/02/2010
Muchas veces nos gusta alguna que otra tipografía que vemos por ahí y nos la descargamos. Un buen día, decidimos utilizarla en nuestro blog usando FONT-FAMILY y nos queda preciosa de la muerte... Pero hete aquí que otro día cualquiera, nos vamos a otro ordenador y nuestra página se ve con una letra mucho más normal y que por supuesto no es la que nosotros habíamos programado. ¿Se han puesto los hados o directamente los bits en nuestra contra? No. Simplemente ese ordenador no tiene cargada nuestra maravillosa tipografía y por eso es imposible visualizarla en él.

Las fuentes que llevan todos los sistemas operativos "de serie", son relativamente pocas y además, cada uno lleva la suyas propias. Los navegadores cargan las fuentes del ordenador desde dónde esteis navegando y por tanto, si el ordenador no la tiene, el navegador no la puede presentar en pantalla. Para solucionar esto, de momento estamos casi obligados a utilizar las llamadas fuentes estándar que vienen prácticamente con todos los sistemas operativos y que rara vez nos darán problemas.

Este precisamente es el motivo por el cual desde el panel de Blogger Fuentes y Colores, no disponemos mas que de unas pocas fuentes.

Afortunadamente -o no, depende de cómo se mire- hay algunos scripts que permiten sustituir la fuente letra a letra, por gráficos y uno de ellos es Cufón. Estos sistemas hay que usarlos con prudencia porque ralentizan bastante la carga de la página y por ello, conviene usarlos con parte del texto y no con todo.

Para instalar este sistema en Blogger sin depender de servicios de almacenamiento externos, vamos a meter los scripts en gadgets tipo HTML/JavaScript, creados desde Elementos de Página. Así no tocaremos la plantilla y si no nos gusta el resultado, con eliminar los gadgets creados, será suficiente para dejar todo como estaba. O sea que sin miedo.

Vamos a necesitar al menos dos: el script general que realiza la sustitución (cufon-yui.js) y un script adicional para cada fuente nueva a utilizar. Por ser más didácticos, comenzaremos por crear el segundo, que es el que genera las imágenes que sustituirán a la tipografía original con la nueva. La entrada es larga, pero sólo por contemplar todas las situaciones posibles. Realmente son sólo dos tareas:

1. En primer lugar nos descargamos nuestra fuente favorita, descomprimimos si es necesario y localizamos el fichero .ttf correspondiente en nuestro disco duro. Sería conveniente simplificar el nombre del fichero si es algo del tipo fuente_grande.seguro_que_funciona888.ttf. Por ejemplo renombrando a fuentegrande.ttf. Para texto en español, aquí hay que tener cuidado con escoger una fuente que contemple las vocales acentuadas y la ñ, porque de lo contrario, todos esos caracteres no se sustituirán.

Ahora accedemos a este generador online de shoqolate. Las opciones que hay que marcar/rellenar:
  • regular typeface: desde aquí, mediante Examinar, indicamos la fuente a transformar seleccionando entre los fichero de nuestro ordenador. Tiene que ser del tipo .ttf.
  • The EULAs of these fonts allow Web Embedding (without Adobe Flash): lo marcamos si tenemos autorización para usar la fuente. Si no lo marcamos no se generará el código que necesitamos (Ver Fuentes libres)
  • Basic Latin: De todas las opciones, marcamos esa por ser la que ocupará menos K's y para castellano nos vale.
  • units per em: sustituimos el valor que aparezca por 64, por el mismo motivo que antes.
  • I acknowledge and accept these terms: Seleccionamos para aceptar los términos de uso
Pinchamos en Let's do this! y tras unos instantes, obtenemos nuestra fuente transformada en un fichero .js (JavaScript). Lo guardamos en el disco duro.

(Para hacer una prueba rápida, de momento si quereis podeis descargar esta fuente que ya está transformada y copiarla dónde se explica a continuación. Se trata de la script mt bold)

Ahora añadimos nuestro primer gadget desde Elementos de Página (quizás el mejor sitio para colocarlos es en la parte inferior) y allí pegamos el contenido del fichero que antes hemos obtenido. Aunque sea .js, lo podeis abrir con el bloc de notas para copiar y pegarlo. Ya tenemos nuestra nueva fuente disponible.
Actualización: Para que funcione esta parte de código, hay que meterlo todo entre las etiquetas <script type="text/javascript" > y </script>

2. Ahora vamos a instalar el script y la llamada al mismo. Desde aquí podeis descargar todo el código necesario para ello. (También podeis copiarlo desde de esta página que es la fuente original, pero luego habría que meterlo todo entre las etiquetas <script type="text/javascript" > y </script> y añadirle lo de la llamada.)

Copiamos todo en un nuevo gadget HTML/Javascript y guardamos. Desde este momento, todos los títulos de nuestro blog que estén entre etiquetas H1, saldrán con la tipografía script mt bold. Hemos instalado Cufón.

Nos fijamos en las últimas líneas del código que realiza el reemplazo de fuentes:

<script type="text/javascript">

Cufon.replace('h1', { hover: true, fontFamily: 'script mt bold' });

Cufon.replace('#script', { hover: true, fontFamily: 'script mt bold' });

</script>

Cada línea con Cufon.replace..., realiza una sustitución distinta. En este caso, lo que haya entre <h1> y </h1>, será sustituido por la fuente script mt bold, que es precisamente el fichero que grabamos en el primer gadget creado. La segunda línea sustituirá todo lo que se encuentre bajo un ID llamado script por esta misma tipografía. Se supone que no teneis nada bajo el selector script, así que no os saldrá nada con esto, pero se puede hacer una prueba para ver si funciona...

Escogeis cualquier post ya publicado y lo editais. Seleccionais un párrafo cualquiera y le insertais <div id="script"> delante y </div> al final del mismo. Si publicais de nuevo vereis que ese párrafo ha cambiado su tipografía. Como sólo era una prueba, podeis editar de nuevo y borrar lo que insertasteis.

A partir de ahora para cualquier fuente nueva que querais usar, sólo teneis que utilizar la página generadora de fuentes para Cufón y el código que os faciliten meterlo en un nuevo gadget en la forma explicada al principio. No vayais acumulando muchas porque ocupan espacio. Las que vayais descartando se borran eliminando el gadget correspondiente. Luego de instalar la fuente nueva, toca modificar las últimas líneas del gadget que lleva el script "reemplazador" y sustituir script mt bold por el nombre de la nueva tipografía.

Evidentemente, se pueden cambiar también los ID de las capas sobre las que se quiere hacer la sustitución. Si por ejemplo cambiais H1 por BODY, la sustitución se realizará en toda la página.

Pero como hemos dicho antes, sustituir todo puede ser una pesada carga para los navegadores y en ese caso, podría ser conveniente hacerlo sólo con determinados ID. Por ejemplo con el título del blog, las fechas, los títulos de las entradas, de la barra lateral... Sólo tenemos que encontrar el nombre que usa nuestra plantilla: #sidebar-wrapper, #main, #footer, etc... Nótese que si el ID no debe llevar almohadilla en CSS, aquí tampoco hay que ponerla (H1, BODY, etc.)

Para sustituir sólo determinadas partes, tenemos que hacer lo mismo que hicimos en la prueba que antes os propuse e insertar <div id="script"> delante y </div> detrás. script es el selector que yo he escogido para el ejemplo, pero podeis llamarlo como querais. Sólo hay que tener en cuenta que lo que pongamos en el código "reemplazador" tiene que ser lo mismo que usemos después para la etiqueta DIV.

Si queremos utilizar más de una fuente simultáneamente, creamos tantos gadgets como necesitemos con otras tantas fuentes transformadas a .js. Para que no sea nada visible, tendremos que dejar el nombre del gadget en blanco o bien, posteriormente editar la plantilla, buscar por el nombre (artilugios expandidos) y eliminar las líneas que generan el título del gadget y que son:

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><div id='script'><data:title/></div></h2>
</b:if>

En el código que realiza el reemplazo teneis que redactar una línea Cufon.replace... por cada combinación ID/FUENTE NUEVA que vayais a utilizar.

Creo que no me dejo nada, así que ¡suerte!

Ver también:
Demo
Cufón. Usar fuentes no estándar.

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba