jesgo23: archivos

Si tenemos un blog con una sola sidebar una forma de ahorrar espacio al listar enlaces, etiquetas, archivos, etc. es listarlos a dos columnas.

Se puede conseguir fácilmente con muy poco css.

#sidebar .LinkList lu li controla los enlaces.

#sidebar .Label lu li controla las etiquetas.

#sidebar .BlogArchive lu li controla los archivos del blog.

En la plantilla mínima de blogger buscamos Sidebar Content y debajo tendriamos que añadir el siguiente código :


#sidebar .LinkList ul li, 
#sidebar .Label ul li,
#sidebar .BlogArchive ul li{
width: 90px;
float: left;
margin-right: 5px;
display: inline;
}

en cualquier caso lo podemos añadir antes de ]]></b:skin>.

width: 90px; es la anchura de cada columna
float: left; coloca los datos a la izquierda
margin-right: 5px; coloca un espacio de 5px a la derecha de cada columna
display: inline; muestra los datos en linea

Si en nuestra plantilla la anchura de la sidebar es diferente a la de la plantilla mínima (220px) hay que modificar width y margin-right para adaptarla, teniendo en cuenta que el ancho col1 + margin-right + ancho col2 + margin-right debe ser inferior a la anchura total de la sidebar.

Este calendario funcionará como un sistema de archivos mostrándolos como un calendario que, de forma interactiva, permitirá a nuestras visitas navegar entre las entradas de nuestro blog, que serán mostradas por la fecha de publicación.

1. Descargamos el archivo ZIP que contiene los .css y .js necesarios.

2. Alojamos los ficheros contenidos en un alojador de ficheros (por ej. Googlepages).

3. Después de <head> colocamos este código:


<style type='text/css'>@import url(&quot;TU_URL/calendar.css&quot;);</style>
<script src='TU_URL/calendar.js' type='text/javascript'/>
<script src='TU_URL/calendar-es.js' type='text/javascript'/>
<script src='TU_URL/calendar-setup.js' type='text/javascript'/>

4. Activamos el elemento de página "Archivos".

5. Abrimos otro elemento de página HTML donde insertamos el siguiente código:


<div id="calendar-container"></div>
<script type="text/javascript">
function dateChanged(calendar){
if (calendar.dateClicked){
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth()+1;
var d = calendar.date.getDate();
if (m<=9&&d<=9){window.location = "/" + y + "_0" + m + "_0" + d + "_TUBLOG_archive.html";}
else if(m>9&&d<=9){window.location = "/" + y + "_" + m + "_0" + d + "_TUBLOG_archive.html";}
else if(m<=9&&d>9){window.location = "/" + y + "_0" + m + "_" + d + "_TUBLOG_archive.html";}
else window.location = "/" + y + "_" + m + "_" + d + "_TUBLOG_archive.html";
}
};
Calendar.setup(
{
flat : "calendar-container",
flatCallback : dateChanged
}
);
</script>

En TUBLOG ponemos el nombre del blog (sólo lo que está en azul, http://TUBLOG.blogspot.com).

Listar datos sidebar a dos columnas

Calendario archivos Blogger

Comentarios

Buenos Enlaces

Entradas

Utilidades

Visitas

Seguidores