Calendario de Posts

Si veis el calendario que hay en la primera columna lateral de esta misma página podreis ver más o menos de lo que se trata. Este truco consigue sustituir el sistema de "archivos" de blogger por un calendario interactivo en el que podremos revisar nuestras entradas en función de la fecha. El truco requiere un par de incursiones por la plantilla, pero se pueden hacer en un mismo paso. Lo único que hay que hacer, como siempre, es hacer previamente una copia de nuestra plantilla para evitar problemas y después nos ponemos manos a la obra.



Localizamos en nuestra plantilla el cierre </head> y nos ponemos a trabajar justo encima. El truco consta de dos códigos que para ahorrar tiempo pondremos en un solo paso:

<!-- CODIGO CALENDARIO -->
<!-- PARTE 1 -->
<script src='http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.0/build/calendar/calendar-min.js' type='text/javascript'/>
<link href='http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css' rel='stylesheet' type='text/css'/>
<!-- FIN DE PARTE 1 -->
<!-- PARTE 2 -->
<script type='text/javascript'>
//<![CDATA[
/*
Created by: PurpleMoggy
http://purplemoggy.blogspot.com
*/

var _yourBlogUrl = "http://karalletest.blogspot.com"; //edit this
var _yourBlogTimeZone = "+01:00"; //edit this

_yourBlogTimeZone = encodeURIComponent(_yourBlogTimeZone);

var _dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");

YAHOO.namespace("example.calendar");

