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

Post aleatorio






Nos tomamos una Semana... Santa

27/03/2010
Hacemos un pequeño receso para disfrutar de la Semana Santa. Salvo que surja algún nuevo desastre en Blogger, la Antártida termine de fundirse por completo o algo por el estilo, no publicaré entradas hasta después de las vacaciones. Intentaré ir contestando a vuestras consultas según pueda.

A disfrutarlas todos...


Gadget enviar entrada por correo

26/03/2010
Como cada vez hay más plantillas prefabricadas disponibles para Blogger, también es cada vez más frecuente descubrir que nos falta alguna pequeña utilidad de las que incorporan las plantillas "oficiales".

Por ejemplo, Ridany echó de menos en su plantilla nueva, el sobrecito al final de las entradas, que sirve para el envío de un enlace por correo.

Es cierto que últimamente lo más habitual es enviar este tipo de cosas a Twitter, Facebook y otras redes sociales, pero todavía hay gente que simplemente quiere enviar a un amigo el link por correo, así que tras una comprobación previa, vamos a ver si tenemos el código necesario y si no, lo reponemos.

La comprobación se hace desde Diseño > Elementos de página > Entradas del blog > Editar. Una vez en la ventana emergente Configurar entradas del blog, tenemos que ver que la opción Mostrar enlaces para el envío de entradas, está seleccionada. Si no es así lo hacemos.


Si con eso ya vemos nuestro sobre en las entradas, hemos terminado, pero si no es así, entonces tendremos que comprobar también si tenemos este código:

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

Esto es lo que monta el icono del sobre, que incluye un enlace al formulario de Blogger que facilita el envío. Si con Plantillas de artilugios expandidas no lo encontrais, es bien seguro que tendreis que añadirlo manualmente.

¿Y dónde colocar esto? Pues su lugar natural es dentro de post-footer (pie de la entrada) o en cualquiera de sus post-footer-line post-footer-line-X, aunque nada impide ponerlo al principio de la entrada, bien en el post-header o incluso en el título (post-title). Lo importante es que esté dentro del cuerpo de la entrada, por lo cual, si teneis el código pero tras marcar la opción que se explica al principio, sigue sin funcionar, entonces lo que habrá que hacer será reubicarlo.

Y yaque estamos con esto, si quereis personalizarlo un poco, sólo teneis que sustituir la dirección del gif que es
http://www.blogger.com/img/icon18_email.gif
por vuestra propia imagen.


Reparar blogumus... otra vez :)

24/03/2010
Los que tuvierais instalada Blogumus, la nube de etiquetas 3D para Blogger basada en la original Cumulus de Roy Tank, probablemente habreis podido comprobar en vuestras carnes que el gadget ha desaparecido.

No sé si se trata de algo temporal o que el creador -o incluso su hosting- se han hartado de que todos tiráramos del mismo fichero: tagcloud.swf. Porque este es el único problema, que el flash que generaba la nube no está ahora mismo operativo. Podeis comprobarlo pinchando en el enlace anterior.

La solución, siendo fácil, tiene una parte buena y otra regular...

La buena es que para restituir el artilugio, sólo tenemos que sustituir en el código original, la dirección del fichero .swf alojado en Halotemplates por otra que sí funcione.

La parte regular es que sólo podemos controlar del todo el fichero si lo realojamos en un hosting propio y esto en Blogger no lo podemos hacer, por lo que tendremos que utilizar servicios externos, dependiendo absolutamente de lo que estos servicios decidan hacer en el futuro con nuestros ficheros: ver caso SkyDrive, ver caso Google Pages, ver caso Lycos, ver...

Hoy por hoy, el único sitio gratuito que conozco dónde podemos alojar ficheros flash y que funcionen mediante un embebido como el que nos ocupa, es Google Sites, cosa que casualmente vimos hace unos pocos días. Alguien me comentó que también se podía hacer en Google Docs, pero no termino de ver cómo poder aprovechar ese alojamiento para mostrar swf en nuestros blogs. Si alquien lo sabe que lo diga y no se lo guarde.

