Contraer y expandir entradas

Cuando tenemos muchas entradas publicadas en nuestro blog y las categorías están rebosantes de texto, puede hacerse pesado (para nosotros y para nuestros lectores) ir dándole a la ruleta del ratón o a la barrita del lado derecho del explorador para bajar y leer los títulos de las entradas, hasta dar con el que nos guste o busquemos. Para esto hay una solución: utilizar un código que muestre sólo el título de las entradas, ocultando el texto, y nos permita abrir (expandir) sólo aquella que nos interese.

En este blog, por ejemplo, no lo he aplicado, de modo que si seleccionáis una categoría (en "se ha escrito sobre..."), veréis las entradas completas y seguidas; pero en el otro blog que tengo -A quien le amarga un dulce- sí lo he aplicado:

Como véis, aparecen los títulos de las entradas precedidos del símbolo [+/-], juntas por día de publicación, y un pequeño cartelito en la parte superior de aviso de que las entradas están contraídas.



Me gustaría poder pegaros aquí el código que he utilizado en ese blog, para que hiciérais un corta y pega en la plantilla-código HTML del vuestro, pero me estoy volviendo loca probando el código en este blog, así que, de momento, os dejo tres sitios donde podéis encontrar la explicación (al fin y al cabo no es un código mío).


Trucos Blogger


Gema blog


Blog and Roll


Sólo un par de explicaciones:

Cuando os situéis en la plantilla HTML de vuestro blog, seleccionad la opción "expandir plantillas de artilugios" y ya luego buscar los códigos necesarios, por ejemplo < /head >. Para ello, utilizad la opción de búsqueda del navegador (presionadndo CTRL y la letra F del teclado, o en el menú Edición - Buscar en esta página), se abrirá una barrita en la parte inferior del navegador y una vez escribáis la palabra, se seleccionará en color en el texto.
Para encontrar rápidamente el texto:


<b:includable id='main' var='top'>

<!-- posts -->

<div id='blog-posts'>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><data:post.dateHeader/></h2>

</b:if>



escribid en el recuadro de búsqueda "post.date", resulta más rápido.



Si os da error por el script, probad a eleminarlo (desde < script > hasta < /script >), a veces funciona.



Seguiré probando, a ver si lo consigo, y si hay novedades, os cuento.

Bueno, pues hay novedades: conseguí poner el código en ese otro blog. Finalmente seguí las instrucciones de una de esas tres páginas que tenéis arriba. El problema estaba en que me lié más de la cuenta buscando los códigos, que estaban seguidos y pensé que no... En este blog lo estoy intentando pero me da errores,a pesar de que sigo los mismos pasos que en el otro sí funcionaron. Quiero aplicarlo aquí, así que seguiré intentándolo.
En resumen, si queréis aplicarlo en vuestro blog, acceder a una de esas tres páginas y seguid los pasos que allí se detallan. Debería saliros.... ¡Suerte!

Imagen que cambia al actualizar/cargar la página

Quienes hayan pasado por mi otro blog tal vez entiendan qué quiero expresar con este extraño y enrevesado título; si no lo has hecho, haz click aquí, fíjate en la imagen que aparece arriba a la izquierda y actualiza la página varias veces (desde el navegador o con la tecla F5). Comprobarás que con cada actualización aparece una nueva imagen.


Encontré el script (o código) en Logo aleatorio, de Gem@blog. La autora de ese blog ofrece un código "específico" para logos, no para imágenes, pero también funciona. Poco después me di cuenta de que todas las imágenes enlazaban a una misma página (no recuerdo bien si era el perfil de blogger o una página en blanco), pero lo que yo necesitaba era que cada imagen tuviese su propio enlace (más que nada porque no son imágenes mías y no quería tener problemas de propiedad intelectual), así que le pedí ayuda a Gema, quien, tan amable como siempre, me respondió enviándome el código modificado para conseguir ese resultado que deseaba.



Y sin más dilación, aquí tenéis el código javascript para conseguir este efecto:

<script language="JavaScript">



<!--



