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

Post aleatorio






Para redondear las esquinas de nuestras imágenes

30/12/2009
Actualización 14-11-2010: Hoy nos avisan de que este servicio ha dejado de funcionar. Tras comprobarlo, así es.

Roundpic es una sencilla aplicación online, donde podreis redondear las esquinas de vuestras imágenes antes de subirlas a vuestro espacio o simplemente para archivarlas con ese formato.

La interface, aunque en inglés, es bastante intuitiva. En la página principal tenemos que subir una imagen desde nuestro disco o bien indicar directamente la dirección de una imagen alojada en internet.

Pinchando en el botón Round it!, ya tendríamos nuestra imagen lista para descargar. En la ventana que se abre con la vista previa, el botón Download es el que sirve para ello.

Pero si queremos, antes todavía podemos hacer algunos ajustes más.

Se puede redimensionar la imagen introduciendo los pixels que queremos que tenga de ancho/alto, guardando la proporción o no (constrain proportions).

En la parte de arriba-izquierda, se puede seleccionar qué esquinas redondear, pudiendo hacerlo con sólo 1, 2 ó 3 de ellas. Debajo podemos seleccionar el tamaño de la esquina.

En la parte inferior es dónde se pone el código hexadecimal del color de fondo que queremos usar y que tendrá que ser el mismo que el fondo del sitio dónde vayamos a mostrar la imagen. Eso o seleccionamos Transparent PNG para una transparencia en ese formato. Tened en cuenta antes de escoger esta opción, que IE6 no traga bien con la transparencia PNG.

Cómodo y rápido para lo que se pretendía hacer ¿qué más se puede pedir? Pues que nos toque la lotería.

Gracias por el link Jonathan.


Mover imágenes y otros elementos. Scriptaculous.

28/12/2009
Este es otro motivo por el que sigo prefiriendo que no se vea el gadget de seguidores, antes que quitar script.aculo.us de mi plantilla.

Hace unos días aprendí en Ciudad Blogger, tras ver otra aplicación similar en Dormiluno Blog, que con este conocido script, podemos fácilmente crear elementos móviles en nuestro blog.

Lo primero es instalar el script si es que no lo tenemos ya, copiando justo antes de </head> las dos librerías necesarias y guardando los cambios una vez hecho.

<!-- Prototype y Scriptaculous-->
<script type='text/javascript' src='http://www.google.com/jsapi'/>
<script type='text/javascript' >
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Ahora, cuando queramos poner en algún sitio (barra lateral, cabecera, una entrada...) algún elemento que el usuario pueda mover, simplemente tendremos que ponerle un ID con un identificador propio y posteriormente, hacer una llamada a la función new Draggable indicando ese mismo ID. Más o menos así:

<img id="icono1" style="cursor:move; border:0px;" src="URL_IMAGEN"/><script type="text/javascript">new Draggable('icono1');</script>


¡Pruébalo!

En un principio, el elemento no se puede mover más allá de los límites del contenedor dónde se instale y por tanto, desaparecerá cuando se acceda a otra capa colindante. Sería como si hubiera alfombras alrededor del contenedor. Al mover arrastrando, cuando llegamos a ellas, el elemento se queda debajo sin posibilidad de verlo.

Es importante que los identificadores (ID) de cada elemento -icono1 en el anterior ejemplo-sean distintos a los de otros a los que también se le aplique este sistema. Es la manera de que el script sepa qué es exactamente lo que tiene que mover. Por cada elemento con ID, hay que añadir un new Draggable con su parámetro (ID) y un punto y coma al final.

<div style="margin: 0px auto; text-align: center;"><img id="icono2" style="border: 0px none ; margin: 0px auto; cursor: move;" src="URL_IMAGEN2" /> <img id="icono3" style="border: 0px none ; margin: 0px auto; cursor: move;" src="URL_IMAGEN3" />
Probar</div>
<script type="text/javascript">new Draggable('icono2');new Draggable('icono3');</script>



Probar


Esta capa cumplió ayer su mayoría de edad y se ha independizado :)
Prueba a moverla.
¿Y ahora que tal si aplicamos el truquillo a un DIV entero? Pues exactamente igual. Le colocaremos un nuevo ID (uno que todavía no hayamos utilizado) y escribiremos también new Draggable con ese ID. Este sería el código:

<div id="div1" style="border: 2px solid rgb(0, 0, 0); margin: 0px 0px 10px; padding: 4px; background: rgb(153, 0, 0) none repeat scroll 0% 0%; float: right; cursor: move; width: 250px; height: 60px; color: rgb(255, 255, 255); text-align: center;">Esta capa cumplió ayer su mayoría de edad y se ha independizado :)
Prueba a moverla.</div><script type="text/javascript">new Draggable('div1');</script>