Teniendo en cuenta esto, para reparar el gadget tenemos que hacer lo siguiente:
  • descargar el archivo tagcloud.swf
  • alojarlo en nuestro servicio (Google Sites?)
  • copiar su nueva dirección
  • editar el código de la nube
  • sustituir la dirección http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf por la nueva dirección

Ya tenemos de nuevo la nube...



Actualización: Para poder repararlo, primero teneis que tener instalado el gadget. Este post no es para explicar cómo poner la nube, sino para arreglarla en caso de que os haya fallado después de estar funcionando. El código para instalarla lo podeis encontrar en Blogumus definitivo o en los enlaces que allí encontrareis.


Enlazar en ventana nueva a petición

22/03/2010
Hace unos días hablábamos sobre la inconveniencia de que todos nuestros enlaces se abrieran en nueva ventana, pero quizás algún lector por los motivos que sean, lo prefiera así. Como siempre van a coexistir los que gustan de ello y los que no, una manera de solucionar esto sería preguntando a cada uno. O bueno, más que preguntar -algo difícil de hacer con un blog- lo que realmente haremos será dejar a su elección el tema.


Para ello vamos a crear un pequeño formulario que sólo incluye una casilla de verificacion con el texto "Abrir enlaces externos en ventana nueva" y un script que leerá el contenido de esa casilla y actuará en consecuencia. Además, el script graba una cookie para que la elección del usuario se sostenga en el tiempo hasta que decida revocarla.

Como es un poco largo, el código completo lo teneis disponible en este fichero txt y sólo teneis que copiarlo en un nuevo gadget tipo HTML/JavaScript.

Antes de guardar, tendreis que modificar unas pocas líneas:

// estas URLs seran consideradas internas y se ignoraran
var url_1 = "http://TUBLOG.LOQUESEA.COM";
var url_2 = "http://OTRADIRECCION.ES";

En lo anterior teneis que poner la dirección de vuestro sitio para que los enlaces que apuntan a él, no se abran en ventana nueva. Podeis incluir una segunda dirección para que ocurra lo mismo. Por ejemplo, si teneis un buscador interno ahí puede ir su dirección.

// Preferencia por defecto:
// El valor "true" abre los enlaces en nueva ventana por defecto, "false" los abre en la misma
var open_blank_default = true;

Los comentarios ya lo indican. Si cambiais a FALSE, la opción marcada por defecto será que los enlaces se abran siempre en la misma ventana... y viceversa

// Titulo Blog - se usa solo para no crear interferencias con las cookies
// No espacios, ni caracteres especiales
var site_title = "NOMBREBLOG";

Lo que pongais ahí será el nombre de la cookie. Para no coincidir en nombre con otra galletita, lo recomendable es poner el nombre de vuestro blog.

El script es de Noscope, la traducción la ví en La Blogería y si quereis añadirlo directamente a la plantilla, lo teneis en Ciudad Blogger.


Alojar ficheros SWF en Sites Google.

19/03/2010
Como me voy de puente, dejo este post programado para comprobar si funciona el alojamiento de ficheros .swf (flash)(*) en Google Sites.



Si todos lo veis correctamente, para poder guardar allí vuestros ficheros, sólo teneis que registraros (con una cuenta Google no es necesario), crear un sitio y luego añadir una página tipo Archivador. A partir de ahí, sólo es cuestión de ir añadiendo los archivos que necesiteis.


A la vuelta ya comprobaré que tal ha ido, porque lo que no tengo claro es si hay un límite en cuanto a ancho de banda consumido ;)

(*) Ya vimos el código para insertar un flash en un post...


Abrir enlaces en nueva pestaña. To be or not to be.

17/03/2010
Es sencillo crear un enlace que se abra en una pestaña o ventana nueva, porque para ello sólo hay que incorporar un TARGET en el propio enlace:

<a href="DIRECCION" target="_blank">Texto enlace</a>

También es bastante fácil hacer que TODOS los enlaces se abran en ventana nueva sin necesidad de editarlos, incorporando esto después de <head>

<base target="_blank" />

Pero...

Lo de configurar los enlaces de una web para que se abran en una nueva pestaña, puede parecer en un principio una simple cuestión de gustos, pero existe un problema: el gusto que controla la decisión final es el del administrador de la web, pero el que realmente lo va a disfrutar/sufrir es el usuario, que quizás tenga otra opinión distinta al respecto.