/*



Random Image Link Script



By Website Abstraction (http://www.wsabstract.com)



and Java-scripts.net (http://www.java-scripts.net)



*/





function random_imglink(){



var myimages=new Array()



//specify random images below. You can have as many as you wish



myimages[1]="URL de tu imagen"

myimages[2]="URL de tu imagen"

myimages[3]="URL de tu imagen"

myimages[4]="URL de tu imagen"

myimages[5]="URL de tu imagen"

myimages[6]="URL de tu imagen"



//specify corresponding links below



var imagelinks=new Array()



imagelinks[1]="URL de enlace para la imagen 1"

imagelinks[2]="URL de enlace para la imagen 2"

imagelinks[3]="URL de enlace para la imagen 3"

imagelinks[4]="URL de enlace para la imagen 4"

imagelinks[5]="URL de enlace para la imagen 5"

imagelinks[6]="URL de enlace para la imagen 6"



var ry=Math.floor(Math.random()*myimages.length)







if (ry==0)



ry=1



document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')



}





random_imglink()



//-->



</script>

Podéis poner tantas imágenes como queráis; el orden en que aparecen es aleatorio: puede repetirse una mucho y otra salir poco.

Cómo crear tablas

Las tablas que podemos crear en nuestro blog se basan en el código HTML. Es posible que ya hayáis utilizado alguna, quizás sin saberlo -no sería la primera vez que me ocurre a mí...

Para empezar lo primero que hemos de saber es que las tablas se crean mediante estas etiquetas:

<table>XXX</table>

Todo lo que situemos entre dichas etiquetas adoptará la forma de una tabla. Pero esto no es suficiente. La etiqueta table puede tener multitud de atributos, si bien el más importante es < tbody > < /tbody > (table body = cuerpo de la tabla), ya que sin ésta etiqueta dentro de la etiqueta table es difícil conseguir los efectos deseados. Vamos a ver cuáles son esos atributos:

Borde

Tamaño de la tabla

Alineacion del texto dentro de la tabla

Color e imagen de fondo

Separación entre celdas

Espaciado dentro de la celda

Celdas: filas y columnas

Ampliación: color de fondo para una fila o una celda

Borde

El borde de la tabla es translúcido por defecto y tiene un grosor determinado que podemos modificar. Para cambiar el color utilizaremos el atributo border, señalando entre comillas el número del grosor que deseamos para el borde general de la tabla:

<table border="1"><tbody><tr><td></td></tr></tbody></table> (tamaño por defecto)

<table border="5"><tbody><tr><td></td></tr></tbody></table>

<table border="9"><tbody><tr><td></td></tr></tbody></table>

Por el contrario, si lo que queremos es que el borde no sea visible el número a emplear será el 0:

Border="0"

Si lo que queremos es cambiar el color del borde utilizaremos el atributo bordercolor:

<table border="1" bordercolor="red"><tbody><tr><td></td></td></tbody> </table>

<table border="1" bordercolor="red"><tbody><tr><td></td></td></tbody> </table>

Tamaño de la tabla

El tamaño de la tabla se ajustará por defecto al contenido de la misma, pero podemos modificar su tamaño
en altura: height="número de pixeles",
y en anchura: width="número".

<table border="1" height="90" width="70"><tbody><tr><td></td></tr></tbody>/table>

<table border="1" height="60" width="150"><tbody><tr><td></td></tr></tbody></table>

El orden, por lo general, es: primero el borde (border), segundo la anchura (width) y tercero la altura (height), aunque, por lo general, el editor de texto de Blogger nos corrige los códigos en cuanto órden, así que tampoco le prestéis demasiada atención.

Color e imagen de fondo

El color de fondo de la tabla se añade mediante el atributo bgcolor (bgcolor="XX") dentro de la etiqueta de la tabla:

<table bgcolor="yellow"><tbody><tr><td></td></tr></tbody></table>

<table bgcolor="#ff3311"><tbody><tr><td></td></tr></tbody></table>

Mientras la imagen se añade con el atributo background (background="URL de la imagen"):