Cuando necesitemos manejar muchos elementos, la llamada a la función new Draggable puede incluir todos los ID correspondientes, pero siempre tendrá que estar después de definir (redactar) los correspondientes bloques.

<script type="text/javascript">new Draggable('icono4'); new Draggable('icono5'); new Draggable('icono6'); new Draggable('div2');</script>

Como variante, también se puede aplicar a un gadget entero de la barra lateral. Estos suelen tener una identificación asignada, por lo que sería suficiente con hacer la llamada a la función. Si acaso, convendría añadirle una etiqueta STYLE con un CURSOR:MOVE; tal y como se ha hecho en los ejemplos de esta entrada, para que el puntero cambie de apariencia y se sepa que el elemento es móvil. Si esto no funciona, siempre queda el recurso de encerrar todo el gadget en un nuevo DIV con otro ID, tal y como hemos visto justo antes.

<div id='gadget1'>
CODIGO DEL GADGET
</div>
<script type='text/javascript'>new Draggable('gadget1');</script>

Ojo en todos los casos y en especial en este último con los enlaces. Si existe uno dentro del elemento móvil y pinchamos justo encima para moverlo, nada más soltar el botón del ratón, se realizará el acceso a la dirección del enlace. Por tanto, en un principio, los bloques móviles no deberían contener enlaces o estar muy claros para que no se pinchara en ellos para arrastrar. El truco que nos explican en Ciudad Blogger para solucionar esto es incluir un evento JavaScript en el elemento para poder abrir con doble click:

<img id="imagen1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL_ENLACE')" src="URL_IMAGEN"/>
<script type="text/javascript">new Draggable('imagen1');</script>


Las imágenes de los extremos abren el enlace que contienen sólo con doble click. Sin embargo en la del centro, hemos puesto el enlace en el círculo que forma el balón. Mientras no pinches ahí, puedes mover el dibujito sin problemas porque no se enlaza nada. Lo hemos hecho con USEMAP:


Crear contenido exclusivo para suscriptores

23/12/2009
Esta es una cosa que CN tenía curiosidad por saber cómo se hacía. Se trata de hacer que los suscriptores de nuestro feed, además de poder ver el contenido normal de nuestras entradas, tengan también acceso a información extra. Es como una forma de recompensa por el hecho de serlos.

Realmente no sé si hay una manera mejor, pero las dos maneras que se explicarán, están basadas en el hecho de que la mayoría de lectores de feeds, no interpretan la parte de estilo de nuestra plantilla. Sólo atienden al propio código CSS introducido en la entrada que reproducen... y no siempre.

De esta manera, el primer truco consiste en crear una clase en nuestra plantilla con un DISPLAY:NONE y colocársela después al contenido "exclusivo". En el post no se verá y, en teoría, en el lector de feeds sí al ignorar las propiedades de la clase bajo la que se engloba.

Código para la hoja de estilo (antes de /b:skin):

.extra {
display:none;
}

Código para el lugar del post dónde queremos que salga el contenido:

<div class="extra">
Este es un ejemplo de contenido sólo para lectores por feed.
</div>


El otro sistema es exclusivo de Blogger. Tiene bastantes aplicaciones y lo conocí gracias a JMiur. En este caso echamos mano de una clase que ya viene de serie: item-control blog-admin

Es una clase que hace que ciertos elementos de la plantilla sean visibles sólo para el administrador... cuando está logueado, claro. Como ya existe la clase para todos los usuarios de Blogger, simplemente habrá que aplicarla al contenido extra de la siguiente manera:

<div class="item-control blog-admin">
Este es un ejemplo de contenido sólo para lectores por feed.
</div>


En ambos casos, dentro del DIV (también podría ser un SPAN), podemos meter lo que queramos: texto, imágenes, vídeos,...

Esta misma entrada contiene un audio y un enlace construidos con este último sistema, que podreis ver sólo si accedeis al feed de Oloblogger. Pinchando en este enlace accedeis a él y podreis "verlo".

Una advertencia. Si probais el segundo truco en vuestro blog y parece que no funciona porque se ve todo... ¡usad otro navegador dónde no esteis logueados!

CONTENIDO VISIBLE SOLO DESDE EL FEED


(El fichero de audio justo antes de esta frase se verá o no dependiendo de los navegadores)
Vía: S*Ingenio Blog.


Felices Fiestas