Supongo que la intención de quién utiliza este sistema es evitar en lo posible fugas de visitas: "si vienen a mi blog y les facilito el cierre del mismo abriéndoles en la misma pantalla una página nueva, parece que estoy haciendo el canelo ¿no?"


Pues no. Si obligas a tus lectores a abrir pestañas/ventanas que no deseaban, puede que incluso estés haciendo algo contraproducente y consigas el efecto contrario al deseado. Yo soy uno de esos a los que cuando va conduciendo su coche, no le agrada que de repente alguien le coja el volante y le haga ir por otro camino.

Cuando encuentro algo que me interesa, sé que existe el boton derecho de mi ratón y que con él puedo abrir cualquier enlace en una nueva pestaña. Tras verlo, lo más normal es que continue con el artículo original sin problemas. Cuando sin embargo no me interesa el contenido, probablemente ni siquiera llegue al primer enlace y cierre directamente la ventana en cuestión, por lo que tampoco necesito que programen un _blank para mí.

Sólo en muy contadas ocasiones puede ser interesante hacer esto para una acción puntual: visualización de ejemplos, ficheros txt para copy-pastear, descargas, una broma... Pero ¿no valdría también mostrar este tipo de cosas en una ventana modal que queda como más elegante? Cualquiera de estas dos últimas opciones son buenas según qué casos, pero siempre sin abusar.

Otra razón que desaconseja el uso de TARGET para los que gusten de cumplir los estándares, es que la W3C tiene desaprobado actualmente el uso este atributo como parte de los enlaces.

Creo que está bastante claro que yo me inclino por el "not to be" ¿y tú?


Nueva función. Maquetador Blogger.

15/03/2010
Con el retraso que me caracteriza puesto que ya muchos han hablado de ello (Rosa, Gem@ y J.Miur... entre otros), ayer me puse a experimentar un poco con el Diseñador de Plantillas, la nueva utilidad que Blogger nos ofrece para que podamos armar fácilmente nuestro propio blog.

De momento, lo del diseñador está sólo disponible desde Blogger en borrador (Blogger in Draft), el sitio de los experimentos de Blogger, por lo que habrá que utilizarlo con las reservas propias de cualquier nueva aplicación todavía en pruebas. De hecho, lo más recomendable es que vuestras pruebas las hicierais desde un blog de idem. Cuando entreis en Draft, desde la pestaña Diseño, a la derecha del todo teneis el link.

Como es muy intuitivo y viene en castellano, no voy a entrar a explicar cómo utilizarlo, pero sí que quiero destacar que para mi gusto, lo mejor de todo es el apartado de Diseño. Desde aquí, por ejemplo, se puede modificar el número y la posición de las columnas de la plantilla, con una cantidad escasa pero suficiente de opciones. Con esto ya no hace falta saber de HTML para añadir una nueva columna. También desde aquí se puede ir cambiando el formato del pie de página, así como el ancho de los distintos elementos.


Por supuesto, hay unas cuantas plantillas-base para comenzar a diseñar y unos apartados para cambiar fondos, colores y fuentes de todas las capas. Las plantillas son pocas, pero como de lo que se trata es de tener el esqueleto del blog, no tenemos porque preocuparnos por las imágenes que forman el diseño definitivo. Eso ya lo podremos cambiar después al modo tradicional, es decir, peleándonos con la plantilla. Lo útil de esto es poder formar fácilmente la estructura principal.

Las modificaciones se muestran de forma dinámica, a través de una vista previa que incluye todos los cambios efectuados. Mientras no se guarde nuestra plantilla real no cambiará, así que en un principio, no debería haber mucho riesgo en trastear este invento.

Tengo que confesar que, de forma temeraria por mi parte ;), he hecho pruebas con mi plantilla real y no con una de pruebas, por eso he comentado lo anterior. Las cosas que me han salido no están del todo mal, aunque ¿sería Oloblogger lo mismo si tuviera estas pintas? :)


Escribir tu blog con tu propia letra