<table background="http://i176.photobucket.com/albums/w192/comerxcomer/florfondo.jpg"> <tbody><tr><td></td></tr></tbody></table>

Celdas: filas y columnas

En general, las tablas están subdivididas en filas y columnas, recibiendo el nombre de celda cada uno de los recuadros internos de las mismas. ¿Cómo se consigue crear filas y columnas en el HTML? Muy sencillo: con las etiquetas <tr></tr> (table row) creamos las filas y con <td></td> (table data) dividimos dicha fila en celdas, tantas como queramos. Veamos un ejemplo:

<table border="1"><tbody><tr>caballito de mar</tr></tbody></table>

caballito de mar

<table border="1"><tbody><tr><td>caballito de mar</td><td>pulpo</td><td>calamar</td></tr></tbody></table>

caballito de mar

pulpo

calamar

<table><tr><td>caballito de mar</td></tr><tr><td>pulpo</td></tr><tr><td>calamar</td></tr></table>

caballito de mar

pulpo

calamar

Alineación del texto dentro de la tabla

El texto que escribamos dentro de cada celda (td) puede ser alineado arriba, abajo, en el centro, a la derecha o a la izquierda. La alineación horizontal por defecto es la izquierda y la alineación vertical, en el centro. Para cambiarla nos situaremos en la etiqueta td y dentro de ella señalaremos la alineación horizontal, denominada align y la alineación vertical, valign (vertical align).

alineación por defecto: izquierda y centro

Alineación horizontal a la derecha	derecha	centro
<td align="right">XXX</td>	<td align="right">XXX</td>	<td align="center">XXX</td>
Alineación vertical en la parte superior	Arriba	Abajo
<td valign="top">XXX</td>	<td valign="top">XXX</td>	<td valign="bottom">XXX</td>

Podemos utilizar los dos atributos de celda juntos:

<table border="1"><tbody><tr><td align="center" valign="top"></td></tr></tbody></table></p>

Separación entre celdas

La separación entre celdas es de 2 pixeles por defecto, pero podemos modificar aumentarla mediante el atributo cellspacing (cellspacing="XX"):

<table border="1" cellspacing="4">

<tbody>

<tr>

<td>

Globo

</td>

<td>

Cometa

</td>

</tr> <tr>

<td>

balón

</td>

<td>

pelota

</td>

</tr>

</tbody>

</table>

Globo	Cometa
balón	pelota

<table border="1" cellspacing="10">

<tbody><tr><td>Globo</td>

<td>Cometa</td></tr>

<tr><td>balón</td>

<td>pelota</td></tr>

</tbody>

</table>

Globo	Cometa
balón	pelota

<table border="1" cellspacing="25">

<tbody>

<tr><td>Globo</td>

<td>Cometa</td></tr>

<tr><td>balón</td>

<td>pelota</td></tr>

</tbody>

</table>

Globo	Cometa
balón	pelota

Espaciado dentro de las celdas

Al igual que podemos modificar la separación entre las celdas, podemos hacer con el espacio existente entre los bordes de la celda y el texto o contenido de la misma. En este caso el atributo se denomina cellpadding (cellpadding="XX"):

<table border="1" cellpadding="9">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

<tr><td>Puma</td>

<td>León</td>

<td>Leopardo</td></tr>

</tbody></table>

Gato	Pantera	Tigre
Puma	León	Leopardo

<table border="1" cellpadding="15">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

<tr><td>Puma</td>

<td>León</td>

<td>Leopardo</td></tr>

</tbody></table>

Gato	Pantera	Tigre
Puma	León	Leopardo

Por supuesto, podemos mezclar el espaciado y la separación entre celdas en una misma tabla, al igual que, supuestamente, puede hacerse con cualquiera de los atributos de la tabla y las celdas, todo depende del resultado que busquéis y de las ganas que tengáis de complicaros... jaja


Como último dato, comentaros que las etiquetas pueden ir todas seguidas o en distinta línea, es indistinto, el efecto será el mismo si escribís:

<table border="1" cellpadding="15">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

</tbody></table>