22/12/2009
Rompiendo un poco con la monótona temática de este sitio y tras recibir ya diversas felicitaciones por parte de muchas personas mucho más atentas que yo, aprovecho que es el día de la Lotería (con mayúsculas) y la cercanía de la Nochebuena, para desearos una Feliz Navidad y dejaros una frase que bien podría identificarse con lo que se siente a veces al escribir en un blog:

Los amigos son como las estrellas que, aunque no puedas verlas, sabes que siempre están ahí.


¡FELICES FIESTAS!


Tynt. Para controlar la copia de tus contenidos

21/12/2009
Lo que nos ofrece Tynt es un script que tras instalarlo en nuestro espacio, ejecuta una rutina capaz de introducir automáticamente un código "extra" con un enlace a nuestro sitio a continuación de lo copiado y, adicionalmente, un enlace a nuestra licencia. Podeis hacer una prueba copiando parte del texto de este post, observando después qué es lo que realmente sale cuando se pega por ejemplo en el bloc de notas.


El sistema es tan simple que tras pegar lo copiado, estos enlaces se pueden borrar sin ningún problema antes de su publicación. Por tanto, cuando se tiene mala intención el sistema no sirve de nada. Sin embargo, para otros casos en los que la gente sólo se olvida o se despista, quizás puede venir bien.

En cualquier caso, esta utilidad tiene también otras cosas interesantes. La mayoría son de pago (Pro Feature), pero de forma gratuita tenemos en Reports, una serie de datos y estadísticas que podrían ser de interés. Como nos indican en Tynt, el hecho de que cierta información sea copiada en mayor medida que otra, también es un indicador sobre cuáles de nuestros contenidos son los más interesantes. El que no quiere ver la parte positiva de las cosas es porque no quiere :)

Por ejemplo, hay una aplicación visual que nos indica mediante un carrousel de pantallas, qué contenidos han sido copiados y cuándo. Si pinchamos en una de ellas, nos llevará a nuestro sitio y allí aparecerá marcado el texto concreto copiado. En otras pestañas también hay información sobre cuántas cosas han sido copiadas, cuántos links se han instalado con el copy-paste, cuantas visitas nos han reportado esos mismo enlaces... Es cuestión de ir buceando en los datos para ver cuáles nos resultan interesantes.

BPT ON
Registrarse y activar el servicio.