12/03/2010
Aprovechando utilidades como Cufón que os permite utilizar fuentes no estándar, podeis dar un paso más y utilizar vuestra propia letra para el texto de vuestro blog. Your Fonts es uno de los servicios gratuitos DE PAGO que hacen posible esto.

Actualización: El servicio era en un principio gratuito, pero actualmente cobran entre 10 y 14$. Siento el error. Entre los enlaces que se facilitan al final de la entrada hay algunos servicios gratuitos pero no ofrecen el mismo resultado que este.


Los pasos a seguir se indican en la propia web de Your Fonts y básicamente consisten en descargarse una planilla, rellenarla con nuestra letra, escanearla, subirla y esperar a que la nuevafuente .ttf esté disponible para descargarla en nuestro ordenador.

Si queremos usarla en nuestro blog, ya tendremos que aplicar algún otro servicio como el que vimos (Cufón), pero nada impide que la instalemos también en el sistema operativo para que esté disponible para procesadores de texto y otros programas.

Hay un par de planillas disponibles dependiendo del tamaño de nuestro escáner (carta y A4) y también hay unos ejemplos de cómo se debe rellenar y de qué es lo que debemos evitar para conseguir un buen resultado.

Otros servicios parecidos para diseñar fuentes:
  • Fontifier. Muy similar al anterior.
  • FontStruct. Para diseñar tu propia tipografía. Puedes también descargate las que otros usuarios han diseñado previamente.
  • BitfontMaker. Como el anterior pero más limitado en cuanto a posibilidades.
  • Font Creator. Programa para trabajar en local.


Numerar comentarios en Blogger.

10/03/2010
Hace ya tiempo que este truco anda en danza, pero quizás por eso, se encuentra perdido en los archivos de varios blogs y no lo encontrais. Servidor lo aprendió hace bastante de Vagabundia, en su entrada Blogger y los comentarios (1), en el que además explicaba cómo hacer para que fueran saliendo de distinto color los comentarios pares e impares.

Para ponerle un numerito ordinal a cada uno de los comentarios de una entrada, vamos a necesitar una variable inicialmente a cero y un pequeño script que irá sumándole 1 a su valor cada vez que se "imprima" un comentario. Luego recuperaremos esa variable y pondremos ese número dónde nos convenga.

Todos los comentarios son creados mediante un loop (bucle) que va realizando repetitivamente la misma tarea: busca el primer comentario, muestra todos los datos relacionados con él (autor, avatar, texto, fecha...) y cuando termina, busca el siguiente comentario. Esto lo hará hasta terminar con todos los comentarios existentes.

Por tanto, en primer lugar, buscamos el bucle en cuestión (plantillas de artilugios expandidas) y que está redactado como <b:loop values='data:post.comments' var='comment'>. Justo antes de esa línea, insertamos:

<script type='text/javascript'>var contadorComentarios=0;</script>

Esto lo único que hace es crear una variable llamada contadorComentarios y asignarle el valor cero. Ahora buscamos este otro trozo e insertamos lo marcado en verde:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<!-- Numerar comentarios -->
<div class='comentacontador'><a expr:href='&quot;#comment-&quot; + data:comment.id' title='Enlace al comentario'><script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios);
</script></a></div>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Este otro código suma una unidad a la variable cada vez que se pasa por el bucle (cada vez que se muestra un nuevo comentario), lo muestra y, a la vez, incluye un enlace en dicho número al propio comentario, que es el mismo que habitualmente lleva la fecha al pie de cada uno. Este link sirve para poder enlazar a cualquier comentario publicado.

Ahora sólo nos queda darle estilo a nuestro numerito. La clase que hemos utilizado es comentacontador, así que ese será también el nombre que tendremos que usar en la parte CSS (antes de ]]></b:skin>). Como los números son a su vez enlaces, utilizaremos el ancla (a) y un efecto para cuando se pase el puntero por encima (hover). A continuación un simple ejemplo:

.comentacontador a {
float:right;
margin-top:-20px;
margin-right:20px;
font-size: 18px;
color: #999999 !important;
text-decoration:none;
padding:0px 4px;
}
.comentacontador a:hover {
color: #333333 !important;
}


Esta última parte la tendreis que ajustar en función de vuestro propio diseño.