Como si lo escribís así:

<table border="1" cellpadding="15"><tbody><tr><td>Gato</td><td>Pantera</td><td>tigre</td></tr></tbody></table>

(es posible que aquí el código se corte, pero os aseguro que está todo seguido)

Ampliación: color de fondo para una fila o una celda

Aquí os presento dos tablas de prueba con distintos colores de fondo, la primera por filas y la segunda de ellas por celdas. Esta segunda me ha dado problemas, al mezclarse los colores de fondo con el de la fuente del texto, no sé bien cómo quedarán cuando publique la entrada... Espero que os sea de ayuda.

prueba de color para esta fila	se supone que debe tener color rojo de fondo	de no ser así, a ver qué pasa y cómo puedo arreglarlo
nueva fila	esta vez sin color de fondo	para comparar con la anterior
y esta tercera fila	para comprobar si funciona	con color verde de fondo

<table border="3"><tbody>

<tr bgcolor="red"><td>prueba de color para esta fila</td>

<td>se supone que debe tener color rojo de fondo</td>

<td>de no ser así, a ver qué pasa y cómo puedo arreglarlo</td></tr>

<tr><td>nueva fila</td><td>esta vez sin color de fondo</td>

<td>para comparar con la anterior </td></tr>

<tr bgcolor="green"><td>y esta tercera fila</td><td>para comprobar si funciona</td>

<td>con color verde de fondo</td></tr>

</tbody></table>

celda con fondo color verde	celda con fondo color rojo	celda con fondo color #ff6600
celda sin color de fondo	fondo azul, letra color amarillo con font	celda sin color de fondo, letra color rojo con span

<table><tbody>

<tr><td bgcolor="green">celda con fondo color verde</td>

<td bgcolor="red">celda con fondo color rojo</td>

<td bgcolor="#ff6600">celda con fondo color #ff6600</td></tr>

<tr><td>celda sin color de fondo</td>

<td bgcolor="blue">

<span style="color:yellow;">fondo azul, letra color amarillo con font</span></td>

<td><span style="color: rgb(255, 0, 0);">celda sin color de fondo, letra color rojo con span</span></td></tr>

</tbody></table>

Barra lateral que desaparece o desplaza hacia abajo

Quería introducir brevemente un tema que me ha traído Karen al blog, al consultarme sus dudas y mencionarme dónde había encontrado la solución. No sé demasiado al respecto, así que me limitaré a describirlo, daros un enlace de ayuda y deciros en qué lugar de la plantilla podéis ir probando para buscar la solución.

Se trata de un tema que, al parecer, ha traído y probablemente siga trayendo problemas a los bloggeros: la barra lateral -o sidebar en inglés- que parece desaparecer y se nos desplaza hacia abajo, permaneciendo en su lado derecho o izquierdo, pero debajo de las entradas.

Aunque sólo sea por curiosidad os contaré que la existencia de distintas partes en nuestro blog (barra lateral, título, entradas y barra inferior) son en realidad páginas distintas, de ahí que en la plantilla tengan distinto nombre ("main", "sidebar", "title"...) cargadas desde lo que podemos llamar una página índice que las enlaza y nos permite verlas todas a la vez. Esto quiere decir que cada una de ellas puede (o al menos deberían poder) ser modificadas por separado.


La "página índice" tiene un tamaño determinado. Dentro de ella se encuentran la barra lateral y la barra principal (la de las entradas o posts) que, lógicamente, no pueden medir lo mismo, porque no cabrían, desplazándose la barra lateral hacia abajo; además, si la suma del tamaño de las dos, de la barra lateral y la principal, superase el tamaño máximo de esa "página índice" tendríamos el mismo resultado: una barra lateral desplazada hacia abajo.

Karen me comentaba que había conseguido solucionar su problema gracias a una entrada del Blog de blogs; imagino que se refería a ¿Por qué la sidebar se va hacia abajo? en cuyos comentarios podemos encontrar muchos datos valiosos sobre el tema, como, por ejemplo, que las imágenes demasiado grandes pueden provocar ese efecto de desplazamiento hacia abajo de la barra lateral.