Se accede a la página de registro y allí introducimos nuestro dominio (no es necesario el http://), nuestra dirección de correo y la contraseña que queramos tener. Pinchamos en Get Started para seguir y nos encontramos directamente en la pestaña Link Setup > Attribution Link, que es desde dónde configuramos lo que queremos que aparezca cuando alguien copie contenido.


A la izquierda hay un par de casillas para verificar. Lo que marquemos será lo que salga al copiar nuestro texto. De arriba abajo, un enlace a nuestra web y un enlace a nuestra licencia. Podemos seleccionar el lenguaje del mensaje así como el tipo de licencia.

En la parte derecha, podremos ver una vista previa de cómo quedaría un post copiado con el "añadido" y un poco más abajo, el código que corresponde a las opciones que hayamos elegido. Cada vez que cambiemos algo, el código es distinto, por lo que habrá que volverlo a copiar y pegar en nuestro espacio. En Blogger, el lugar dónde situarlo es justo antes del </body>. Aquí las instrucciones para otras plataformas para blogs.

Una vez instalado, podemos comprobar que se ha hecho bien desde el apartado Test Script. Allí pinchamos en el botón Test Your Script y el sistema nos dirá si es correcto o no.
BPT OFF

Nota: Melody, esta es la información que estabas esperando como agua de Mayo.


Una galería con orden aleatorio

18/12/2009
En ocasiones tenemos la necesidad de mostrar una serie de enlaces, de imágenes o de cualquier tipo de elemento, pero de manera que no demos prioridad a ninguno de ellos. Es el caso de concursos, votaciones o similares. Los primeros que se ven siempre parece que tienen alguna ventaja, sobre todo en listas muy largas que normalmente no se llegan a ver enteras, por lo que mostrarlas de forma aleatoria cada vez que se accede, parece que es la mejor solución para que todos tengan la misma oportunidad de ser vistos.

Con el sistema que se explica, cada vez que se accede a la página (o se refresca) el orden en que aparecen los elementos va cambiando. Probadlo con esta galería de iconos, refrescando (F5) esta página. Vereis como aunque la secuencia es la misma, cada vez se empieza de una imagen distinta.



El script es muy sencillo y lo único un poco más engorroso es rellenar la matriz que contiene las imágenes y sus enlaces. Para que todo funcione bien, sólo hay que tener cuidado en la redacción de estos.

<script type="text/javascript">
var indice = 0;
enlace = new Array();
enlace[0] = '<a href="URL_ENLACE0"><img src="URL_IMAGEN0"/></a>';
enlace[1] = '<a href="URL_ENLACE1"><img src="URL_IMAGEN1"/></a>';
enlace[2] = '<a href="URL_ENLACE2"><img src="URL_IMAGEN2"/></a>';

indice = Math.random() * (enlace.length);
indice = Math.floor(indice);
for (i=1;i<=enlace.length;i++) {
if (indice == enlace.length) indice = 0;
document.write(enlace[indice]);
indice++;
}
</script>


El ejemplo está hecho con tres pero se pueden insertar más imágenes simplemente añadiendo más elementos a la matriz, con el siguiente ordinal que toque. Dentro de cada elemento de la matriz (ENLACE[X]) se puede poner cualquier código HTML por lo que podrían contener una imagen sin enlace, un enlace de texto, un vídeo...

Una variante sería mostrar una cantidad limitada de elementos de entre todos los de la matriz. Para eso, en la siguiente línea

for (i=1;i<=enlace.length;i++) {

...habría que cambiar enlace.length por un número, siempre teniendo en cuenta que debe ser menor que el total de elementos que haya.

En el siguiente ejemplo sólo se muestran 4 imágenes cada vez, de entre las 12 que lleva la matriz y como se pretende, en cada carga se escogen cuatro distintas.


Simular una venta modal

15/12/2009
En su momento vimos como construir un bloque emergente que se solapaba al contenido de nuestra página y que funcionaba al estilo de las ventanas modales que se usan -sobre todo- para las galerías de imágenes. Splash screen llamamos al invento, aunque no con mucha fortuna, todo hay que decirlo.

Para que el efecto fuera más parecido a las susodichas ventanas modales, sólo nos faltaba conseguir que todo el contenido de la página excepto el propio bloque emergente, atenuara su color a la manera que ocurre con Lightwindows, Lytebox y todos estos.

Pues a través de un sistema de capas solapadas, vamos a simular algo parecido. De esta manera, si sólo vamos a necesitar este efecto para usarlo de forma esporádica, nos podemos ahorrar instalar el script, así como la demora que produce su carga para todas las páginas.

Partiendo de la pestaña vertical que vimos el otro día, a la izquierda podeis pinchar para ver un ejemplo del resultado. Si os gusta, a continuación teneis la explicación de cómo montar el código y al final el código completo para poder copiar y pegar.

(1) En primer lugar creamos el pequeño script que muestra/esconde elementos. Esto también se explicó anteriormente y si ya lo instalasteis, no será necesario hacerlo otra vez.

1
<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>


(2) Después, creamos la pestaña con el enlace. En esta ocasión el enlace tiene que ser la llamada al script anterior y que permite por un lado visualizar/esconder una capa de color negro semitransparente y por el otro visualizar/esconder un bloque de información. Como lo de la pestaña ya lo vimos anteriormente, simplemente marcamos en verde la forma de hacer estas llamadas.

2
<style type="text/css">
#contenedorizda {
position:fixed;
top:25%;left:0px;
width:38px;height:102px;
background:url(http://3.bp.blogspot.com/_0eC4K-qZ7AM/Sxvva1xqibI/AAAAAAAAK0E/iaMzC5O-0cM/s200/ejemplo.jpg) no-repeat transparent -4px 0px;
z-index:10;
}
</style>
<a href="javascript:plegardesplegar('idatenuar');javascript:plegardesplegar('idbloque');">
<div id="contenedorizda" onmouseover="this.style.backgroundPosition='0px 0px';" onmouseout="this.style.backgroundPosition='-4px 0px';"></div>
</a>


(3) Por último, creamos las capas con la clase .invisible para que inialmente no se vean. Importante añadirle a cada una, el mismo id que pusimos en la llamada del script explicada en primer lugar de esta entrada: idatenuar e idbloque.

La primera capa (idatenuar) formará la atenuación del contenido de la página. Para ello se posiciona de forma fija, se le hace ocupar el 100% del alto/ancho de la página y además se le añade una transparencia (80% en el ejemplo). Con el z-index:99 conseguimos que la capa negra semitransparente se quede por encima de la página.

3
<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>


(4) Ahora haremos una segunda capa (idbloque) que ocultamos también con la clase invisible, que se fijará de la misma manera, pero que ocupará un espacio menor (400x300 px en el ejemplo). Habrá que colocarle un z-index superior al de la anterior capa para que se quede por encima. Dentro de ella, además del contenido que queremos mostrar, insertamos un DIV con una X que incluye enlace al javascript creado al principio y que nos permitirá cerrar tanto la anteriormente creada capa negra (idatenuar) como la que vamos a crear ahora(div id="idbloque").

4
<div class="invisible" id="idbloque" style="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; z-index:100;">

<div style="position:absolute;top:-25px;right:0px;background:#ffffff;color:#000000;padding:1px;">
<a href="javascript:plegardesplegar('idatenuar');javascript:plegardesplegar('idbloque');">[X]</a>
</div>

AQUI EL CONTENIDO DE LA VENTANA
</div>


Un esquema por si no se ha entendido muy bien:

idatenuar: capa de color negro con transparencia
idbloque: contenido a mostrar en ventana emergente

1.
- Estilo script con función plegardesplegar
- Script con funcion plegardesplegar

2.
- Estilo pestaña
- Pestaña con enlace a función plegardesplegar, bloques idatenuar e idbloque

3.
- Capa negra semitransparente intermedia que ocupa todo el espacio disponible

4.
- Capa con el contenido a mostrar
- Anidada dentro de esta capa, otra con un enlace a la función plegardesplegar y que permite cerrar la ventana

Click aquí para poder copiar todo el código junto [+/-]
(comillas dobles y simples sustituidas por ' y &quot; respectivamente
para que funcione bien dentro de la plantilla Blogger)

<style type='text/css'>#contenedorizda {position:fixed;top:25%;left:0px;width:38px;height:102px;background:url(http://3.bp.blogspot.com/_0eC4K-qZ7AM/Sxvva1xqibI/AAAAAAAAK0E/iaMzC5O-0cM/s200/ejemplo.jpg) no-repeat transparent -4px 0px;z-index:10;}</style><a href='javascript:plegardesplegar(&quot;idbloqueoculto&quot;);javascript:plegardesplegar(&quot;idcerrarbloque&quot;);'><div id='contenedorizda' onmouseover='this.style.backgroundPosition=&quot;0px 0px&quot;;' onmouseout='this.style.backgroundPosition=&quot;-4px 0px&quot;;'></div></a>
<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>
<div class='invisible' id='idbloqueoculto' style='background: rgb(0, 0, 0) none repeat scroll 0% 0%; overflow: visible; z-index: 99; position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8;'></div>
<div class='invisible' id='idcerrarbloque' style='border: 5px solid rgb(153, 0, 0); padding: 20px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; overflow: visible; position: fixed; top: 50%; left: 50%; width: 400px; height: 300px; margin-top: -150px; margin-left: -200px; color: rgb(0, 0, 0); text-align: center; z-index: 100;'><div style='padding: 1px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; position: absolute; top: -25px; right: 0px; color: rgb(0, 0, 0);'><a href='javascript:plegardesplegar(&quot;idbloqueoculto&quot;);javascript:plegardesplegar(&quot;idcerrarbloque&quot;);'>[X]</a></div>Como todo esto está dentro de un DIV, aquí podeis poner lo que gusteis: un texto, una imagen, un enlace, un vídeo, un formulario...</div>




Technorati sólo para angloparlantes

13/12/2009
Si hace casi tres años fue noticia que Technorati iba a empezar a hablar español, ahora la noticia es que deja de hacerlo. Y no sólo eso, sino que además ya no ofrecerá parte de sus servicios a los blogs con idiomas distintos del inglés (traducción... más o menos).

En su momento contamos los buenos servicios que este portal orientado a bitácoras ofrecía: búsqueda de artículos más actuales, búsqueda por tags, relación de backlinks, medición de autoridad, búsqueda interna, gráficos, sistema de alertas... Pero desde hace menos de un mes, para los blogs hispanos todo esto ya no sirve. Si habeis notado que vuestra autoridad hacía cosas raras en las últimas semanas, ya sabeis el motivo.

Primero se suprimieron muchos de estos servicios, sustituyéndolos por otros que en un principio no parecen mejores. Y ahora lo del idioma. Por eso, igual que en su momento -indirectamente- recomendaba su uso, ahora opino que ya no es de ninguna utilidad en el caso de blogs en castellano.

Bye, bye Technorati y Adiós Technorati son los títulos de un par de posts de ejemplo que muestran el descontento de la comunidad bloguera al respecto. En los comentarios del anuncio sobre el abandono de los idiomas distintos del inglés, unos cuantos ya solicitaron su baja total del servicio, supongo que como forma de protesta.

Pero no creo que sea cuestión de realizar una cruzada en contra de alguien que durante un tiempo nos ofreció un buen servicio gratuito. Si ya no nos convence algo, simplemente dejamos de usarlo y se comienza la búsqueda de otros servicios que puedan darnos lo mismo o algo parecido.


Pestaña vertical para usos múltiples

11/12/2009
Cada vez veo en más sitios, un botón en forma de pestaña vertical, situado en uno de los lados de la página y que incluye un enlace que abre una ventana emergente. Habitualmente es usado con la leyenda FEEDBACK y lo que se muestra al pincharlo es un formulario de contacto para opinar sobre la página en cuestión. A la derecha podeis ver en esta entrada un ejemplo con la leyenda CONTENIDO, que lleva un enlace para subir a la cabecera del blog.

Además de como alternativa al botón Ir Arriba, se puede usar para para llevar a un enlace concreto, invitar a la suscripción del feed, para mostrar un formulario, una imagen, un aviso, nuestros twitts...

Una de las formas (que no la única) de hacer algo parecido, sería mediante este código. Puede ser copiado dentro de un gadget o incorporarlo directamente a la plantilla antes de </body>.

<style type='text/css'>
#contenedor {
position:fixed;
top:50%;right:0px;
width:38px; height:102px;
background:url(URL_IMAGEN_BOTON) no-repeat transparent 4px 0px;
z-index:10;
}
</style>
<a href='URL_ENLACE'><div id='contenedor' onmouseout='this.style.backgroundPosition=&quot;4px 0px&quot;;' onmouseover='this.style.backgroundPosition=&quot;right bottom&quot;;'/></a>

Este ejemplo está preparado para una imagen de 42x102px, que cuando se muestra "plegada" sólo ocupa 38px de ancho. Las dimensiones de la imagen que useis vosotros, se tienen que indicar cambiando los valores de ancho y alto de #contenedor. La diferencia de pixels de ancho que es la que provoca el efecto del botón moviéndose (pestaña normal - pestaña hover, 4px en este ejemplo), se tienen que ajustar en el BACKGROUND del #contenedor y en el del ONMOUSEUT. Lo marcado en verde es lo que tendreis que personalizar.

Para hacer lo mismo pero en el lado izquierdo, el código sería este otro:

<style type='text/css'>
#contenedor2 {
position:fixed;
top:50%;left:0px;
width:38px; height:102px;
background:url(URL_IMAGEN_BOTON) no-repeat transparent -4px 0px;
z-index:10;
}
</style>
<a href='URL_ENLACE'><div id='contenedor2' onmouseout='this.style.backgroundPosition=&quot;-4px 0px&quot;;' onmouseover='this.style.backgroundPosition=&quot;right bottom&quot;;'/></a>