Descripción del blog en buscadores. Etiquetas META.

08/03/2010
Una vez más este post se hace a demanda, ya que en diversas ocasiones me habeis preguntado cómo se hace para que aparezca una descripción del blog en los resultados de un buscador.


La cosa es bien fácil y sólo se trata de utilizar etiquetas META y una de ellas en concreto: DESCRIPTION. Estas etiquetas sirven para facilitar información de distinta naturaleza sobre una página y se deben colocar a continuación del <head>. Las dos quizás más importantes son:

<meta name='description' content='Blogger para torpes... y para no tanto. Ayuda para blogs.' />

Description. Es una frase descriptiva del contenido de la página. En general, para esta y otras etiquetas, no es adecuado usar más de 150 caracteres. Lo marcado en verde es lo que hay que personalizar.

<meta name='keywords' content='blogger, html, css, trucos, ayuda blog'/>

Keywords. Son las palabras clave. Estas ayudarán a los buscadores a relacionar determinadas búsquedas con tu sitio. Pueden ser palabras (blogger) o conjuntos de palabras (ayuda blog), siempre separadas por comas. Mucho se escribe sobre la conveniencia de hacerlas de una u otra manera, pero lo esencial es que reflejen el contenido de la web dónde se incluyan. No es conveniente extenderse demasiado, repetir palabras innecesariamente (podría ser incluso penalizado) o utilizar palabras que no identifican vuestro contenido simplemente por conseguir visitas (por ejemplo, incluyendo "sexo"). Esto generaría quizás más tráfico, pero serían visitas de pinchar, ver y salir corriendo.

Hay otras etiquetas META que sirven para indicar otro tipo de información a los spiders:

<meta name='title' content='Oloblogger'/>
<meta name='author' content='Oloman'/>
<meta equiv='content-language' content='es'/>

Las anteriores ofrecen respectivamente información sobre el título de la web, el autor y sobre el idioma en que está escrita la página.

Hay otra etiqueta interesante si por algún motivo se quiere ocultar cierto contenido a los ojos de los buscadores:

<meta name='robots' content='all'/>

El valor de content puede ser:
  • all para que el robot tenga en cuenta esta página y pueda seguir sus enlaces. Este es el valor predeterminado si no se incluye esta etiqueta.
  • index para que se indexe la página
  • noindex para que no la tenga en cuenta.
  • follow para que pueda seguir los enlaces que haya en la página.
  • nofollow lo contrario de follow.
  • none que es lo mismo que usar noindex, nofollow
Otra utilidad de estas etiquetas es la de poder redireccionar una dirección para que cuando se visite, el navegador lleve automáticamente a una segunda dirección:

<meta http-equiv='refresh' content='10;URL=http://otradireccion.htm'/>

El número 10 indica el tiempo en segundos durante el cual se mostrará la página inicial antes de redirigir a la otra y se puede cambiar por cualquier otro valor. Esto es por si se quiere poner un aviso sobre que el usuario va a ser redirigido o algo similar y que dé tiempo de leerlo. Se puede poner cualquier valor y 0 servirá para una redirección instantánea.

Hay bastantes más pero probablemente con poca o ninguna utilidad actualmente. En WebMarketingNow (en inglés) podeis ver una relación bastante completa así como la conveniencia o no de usarlas.

En un principio, cada página debería tener personalizadas sus etiquetas META, de manera que su título, keywords, etc., estuvieran en consonancia con su contenido. Esto es porque sin duda, cada una de las páginas de vuestro espacio tiene siempre un contenido distinto con respecto del de las demás páginas. Sin embargo, en Blogger todas las páginas tienen las mismas etiquetas META, debido a que todo las que ponemos en la plantilla, se replica con los mismos valores a todas las entradas o grupo de entradas.


Problemas que se solucionan solos... ¿o no?

05/03/2010
Hay un par de cosas relacionadas con Blogger que actualmente están causando muchas consultas y unos quebraderos de cabeza evitables. Y digo evitables porque precisamente los problemas que los causan no lo son... o casi. De esta manera, si no puedo evitarlo, ¿por qué calentarme el coco con ello?