Gracias a otro de los comentarios he podido acudir a la plantilla de mi blog y ponerme a experimentar, a ver qué resultado obtenía según los cambios que hacía.

La conclusión a la que he llegado es, como decía antes, que el tamaño o proporción de la barra lateral y de la barra principal tiene que estar compensado si no queremos que la barra lateral se nos desplace hacia abajo. Lo mejor, en mi opinión, es experimentar con la plantilla, utilizando las opciones "vista previa" y "borrar cambios" hasta que consigamos ver el blog como nos guste; y sólo entonces hacer uso de la opción "guardar plantilla" para guardar los cambios realizados. Por cierto, en todos los blogs de ayuda se aconseja guardar una copia de la plantilla en nuestro ordenador de modo que nos sirva de copia de seguridad en caso de que necesitemos borrarla entera y, así, no perdamos todos los cambios anteriormente realizados. Para guardar la plantilla sólo tenemos que usar la opción que nos da Blogger en Plantilla - Edición de HTML "Descargar plantilla completa".

Y dicho todo esto, si queremos intentar solucionar el problema de esa barra lateral que se desplaza hacia abajo o si, como quería Karen, queremos que haya más separación entre la barra lateral y barra de las entradas, acudiremos a Plantilla - Edición de HTML y buscaremos lo siguiente:

#sidebar-wrapper {

width:200px;

float:left;

font-size:87%;

padding-bottom:20px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Aquí podemos modificar el ancho de la barra lateral (width) que, en el caso de mi plantilla está en píxeles (width:200px). Podemos aumentarlo o disminuirlo. Si lo aumentamos demasiado puede que el efecto que obtengamos sea el que decíamos antes: que la barra lateral se coloque en su posición laterla pero debajo de todas las entradas. ¿Qué podemos hacer entonces? Disminuir el ancho de la barra de las entradas. Para ello buscaremos:

#main-wrapper {

width:450px;

float:right;

padding:100px 0 20px;

font-size:88%;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

y disminuiremos el ancho (width) de esta barra. Aquí, por ejemplo, es de 450; si lo disminuimos a 400 y hacemos click en "vista previa" veremos la diferencia.

Tened en cuenta que, a menos que necesitéis que la barra lateral sea más grande por alguna imagen o accesorio que incluyáis, no es necesario aumentar el ancho de la barra lateral, es suficiente con disminuir el ancho de la barra principal o de entradas (main-wrapper).



¡Y hasta aquí mis humildes y quizás confusas y confundidas explicaciones! Espero que os sirva de algo.

Contadores y estadísticas

A la mayoría de los que poseemos un blog nos gusta la idea de tener un contador de visitas, así como información acerca de dichas visitas: frecuencia, tiempo que permanecen en el blog, procedencia, búsquedas que han llevado al blog, etc. Por eso existen en Internet numerosas páginas que nos ofrecen este servicio de forma gratuita.

En mi otro blog podéis observar tres de estas páginas:

Ecoestadística. Página en castellano que, como su nombre indica, nos ofrece la posibilidad de conocer las estadísticas de nuestro blog o página web. Es necesario registrarse y añadir un código en nuestro blog. Las estadísticas pueden ser públicas o permanecer privadas para que sólo nosotros accedamos a ellas, variando así la imagen y el enlace que debamos incluir en nuestro blog. En este blog las estadísticas a través de esta página son públicas, podéis ver el icono de enlace en la barra lateral; mientras en mi otro blog son privadas. Los elementos que incluye esta página son: cuándo (visitas por mes, semana, día y horas del día), quién (de qué países proceden nuestros visitantes), navegación (duración de las visitas, entradas más visitadas de nuestro blog, sistema operativo y navegador empleado por los visitantes, tamaño de la pantalla), enlaces (origen de los mismos y búsquedas que han llevado a nuestro blog o web).