Podeis comprobar que lo que cambiamos es el posicionamiento, fijándolo en la izquierda (LEFT). También modificamos el desplazamiento de los fondos, que ahora es negativo (-4px) lo que hace que la imagen se "mueva" hacia la izquierda. Evidentemente, la imagen habría que rediseñarla para que quedara cerrada por el lado derecho, al contrario de la que se muestra y que sirve de ejemplo en este post.

Nosotros hemos redactado el ejemplo con un enlace simple, pero si teneis algún script para mostrar ventanas modales (ventana emergente con un contenido que se solapa sobre la página original atenuada...), sólo tendríais que añadir los atributos que vuestro script requiera.

Ejemplo con Lytebox:

...
z-index:10;
}
</style>
<a href='URL_ENLACE' rel='lytebox' ><div id='contenedor' onmouseout='this.style.backgroundPosition=&quot;4px 0px&quot;;' onmouseover='this.style.backgroundPosition=&quot;right bottom&quot;;'/></a>


Ejemplo con Lightwindow:

...
z-index:10;
}
</style>
<a href='URL_ENLACE' class='lightwindow' ><div id='contenedor' onmouseout='this.style.backgroundPosition=&quot;4px 0px&quot;;' onmouseover='this.style.backgroundPosition=&quot;right bottom&quot;;'/></a>