Por un lado tenemos el caso de los comentarios. A muchos usuarios de Blogger desde hace unos días, les viene pasando que no coincide el número que resume la cantidad de comentarios recibidos por entrada, con la cantidad real de comentarios que ese post tiene. Lo normal es que aparezcan menos de los que realmente hay. De momento no tengo constancia de lo contrario.

El problema parece que proviene de la propia plataforma, ya que la coincidencia en el tiempo de este mismo error para distintas personas, creo que es un indicio bastante sólido de ello. Además, algunos de esos blogs no han hecho siquiera cambios en sus plantillas, por lo que la hipótesis de la metedura de pata del administrador, queda totalmente descartada.

Aunque en Problemas Conocidos de Blogger, no hay nada todavía sobre esto, en el foro de ayuda sí que ya hay consultas sobre la desaparición de comentarios.

Solución: Esperar sin hacer nada. En el pasado Noviembre ya ocurrió lo mismo y se arregló pasados unos días. De momento no está en nuestra mano la solución.

La segunda cuestión es más peliaguda, porque aunque sí puede ser solucionada por nosotros, tampoco están demasiado claros los parámetros que nos permitirán hacerlo. Hablamos ahora de la autopaginación.

Blogger Buzz nos comunicó hace un par de semanas, que iba a limitar el peso de las páginas alojadas en su sistema mediante lo que denominaron Auto Paginación. La finalidad es muy noble: acelerar la carga de las páginas. Los medios quizás no tanto: cortar las páginas por dónde convenga para que ocupen menos y desplazar las entradas a otras páginas posteriores.

Este es el motivo por el cual aunque tengas programados por ejemplo 10 posts por página (a través de la opción Configuración > Formato > Mostrar X Entradas por Página), sólo te salgan 6, 5... ó 3... ó 2...

De inicio, lo más conveniente por diversos motivos es que nosotros mismos seleccionemos no mostrar demasiadas entradas por página. El número en cada caso depende del contenido de cada post, porque no es lo mismo que todos sean poesías cortas, citas o una sola imagen , que escribir una novela en cada entrada y además ilustrarlo con imágenes párrafo a párrafo. En los casos de entradas cargaditas de contenido, normalmente más de cinco posts hacen interminable la lectura y, por supuesto, muy pesadas las páginas. Aquí hay recorte casi seguro.


Y lo de casi es porque no se sabe todavía a ciencia cierta cual es el criterio para cortar o no cortar. Personalmente, tampoco sé si cuando se aligera el blog, automáticamente se reponen las entradas efectivamente programadas por nosotros o hay que esperar a que Blogger detecte que lo hemos hecho. Actualización: Cuando se aligera el blog lo suficiente (?), se van recuperando entradas hasta el número máximo programado, de manera inmediata (gracias por la info, Pizcos).

Solución: Aligerar nuestras páginas y rezar algo...o bien dejarlo todo como está y que corten por donde convenga. En estas entradas de Pizcos y Vagabundia, podeis ver algunos consejos sobre cómo hacer lo primero.


Fijar sin usar FIXED.

03/03/2010
Este pequeño trabalenguas de título, intenta ser una descripción breve de lo que vamos a hacer: fijar un elemento en un lugar determinado de nuestra página, pero sin usar POSITION:FIXED.

¿Pero por qué no usar FIXED siendo tan fácil su aplicación? Pues realmente por muy poca cosa y es que ¡esta propiedad no funciona en IE6! De momento todavía queda gente que usa esta versión, así que si queremos que vean las cosas cómo las personas decentes ;) no nos queda
más remedio que suprimir de nuestro catálogo el susodicho FIXED.


El truco consiste en aplicar a toda la página, un DIV que ocupe el 100% del alto y del ancho disponible. Esta capa incluirá un OVERFLOW:AUTO para generar el scroll de todo el contenido. El DIV que contendrá el elemento que pretendemos fijar, será lo único que quede fuera del anterior.

Para no alterar mucho las propiedades de nuestro BODY y poder quitar todo esto fácilmente en el futuro, el estilo necesario lo vamos a meter antes de </head>. Podría ser que por las características de vuestra plantilla, este código produjera problemas de desplazamiento en alguna capa, especialmente si incluye la propiedad POSITION. Pero como con Vista Previa podeis ver cómo queda la cosa antes de grabar, pues eso... ¡adelante!