function cal1Init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.addMonthRenderer(1, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(2, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(3, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(4, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(5, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(6, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(7, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(8, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(9, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(10, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(11, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(12, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.changePageEvent.subscribe(myChangePageHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.renderEvent.subscribe(syncMonthYear);
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
};


var myChangePageHandler = function(type,args,obj) {
var month = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth() + 1;
if (month.toString().length == 1) {
month = "0" + month;
}
var year = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear();

document.getElementById("cal1Titles").innerHTML = "";
_dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");

checkPostsForMonth(month, year);
};

function checkPostsForMonth(month,year) {
document.getElementById("cal1loadimg").style.display = "block";

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=checkPostsCallback&published-min=" + year + "-" + month + "-01T00%3A00%3A00" + _yourBlogTimeZone + "&published-max=" + year + "-" + month + "-31T23%3A59%3A59" + _yourBlogTimeZone + "&max-results=100";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};

function checkPostsCallback(json) {

if (json.feed.entry) {
for(i = 0; i < json.feed.entry.length; i++) {
var month = json.feed.entry[i].published.$t.substr(5,2);
var year = json.feed.entry[i].published.$t.substr(0,4);
var day = json.feed.entry[i].published.$t.substr(8,2);
var date = month + "/" + day + "/" + year;
var href = json.feed.entry[i].link[0].href;
var title = json.feed.entry[i].title.$t;

if (day.substr(0,1) == "0") {
day = day.substr(1);
}

document.getElementById("cal1Titles").innerHTML += "<li><a href='" + href + "'>" + title + "</a>";
_dayTitles[day] += "<li><a href='" + href + "'>" + title + "</a>";

YAHOO.example.calendar.cal1.addRenderer(date, myCustomRenderer);

}
YAHOO.example.calendar.cal1.render();
}

document.getElementById("cal1loadimg").style.display = "none";

};


function showDayTitles(day) {
document.getElementById("cal1Titles").innerHTML = _dayTitles[day];
}


var myCustomRenderer = function(workingDate, cell) {

var day = workingDate.toString().substr(8,2);
if (day.substr(0,1) == "0") {
day = day.substr(1);
}


cell.innerHTML = '<div onmouseover="showDayTitles(' + day + ');"><a href="javascript:void(null);" >' + YAHOO.example.calendar.cal1.buildDayLabel(workingDate) + "</a></div>";
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABLE);
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_HIGHLIGHT1);
return YAHOO.widget.Calendar.STOP_RENDER;


}

var mySelectHandler = function(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0];
var month = date[1];
if (month.toString().length == 1) {
month = "0" + month;
}
var day = date[2];

var element = YAHOO.util.Dom.getElementsByClassName("d" + day, "td", "cal1Container")[0];

if (day.toString().length == 1) {
day = "0" + day;
}

if (element.className.indexOf("highlight1") != -1) {
window.location = _yourBlogUrl + "/search?updated-min=" + year + "-" + month + "-" + day +
"T00%3A00%3A00" + _yourBlogTimeZone + "&updated-max=" + year + "-" + month + "-" + day +
"T23%3A59%3A59" + _yourBlogTimeZone;
}

};

var changeDate = function() {
YAHOO.example.calendar.cal1.setMonth(parseInt(YAHOO.util.Dom.get("cal1monthselect").value));
YAHOO.example.calendar.cal1.setYear(parseInt(YAHOO.util.Dom.get("cal1yearselect").value));
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
}

var syncMonthYear = function(type) {
YAHOO.util.Dom.get("cal1monthselect").value = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth());

var fullYear = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear());

var isYearFound = false;
var i = 0;
while(i < document.getElementById("cal1yearselect").options.length && !isYearFound) {
if (document.getElementById("cal1yearselect").options[i].value == fullYear) {
isYearFound = true;
}
i++;
}
if (!isYearFound) {
var option = document.createElement("option");
option.setAttribute("value", fullYear);
var text = document.createTextNode(fullYear);
option.appendChild(text);
document.getElementById("cal1yearselect").appendChild(option);
}

YAHOO.util.Dom.get("cal1yearselect").value = fullYear;
};

YAHOO.util.Event.addListener(window, "load", cal1Init);
YAHOO.util.Event.addListener("cal1dateselect", "click", changeDate);
//]]>
</script>
<!-- FIN DE PARTE 2 -->

Las zonas en rojo se corresponden con la dirección de la página donde lo instalemos y con la zona horaria en la que publicamos los posts.

Después, una vez guardada la plantilla vamos a la página de diseño y añadimos un elemento como HTLM al que podemos titular como mejor nos convenga. El Widget en cuestión es este:

<div id="cal1wrapper">

<div id="cal1select">

<select id="cal1monthselect" name="cal1monthselect">
<option value="0"/>Enero
<option value="1"/>Febrero
<option value="2"/>Marzo
<option value="3"/>Abril
<option value="4"/>Mayo
<option value="5"/>Junio
<option value="6"/>Julio
<option value="7"/>Agosto
<option value="8"/>Septiembre
<option value="9"/>Octubre
<option value="10"/>Novimbre
<option value="11"/>Diciembre
</select>
<select id="cal1yearselect" name="cal1yearselect">
<option value="1995"/>1995
<option value="1996"/>1996
<option value="1997"/>1997
<option value="1998"/>1998
<option value="1999"/>1999
<option value="2000"/>2000
<option value="2001"/>2001
<option value="2002"/>2002
<option value="2003"/>2003
<option value="2004"/>2004
<option value="2005"/>2005
<option value="2006"/>2006
<option value="2007"/>2007
<option value="2008"/>2008
<option value="2009"/>2009
<option value="2010"/>2010
<option value="2011"/>2011
<option value="2012"/>2012
<option value="2013"/>2013
<option value="2014"/>2014
<option value="2015"/>2015
<option value="2016"/>2016
<option value="2017"/>2017
<option value="2018"/>2018
<option value="2019"/>2019
</select>
<input id="cal1dateselect" value="-->" type="button"/>

</div>

<div id="cal1Container"><img style="vertical-align:middle;
" src="http://img239.imageshack.us/img239/9057/40lf8.gif"/> Loading...</div>
<div style="clear:both;"></div>

<div id="calbackloadimg">
<pre id="cal1loadimg" style="display:none;"><img style="vertical-align:middle;" src="http://img239.imageshack.us/img239/9057/40lf8.gif"/> Cargando...</pre>
<pre id="cal1Titles"></pre>
</div>

</div>
Un vez ubicado en donde más nos guste y guardados los cambios ya estará listo. Tenemos un estupendo sistema de archivos incluído en el calendario en el que con tan solo pasar el ratón por el día seleccionado veremos los posts que se hicieron en esa fecha.

Este truco es obra y milagro de PurpleMoggy, al que desde aquí le doy las gracias. ;)
Si teneis algún problema en la instalación ya sea porque algo no se entiende o por algún posible error al mostrar el código en el post (a veces, al transformar los <> para que se puedan mostrar se puede cometer algún error...), pasaros por la página original del truco para verlos mejor.

Tabla de Contenidos

Ya habíamos visto como poner los contenidos de nuestro blog según las categorías de cada uno de nuestros posts. Ahora vamos a ver algo parecido, pero que a mi me ha encantado y es que podremos ver TODOS nuestros posts listados por fecha y categorías en un perfecto orden alfabético y todo expandible y retraíble en nuestra página principal. Este truco me ha parecido de los mejores que he visto últimamente y como tantos otros se lo debemos a Beatiful Beta, que ultimamente está realmente activo y como es de ley, en Zona de Pruebas lo hemos puesto a eso... a prueba. El resultado es excepcional así que os comento cómo y qué hacer para ponerlo en vuestro blog. Si quereis saber un poco más de que se trata antes de poneros manos a la obra no teneis más que probar la "Tabla de Contenidos" de mi segunda barra lateral.
Tenemos que realizar unos cuantos pasos previos:
Lo primero, como siempre, es hacer una copia de seguridad de nuestra plantilla por lo que pueda pasar. El truco comienza en la plantilla de HTML si aún no hemos habilitado la zona superior de los posts para introducir elementos, así que si es el caso, primero hay que modificar la plantilla para permitirlo y lo podeis ver paso a paso en este otro post. Ahora nos vamos a la página de Diseño de nuestro Blog y justo encima del área de Posts añadimos este código como HTML y sin poner ningún título:

<div id="toc"></div>

Guardamos los cambios y nos vamos a la columna lateral en donde queramos poner el truco en cuestión. Me refiero simplemente al vínculo que hará que se muestre u oculte el listado de posts, ya que la tabla se mostrará siempre en el área principal del blog, justo encima del post que tengamos al principio. Añadimos como HTML este código:

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://TUBLOG.blogspot.com/feeds/posts/default?
alt=json-in-script&max-results=999&callback=loadtoc"></script>


Cambiar TUBLOG por el nombre del Blog donde lo estemos instalando.

El último paso es pegar los "estilos" que tendrá la tabla de contenidos. Es totalemente editable a gusto de cada uno, pero como ejemplo pondré el que estoy usando yo ahora mismo, que es igual que el de la fuente original excepto el color y el ancho, para ajustarlos mejor a mi diseño.

Los estilos se pueden poner en la zona <b:skin> de nuestra plantilla, pero yo he tenido problemas así que la solución más sencilla y que además facilita mucho la localización del código es introducirlo como un elemento HTML justo encima del código del script que hemos puesto en el paso anterior. El código para los estilos es el siguiente:

<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:450px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ccddcc;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.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 {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>

Con esto debería de estar ya perfectamente instalado.

A partir de ahora podremos mostrar u ocultar nuestra tabla de contenidos (últimos 100 posts, aunque ya existe la manera de mostrar todos, pero ya se explicará si fuera necesario...). La tabla mostrará 3 columnas. En la primera veremos los títulos de los posts ordenados alfabéticamente y vinculados a su página correspondiente, de manera que podremos ir a cualquier artículo de la lista con un simple click. En la segunda columna veremos la fecha en la que fue editado por última vez ese post y en la tercera veremos las categorias bajo las cuales fue publicado con el añadido de que si pulsamos en las categorías listadas podremos hacer un filtro de la tabla para que sólo muestre los artículos de esa categoría en concreto. Por si fuera poco, permite ordenar el listado en función del título o de la fecha con tan sólo pulsar en el título de la columna que queramos y además, si hacemos filtrados por categoría y queremos ver todas nuevamente, no tendremos más que pinchar en el título de la columna de las categorías. No me digais que no es un truco realemente impresionante. :D

Snap Multi lenguaje

Habíamos visto hace unas semanas como instalar Snap en nuestra página. Pues bien, partir de ahora ya cuenta con soporte para varios idiomas con lo que si queremos actualizarlo deberemos volver a su página y repetir los pasos de instalación nuevamente.

Contenidos por categorías

Es otra manera interesante de presentar las categorías, pero con un par de ventajas. Una es que nos muestra las entradas de cada categoría por separado y la otra es que podemos hacer que muestre sólo alguna de las categorías. El truco está explicado en alguno de los comentarios del blog, en otro apartado, pero como es de ley vamos a dedicarle un post. El código completo lo podeis copiar de la página del creador original del truco. Su instalación es sencilla. No teneis más que ir a la edición de HTML de vuestra plantilla y EXPANDIR la plantilla de WIDGETS. Una vez allí, buscamos una zona cualquiera del blog para colocarlo (nunca en el MAIN, ya que no nos deja poner widgets en el área dedicada a posts), ya que luego desde la plantilla de DISEÑO lo podremos mover sin problemas. Una vez seguros de que estamos en la zona de la plantilla adecuada, buscamos el cierre de un WIDGET identificado por <b/widget> y pegamos a continuación el código que copiamos de la página original del truco. Después tenemos que cambiar una serie de parámetros en el widget, que son:

var homeUrl2 = "tublog.blogspot.com";
var labels = ["categoria","categoria2","categoria3"];

Como veís no hay más que añadir la URL de tu página y añadir entre comillas el nombre de la categoría que quereis que se muestren. Aquí está el problema, el widget no identifica más que tres palabras para cada categoría y también tiene problemas con los acentos y las "ñ" con lo que habrá que tener cuidado como nombramos nuestras categorías si queremos usar este truco.

Otra cosa a tener en cuenta es que no a todo el mundo le interesa que se muestren los títulos de cada categoría encima de los vínculos a las entradas, cosa que le ocurría a uno de nuestros habituales, Batto de Ramen Para Dos. Si ese es vuestro caso no teneis más que buscar una línea de código en el widget y borrarla. La línea en cuestión es esta:

h.appendChild(txt);