Y si no teneis ningún script de este tipo ni lo quereis instalar, en la próxima entrada os explicaremos cómo hacer una ventana modal casera.


Rotar botones o banners de forma aleatoria

08/12/2009
Esta es una manera de ir mostrando en el mismo espacio, una serie de imágenes con enlace, que se van viendo siguiendo una serie predeterminada, pero empezando cada vez que se accede a la página por una distinta. Los siguientes botones son un ejemplo y si refrescais podeis ver que la secuencia empieza cada vez por uno distinto.


Esto puede servir para mostrar una lista de enlaces de cualquier tipo, sin ocupar tanto espacio como en una lista normal y sin darle prioridad a ninguno de ellos: un blogroll, diversos banners publicitarios, unos botones o simplemente una galería de imágenes.

Es sistema está basado totalmente en el siguiente script:

<script type="text/javascript">
var ban = new Array();
var enl = new Array();
var indice = 0;

ban[0] = new Image();
ban[0].src = "URL_IMAGEN_0";
enl[0] = "URL_ENLACE_0";

ban[1] = new Image();
ban[1].src = "URL_IMAGEN_1";
enl[1] = "URL_ENLACE_1";

ban[2] = new Image();
ban[2].src = "URL_IMAGEN_2";
enl[2] = "URL_IMAGEN_2";