EstadisticasGratis.com. Otra opción en castellano que nos ofrece tanto estadísticas como contadores para nuestro blog o web. También es necesario registrarse. Dispone de más de 60 modelos de contadores entre los que poder elegir. Las estadísticas están divididas de forma similar a la página anterior: tráfico (mensual, diario, por horas y anual), teconología de los usuarios (navegador, sistema operativo), ubicación geográfica (país e idioma) y de dónde vienen (top refers, buscadores y páginas más populares). En este caso no existe opción de compartir públicamente las estadísticas, es un servicio privado (al menos hasta ahora).

Amazing counter. Si sólo queremos disponer de un contador, ésta es nuestra página. Hay numerosos modelos a elegir. Como en los anteriores, es necesario registrarse. La página está en inglés pero en tres sencillos pasos nos proporcionan el código que debemos incluir en el blog. Lo interesante de este contador, desde mi punto de vista, es que nos permite elegir entre incluir todas las veces que es visitada la web o blog, sean o no del mismo visitante -es lo que denominan "all hits"-, y sólo visitas de distintos usuarios -"Unique visits only". Aunque la página ofrece estadísticas, éstas son únicamente el número de visitas del blog por día.

Alex Sanhz nos propone los siguientes enlaces (para más información acudir a su blog: Contadores):

Globetrackr. Servicio gratuito que nos ofrece un contador con los lugares (países) de procedencia de quienes nos visitan.

Visitor Visualization. También en inglés. Ofrece un contador con un pequeño mapamundi en el que las visitas aparecen en diferentes colores según la antigüedad de la misma.

Pero disponemos de oras muchas opciones más.
Geo visitors. Parecido al anterior. Sólo hemos de copiar y pegar el código, aunque, lo cierto es que, después de probarlo, veo que no se visualiza directamente en el blog/web, sino que es necesario hacer click en el botón de enlace y que se abra una nueva pestaña o ventana para ver las visitas a nuestro blog.

Geo visita. En castellano. A través de su servicio podemos visualizar en nuestro blog o web un mapa mundi con las visitas on line en tiempo real y/o un pequeño globo terráqueo con las visitas recibidas. Para más información sobre cómo utilizar este servicio, consultad en esta entrada de Gema blog.

Contadorwap. Otra página más en castellano. Me resulta curioso haber llegado hasta ella desde Si quieres puedes, ya que sólo nos da un enlace y, a pesar de todos los que ya tenía, no era ninguno de ellos. (es que esto de las estadísticas está muy difundido por la web, por lo que veo...).

Buscando por la Comunidad de Ayuda para tu blog he encontrado esta otra página (in English): Site Meter, que nos ofrece un servicio básico gratuito de contador y de estadísticas, así como otros servicios más completos si aportamos algo de dinero. El servicio básico está bastante bien; es similar a los ya comentados anteriormente, si bien en este caso tenemos que visualizarlos en inglés: visitantes recientes (detalles, mapa, página de entrada y de salida), visitas (por día, en la última semana, mes, año), visitas y páginas vistas, ranking de páginas (de entrada y salida). Nos ofrecen cinco o seis tipos de contadores, podemos elegir el nivel de privacidad de las estadísticas entre medio y alto y, algo muy interesante, nos da la opción de ignorar nuestras propias visitas al blog, de forma que las estadísticas sean más realistas, más puras. Si queréis ver un ejemplo, podéis ver las estadísticas de este blog con este serivicio abajo, al final de la página.


Si lo que queremos es un contador de visitas en tiempo real (cuántos visitantes están en línea o conectados a nuestro blog/web), podéis utilizar, además de los ya mencionados arriba (Geo Visite): Geo visits.

Y si lo que buscas es un contador de cuenta atrás, Alex, que utilizó uno para el primer aniversario de su blog, nos aconseja ésta: Yourminis: Countdown Counter. No necesitamos registrarnos, sólo incluir los datos de nuestro "especial evento" y copiar y pegar el código.

¿Lo que te guscaría es un calendario lunar? Carolina de El blog de blogs nos da el enlace: Daily Moon Phases.

Las posibilidades son inmensas, así que dejo abierto el tema a futuras ampliaciones.