<style type='text/css'>
* {margin:0; padding:0;}

html, body {width:100% !important;
height:100% !important;
overflow:hidden !important;
}

#contenido {width:100%;
height:100%;
overflow: auto;
}

#fijo {position:absolute;
width:150px;
height:300px;
border:1px solid #000;
background:#cff;
left:50%;
margin-left:-310px;
top:50%;
margin-top:-150px;
z-index:200;
}
</style>


Los valores de las propiedades de #FIJO pueden ser alteradas según nuestras necesidades, pero siempre incluyendo POSITION:ABSOLUTE, TOP (ó BOTTOM), LEFT (ó RIGHT) y los márgenes para reubicar el elemento. Z-INDEX puede hacer falta o no, dependiendo de si se usa en otras capas de la página.

Ahora ya sólo nos queda insertar después de <body> el DIV con ID FIJO y meter dentro de la capa CONTENIDO el resto de nuestro código,

<body>

<div id='fijo'>TEXTO O LO QUE QUERAMOS</div>
<div id='contenido'>

CODIGO ORIGINAL
...

</div>

</body>


Esto lo hemos aprendido en Recursos CSS.


Ampliar miniaturas con CSS

01/03/2010
Lo que vamos a hacer no es literalmente lo que el título promete, pero sí que vamos a conseguir ese mismo efecto.

La cosa es que en el truquillo que vamos a utilizar, la sensación será la de ampliar una miniatura al pasar el puntero por encima de ella, pero realmente lo que haremos será "esconder" mediante propiedades CSS, la mayor parte de la imagen, de manera que la porción que se verá hará de miniatura. Posteriormente, mediante las propiedades del HOVER conseguiremos que la imagen vuelva a mostrarse completa.



Todo se basa en CSS por lo que crearemos una clase nueva (.miniatura), que luego aplicaremos a nuestras imágenes. La asociaremos al tag que forma los párrafos (P) para una mayor faciidad en su aplicación:

p.miniatura{
float:left;
margin:0;
background:#000000;
border:1px solid #000000;
padding:2px;
}
p.miniatura a {
display:block;
float:left;
width:100px; /* Tamaño miniatura */
height:100px;
line-height:100px;
overflow:hidden; /* La miniatura no sobrepasará los límites */
position:relative;
z-index:100; /* Valor inferior al que lleve el HOVER */
}
p.miniatura a img {
float:left;
position:absolute;
top:-50px; /* Desplazamiento sobre esquina superior izquierda */
left:-150px;
}
p.miniatura a:hover { /* Lo que ocurrirá al pasar el puntero */
overflow:visible; /* Se permite que la imagen rebase los límites */
z-index:200; /* Valor superior al que lleve el enlace */
border:0px;
}
p.miniatura a:hover img {
border:5px solid #000000;
background:#ffffff;
padding:2px;
/* La imagen grande se desplaza un poco para poder ver las miniaturas */
top:30px;
}

Una vez creado el estilo, ya lo podemos aplicar a cualquier imagen que insertemos en cualquier parte del blog. Necesitaremos asignarle un tag de párrafo con la clase miniatura y añadirle un enlace vacío. Si se desea, el enlace puede ser a una dirección.

<p class="miniatura"><a href="javascript:void();"><img style="width:400px;" src="URL_IMAGEN"/></a></p>

Como veis, la imagen puede incluir un WIDTH para forzar su salida con determinado tamaño. Esto es útil si queremos aplicarlo a una especie de galería de imágenes y no queremos tener que editarlas previamente para hacerlas del mismo ancho.

El truco no funcionará si alguna capa contenedora superior tuviera una propiedad overflow:hidden. En este caso, no lograríamos que se viera la imagen original y la única solución sería cambiarlo a overflow:visible, aunque dependiendo de las plantillas, eso puede estropear otras cosas. Es cuestión de probar. En las plantillas Blogger, el content-wrapper suele tener este atributo.



Y esto lo hemos aprendido en CSS Globe, dónde podeis ver cómo hacer lo mismo mediante listas.

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