indice = Math.random() * (ban.length);
indice = Math.floor(indice);

function rota()
{if (indice == ban.length) indice = 0;
if (document.images) {
document.images.rotando.src = ban[indice].src;
}
else {
document.getElementById('rotando').src=ban[indice].src;
}
indice++;
setTimeout('rota()',2000);
}
function vete() {window.open(enl[indice-1]);}
</script>

<img id="rotando" style="cursor:pointer;" src="" onclick="vete();"/>
<script type="text/javascript">rota();</script>

El valor 2000 es el tiempo en milisegundos (2 segundos) que se espera antes de mostrar el siguiente botón. Podeis modificar ese valor por el que más os convenga.

Las imágenes y enlaces que se quieren colocar, tienen que ir en la matriz BAN y en la llamada ENL. Cada grupo de tres líneas representan una imagen y su enlace respectivo. En un principio, este código está preparado para 3 imágenes/enlaces. Si se quieren añadir más, simplemente hay que insertar más líneas con la misma estructura:

...
ban[2] = new Image();
ban[2].src = "URL_IMAGEN_2";
enl[2] = "URL_IMAGEN_2";

ban[3] = new Image();
ban[3].src = "URL_IMAGEN_3";
enl[3] = "URL_IMAGEN_3";

ban[4] = new Image();
ban[4].src = "URL_IMAGEN_4";
enl[4] = "URL_IMAGEN_4";

indice = Math.random() * (ban.length);
indice = Math.floor(indice);
...


Si por casualidad lo de que las imágenes se muestren de forma aleatoria no os conviene, entonces simplemente eliminar del script las dos últimas líneas que se ven en el último trozo de código que os hemos puesto; las que asignan valores a la variable INDICE.

Lo que aquí se reproduce está preparado para copiar en un gadget tipo HTML/JavaScript.


Bloctoc. Script para hacer un índice.

05/12/2009
En su momento se explicó cómo construir un índice interactivo que incluía una relación completa de nuestros posts, ordenada por títulos y que además permitía reordenar por ese mismo parámetro, por fecha o incluso aplicar un filtro por etiquetas.

Laura nos hacía ver hace unos días, que el código facilitado entonces no funcionaba ahora. Como cada vez se "pierden" más scripts y de los sitios de alojamiento no se puede uno terminar de fiar, he decidido salvarlo en Google Docs como fichero de texto y este sería el enlace para aquel que lo necesite.

Os recuerdo la forma de implantarlo en la propia plantilla para no depender de servicios externos.

En primer lugar, antes del </head>, insertamos todo el código del fichero txt y que se corresponde con el script bloctoc.js de Beautiful Beta. He aprovechado para traducirlo al castellano.

Guardamos los cambios en la plantilla y ahora creamos una Nueva Entrada (con fecha atrasada mejor) y allí copiamos esto otro:

<table align="center"><tbody><tr style="margin: 0px auto; text-align: center;"><td><div id="toc"></div><div id="toclink"><a href="javascript:showToc();" id="imgTocLink">CLICK PARA DESPLEGAR INDICE</a></div><script src="http://NOMBRE_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=500&amp;callback=loadtoc"></script><script src="http://NOMBRE_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=501&amp;max-results=500&amp;callback=loadtoc"></script></td></tr></tbody></table>

NOMBRE_BLOG tiene que ser sustituido por el nombre que lleva la dirección de vuestro blog. Si copiais todo excepto lo que está en gris, teneis para mostrar hasta 500 entradas. Con el código en gris llegareis hasta 1000. Siguiendo el mismo esquema se puede ampliar esta cifra, como podeis ver en este ejemplo dónde se muestra el índice de un blog con más de 1.500 entradas publicadas.

En Opciones de Entrada podeis seleccionar la opción de No permitir comentarios si así lo quereis y ya Publicamos la entrada que formará nuestro índice. Podeis verla y comprobar que funciona.

Por último, copiamos la dirección del nuevo post y con ella creamos un enlace con el rótulo INDICE y/o un dibujo alusivo (en la barra lateral, en la cabecera... dónde apetezca). Si no hacemos esto, será difícil que alguien sepa que tenemos un índice.

<a href="URL_POST_INDICE">INDICE</a>


Para redondear la faena, sólo nos falta crear el estilo de nuestra tabla de contenidos para que salga con nuestro propio diseño. Estas son las clases que controlan toda la tabla. Habrá que insertar este código antes del ]]></b:skin> y después cambiar los valores con los colores, anchos, separaciones, etc. que queramos.

/* ESTILO INDICE ENTRADAS */
#toc {
border: 0px solid #990000;
background: #ffffff;
padding: 5px;
width:700px;
margin-top:9px;
text-align:center;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #990000;
color: #000000;
width:320px;
text-align:left;
font-size:12px;
}
.toc-header-col2 {
width:100px;
}
.toc-header-col3 {
width:280px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
text-decoration:none;
color:#cccccc;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:underline;
color:#000000;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3, .toc-entry-col1 a:link, .toc-entry-col2 a:link, .toc-entry-col3 a:link {
padding-left: 5px;
text-align:left;
color:#990000;
font-size:12px;
}
.toc-entry-col1 a:visited, .toc-entry-col2 a:visited, .toc-entry-col3 a:visited {
text-align:left;
color:#000000;
font-size:10px;
padding-left: 5px;
}


En breve. Problemas Blogger.

02/12/2009
Problemas sin solución... de momento.

SEGUIDORES
  • El gadget de seguidores lleva varios meses dando problemas a muchos administradores. La cosa es que en lugar de los iconos de los usuarios, simplemente se visualiza un espacio blanco.
    Puede ser que veas tu propio gadget y no veas los de otros blogs o viceversa. En mi caso, el gadget está en la parte inferior de la sidebar y puedo verlo desde un ordenador con Windows Vista y desde otro con XP, tanto con IE como con Firefox, Safari y Chrome. Sin embargo desde un tercer ordenador con XP, sólo lo veo con los dos últimos.
    En la lista de problemas conocidos Blogger desde el 28 de Julio.
    He comprobado que quitando SCRIPTACULOUS y PROTOTYPE, el gadget se recupera totalmente, pero el caso es que los scripts los tengo instalados desde hace tiempo y cuando incorporé el artilugio, pasó mucho tiempo sin ningún problema. Un buen día, sin razón aparente, empezaron los problemas, por lo que me inclino a pensar que algo cambió en el código de Seguidores y eso es lo que ha generado los problemas.
    Si también tienes problemas con este gadget, rellena este formulario para ayudar a Blogger (y a nosotros mismos) a localizar las causas.

  • Chapucilla para disfrazar -que no arreglar- el problema anterior.
    Eliminar el gadget y crear en su lugar un enlace en la barra lateral con esta estructura:

<a href="http://www.blogger.com/follow-blog.g?blogID=número identificador del blog" target="_blank"><img src="url de la imagen"/></a>

  • Pincha en esta imagen para ver el resultado:
    Se puede poner una imagen como la del ejemplo o una captura de un gadget de seguidores cualquiera con sus avatares como la del principio de este post.


COMENTARIOS

  • En las entradas con muchos comentarios, a partir de un número sin determinar (sólo cuatro o cinco en ocasiones), las imágenes de perfil (avatares) de los comentaristas, no se ven. En su lugar aparece un espacio en blanco del tamaño predefinido.
    En la lista de problemas conocidos Blogger desde el 19 de Octubre.

  • Una solución transitoria para evitar el hueco, sería insertar la siguiente clase antes de ]]></b:skin>

#comments-block .avatar-image-container {
background:url(URL_IMAGEN_SUSTITUTIVA) transparent no-repeat 50% 50%;
}


BUSCADOR

  • Este ya es más extraño y todavía no he visto que Blogger se preocupe de él. El cuadro del buscador integrado (gadget Blogger) no termina de aparecer, quedándose indefinidamente con el mensaje "cargando".
    Al instalar una plantilla nueva (mediante un fichero .xml) que incorporaba el código del gadget, ya me ha ocurrido esto en dos ocasiones para todas las páginas, aunque lo normal es que pase de manera intermitente sólo con algunas. No he encontrado el motivo ni por supuesto, la solución. Desinstalarlo y volverlo a instalar no da resultado. En este blog, desde la página inicio y en acceso directo a las entradas individuales, parece que no existe problema. Sin embargo, accediendo a las entradas a través de los resultados del buscador, generalmente sí. Realmente no hay un patrón claro de en qué casos se queda colgado.

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