80

Calendario de archivos

CalendarioEste 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.
Debajo del calendario se mostrará el título de las entradas por mes, así que si hemos publicado muchas entradas, la lista se alargará demasiado.
Aunque instalemos el calendario, podremos usar al mismo tiempo si así lo queremos el widget de archivos Blogger, ya que los dos son compatibles.

Después veremos como ocultar esta lista de entradas.

Antes de empezar con la instalación del calendario, podéis ver un ejemplo de su funcionamiento en Zona de pruebas, donde también explica como instalar el calendario en una de sus entradas, aunque la idea original y todo el mérito es de PurpleMoggy.

[1] Colocaremos este código justo antes de </head>:

<!-- 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://TU_BLOG.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 -->

[2] Sustituimos ahora en el código anterior donde dice:
var _yourBlogUrl = "http://TU_BLOG.blogspot.com"; //edit this
var _yourBlogTimeZone = "+01:00"; //edit this

por la url de nuestro blog sin la barra de cierre al final y la zona horaria en la que estamos publicando (para España se dejaría como está).

[3] Una vez guardados los cambios, añadiremos un nuevo elemento HTML y colocaremos este código en su interior:
<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"/> Cargando...</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>

Guardamos los cambios y ya tendremos el calendario-archivo funcionando.

[4] Para ocultar la lista de entradas que aparece debajo de nuestro nuevo calendario y la imagen de carga, añadimos antes de ]]></b:skin> estas líneas de css:
#calbackloadimg{
display:none;
}


Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking.

Entradas Relacionadas:

80 comentarios:


Anónimo

¡Increible! Cuando vi todo ese código casi me da algo, y va y me sale a la primera, casi copia y pega y listo.
Graciassss.

Fernandooo1

Rosita,

Una pregunta:

Tengo aplicado este hack. Y funciona perfectamente y es así como lo quiero, es sólo que al hacer click en "Entradas antiguas" el numero de posts que aparecen "contraidos" es el mismo que aparece en la página principal.

Supongamos que sólo tenga 2 entradas en la página principal... en la siguiente página (la de entradas antiguas) sólo aparecerán 2 entradas recogidas); ¿hay alguna forma de cambiar eso?

¡Saludos!

Angélica Zambrano

Holitas amiga querida!!! pasa por mi blog en cuanto quieras que tienes un regalito alli.
Chaito.

Rosa

Fernandooo1, tu siempre proponiendo nuevos retos :-X ¡me encanta! :D

Acabo de mirar eso que dices, y mira tu por donde, esta noche parece que estoy ON.
Fíjate que encontré la solución enseguida, bueno al menos para mi trabaja, sino comprueba en El Escaparate que en "entradas antiguas" y en "Entradas anteriores" muestro 20 títulos recogidos a pesar de que en el "Home" solo tengo dos.

Verás, sitúate en la plantilla y busca esto como referencia:
<b:includable id='nextprev'>
Tu tienes iconos añadidos en la parte que nos interesa (los iconos de navegación) así que no te será difícil de localizar esto:

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl

En línea tal cual la ves, añades justo ahí detrás de eso:
+ "?max-results=20"

Cambias 20 por el número de títulos a mostrar.
Ahora las entradas antiguas:
<a class='blog-pager-older-link' expr:href='data:olderPageUrl
A continuación de eso pones lo mismo.

Deja un espacio después de la línea antes del + que sigue.
Otra cosita, si la plantilla no quisiera tomártelo, prueba así:
+ & quot;?max-results=20& quot;
Te pongo el & separado del quot; porque me lo interpreta pero ya sabes que va junto.
¡Suerte!

Rómulo

Excepente aportación..... siempre desee tener algo así muy al estilo de WordPress.

Hay un detalle y es que no logro poner centrado el calendario por mucho que agrego

a l i g n = " c e n t e r "

a los

< d i v >

del código en el elemento HTML

¿Sabes como poder centrar el calendario?

Un saludo desde Lima, Perú

Fernandooo1

Rosa,

Y es justo eso lo que nos gusta tus fans (:)) que te encante andar investigando y siempre con las pilas prendidas!

¡Pues justo ahora lo pruebo y te aviso! ;)

No creo que haya mayor problema igualmente :P

Saludos Rosa,

jaad

Yo tengo una sola palabra para este post, y para todo tu blog, chica: SOBERBIO.

Millón de millón de gracias.

A propósito, ¿tienes novio?

Un beso del que aparece y desaparece, pero sigue ahí, fiel.

jaad

Pero, pero, pero...!No sé por qué no desaparece ni la lista ni la imagen de carga!!!

Y cuando la página está cargando, aprecen por detrás del titulo del blog, unas zirigañas, muesquitas, mosquitos, guasasas, revoloteando...

Un beso

Laura

Hola Rosa!

Tu blog es maravilloso, me encanta, siempre uso los trucos que aquí colocas.
Tengo un nuevo blog se llama Mujeres fabulosas, el contenido de lo escrito allí es de mi propia creación, aunque estoy comenzando quiero evitarme problemas en el futuro con los "copia y pega", he visto que algunas páginas tienen esta opción de no dejar copiar, se puede aplicar a un blog??
Quizás tú tienes el truco o lo sabes?

Gracias de antemano.

Fernandooo1

¡Qué raro!

Hice todos los pasos correctamente, pues veo el ?max-results=10 en el link de entradas antiguas/recientes respectivamente pero al hacer click sobre el iconito pues aparecen 20.

Es bastante extraño, pues de hecho al principio lo probé con 20 y pues funcionó. Me pregunto si... "se quedó así" como predeterminado o algo así. Lo he incluso probado con IE y persiste la cosa. No tengo problemas con los 20 posts, pero sí preferiría sólo 10 ^^.

Gracias Rosa por tomarte el tiempo de averiguar acerca de esto una vez más.

Saludos,

Eulogio

Probado y funciona.
Gracias por el post.
Un saludo.

Juan Carlos (Yanka)

Rosiña, te he nominado en mi blog:

http://elrincondeyanka.blogspot.com/2008/04/premio-paracelso-2008.html

Gracias por existir...

Juan Carlos (Yanka)

Jony

Hola Rosa! si me pudieras decir como puedo centrar el calendario... osea donde le pongo center :D

Rosa

Rómulo y Jony el calendario (su apariencia) está controlado mediante un archivo de css externo, es el que veis en esta línea del código:
<link href='http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css' rel='stylesheet' type='text/css'/>

Para modificar colores, medidas,posiciones y demás, hay que descargarse ese archivo, modificarlo y volver a subirlo a un alojamiento para luego enlazarlo desde allí, es decir, sustituir en esa línea la url del archivo por la del modificado.

Rosa

Fernandooo1, así es, lo he comprobado por mi misma, y eso es porque Blogger asigna ese valor (20) por defecto al máximo de entradas a mostrar.
En las páginas de las etiquetas, por ejemplo, he hecho la misma prueba (mostrar más de 20) y ahí si me ha funcionado...

Rosa

Angélica, gracias cielo, en cuanto pueda me paso...estoy hasta arriba de consultas hoy...:-X

Rosa

Yanka, gracias,intentaré pasarme esta tarde...:-L

Rosa

Jaad, tengo marido (hace 25 años) y dos muchachotes :D

Algo has hecho mal. Si te sale parte del código en la plantilla es que alguno de los códigos del calendario no está colocado donde debiera...

Rosa

Eulogio, me alegro! :D

Rosa

Laura, mira en este comentario, creo que te servirá.

Carlos Soler

Hola Rosa, genial el calendario. Lo que no entiendo es si ocultamos las entradas ya no podemos navegar por el calendario, deja de tener sentido si sustituye el archivo. ¿Es posible ocultar las entradas de todo el mes y dejar que se vean las del dia? Veo que vas muy liada, así que cuando te vaya bien me respondes por favor.

Alas al viento

Hola Rosa! Soy un poco nueva por estos lares y la información que das me resulta muy útil y fácil de aplicar.

Me gustaría saber cómo puedo añadir presentaciones de power point al blog sin tener que subir imágen por imágen si es que eso es posible.

Muchas gracias.

Alas

Rosa

Carlos, poder se puede navegar en el calendario, tu marcas un día y al pinchar se muestran las entradas de ese día, claro que es diferente a ver antes sus títulos, eso si.
De todos modos, acabo de corregir la entrada por que tal vez me expresé mal...el calendario solo sustituye al archivo si queremos,de hecho los dos pueden estar en el blog.
Ahora mismo no puedo contestarte a si se pueden ocultar las entradas del mes...tendría que mirar los códigos, bajarme los archivos...demasiado tiempo y ahora mismo no dispongo de el :-( se me están acumulando los emails, no se que pasa estos días que todo el mundo anda queriendo hacer cambios ¡ufff!

Juanjo

He aplicado un truco tuyo que me ha gustado mucho a mi blog el de evitar el "colapso" en las etiquetas... la verdad es que es genial queda todo mucho más ordenado, gracias otra vez Rosa :D

Rosa

Alas al viento, en este blog hay un tutorial usando SlideShare que quizá te sirva.

Rosa

Juanjo,la verdad es que te está quedando el blog muy chulo.:D

Carlos Soler

¡Gracias Rosa!

Angie Sandino

Rosita querida, quiero agradecerte toda la ayuda que me brindaste desde el inicio de mi blog, hoy paso a dejarte un abrazo lleno de cariño y un Hasta Siempre lleno de esperanza... he dejado mi despedida en mi blog, espero que puedas pasar a dejarme tu firma en mi último post...

Todo mi cariño...y gratitud!

Juanjo

Gracias Rosa:$ , para mi tu blog es de los numero uno ;)

Fernandooo1

¡Mil gracias Rosa!

La verdad igual he conseguido lo que te pedía en un principio: poder cambiar esas 4 entradas (se veía medio vacío), y lo has logrado ;). Qué pena no poder variar el número, pero bueno... te agradezco.

:) Saludos Rosa,

Jocarl

GEnial :D en simples pasos

Rosa

Jocarl, me alegra que te fuera sencillo ;-)

Σ=o) Pau

Hay Rosita, no sabes como he buscado este codigo y con una expliación que la entienda. Gracias!!!
Un besote y muchos ronrones!!!!!!!!

Rosa

Pau, tengo otro que yo creo que es más chulo aún...en cuanto pueda voy a publicarlo.
Besotes:-L

Σ=o) Pau

mmmm... entonces si la maestra dice que es mejor espero jejeje :D
un besote!!!!

pd: gracias a una de las respuuestas en un de tus post puse los emoticones como lo explicaba Jmiur. Por fin se ven en comentarios y post, me encantan, pero cómo puedo agrego más iconos al archivos de emoticones?
Gracias Rosita, como siempre eres un amor! besotes ;)

Rosa

Pau, es que el que estoy probando (que de momento va bien) es más lindo y además muy fácil de configurar su color y demás...

¿Qué código es exactamente el de Jmiur? dime la entrada a que te refieres...porque según el código, cambian las modificaciones.

Abrazos:-L

Σ=o) Pau

Esta fue la entrada donde encontré los smiles para que se me vieran :)
Gracias como siempre, eres un amor! beso, besos, besos

Rosa

Pau, si has usado ese sistema has tenido que descargar el script a tu PC y luego subirlo a un servidor...

Bien, para añadir emos has de hacerlo en ese mismo script, o sea, modificarlo y volver a subirlo.
Si has usado Google Pages, no hay problema ya que sino le cambias el nombre al archivo, una vez hechos los cambios, si vuelves a subirlo allí bastará para que funcione.

En el script verás unas cuantas líneas como esta:
cualTexto = cualTexto.replace(/:-\$/g,'<img src="http://img179.imageshack.us/img179/8856/com-oops.gif" />');

Si te fijas veras en ella :- y $ yluego la url de una imagen.
Eso quiere decir que cuando pongas en tu blog :-$ eso será sustituido por la imagen que está en esa línea. En este caso la cara colorada.

Solo tienes que copiar, por ejemplo, la última línea del código que sirve para una carilla y volver a pegarla debajo, luego cambiar la url de la imagen en la línea nueva, por la del nuevo emoticon y los simbolitos que van a usarse, respetando siempre lo demás, es decir, las / y esas cositas del código.

Eulogio

Rosa:

Gracias por tu visita a ¡Por ahí resopla

En cuanto a la referencia, te la tienes más que merecida.

Un saludo de un admirador.

Alvaro

Pues no puedo seleccionar el código para copiarlo, Rosa. Vaya faena :S

Saludos.

Rosa

Alvaro ¿qué no puedes? y eso porque...

Alvaro

Ya está, pero he tenido que pulsar ctrl y seleccionar todo el texto del tirón, :S

Σ=o) Pau

Que quieres que diga Rosita :D Muchas gracias!!!!!!!!! estas ayudas tan claras y precisas me hacen solo decir que eres una gran profe ;) mañana veo como me va que caritas pongo que ahora es muy tarde ;)
un besote!

Σ=o) Pau

Soy yo de nuevo y los smiles, estos pqueñines me encatan ;) sabes al modificar el archivo vemoticones.js me lo trasforma en txt, como lo modifico manteniendo la extensión para agregar los emoticones y subirlo de nuevo?

besos :l

Rosa

Pau, yo lo descargo lo abro, lo modifico y lo vuelvo a cerrar, guardando los cambios...no tiene porque cambiar la extensión, a no ser que lo abras con el blog de notas, por ejemplo...aunque yo en esos temas, la verdad, que voy bastante limitada :-$

Vyoljann

Muy bueno, funciona bien y muy simple de implementar

¡Gracias!

CREADORES

hola Rosa, me encanta tu blog, llevo varios dias buscando un calendario como este pero con la diferencia de que en vez de que sea de archivos que sea de eventos futuros...¿tienes alguna idea??

Muchas gracias, Luz Maria

Rosa

CREADORES , ni idea...no he visto nunca nada como eso que dices en Blogger...

luzmaria

Hola Rosa el otro dia te pregunté si sabias algo de un calendario de eventos...pues buscando en la red encontré algo en www.localendar.com puedes cambiar color y poner recordatorios...está bien lo unico es que cuando voy a poner el codigo html me hago un lio..¿ te importaría pasarte por ahi y darle un vistazo?? porfi...
gracias!!!

Rosa

Luzmaria, he estado en la web y lo he probado yo misma...es adecuado para una página web, pero bajo mi punto de vista no para el blog...una de las cosas que no me gustan es que es inglés, o sea, que los eventos de días especiales, por ejemplo, no se corresponden con otros países que no sea el americano...

En fin, te explico...

Una vez registrado, se accede a la página de nuestro calendario, en el menú de la izda elegimos "Standard" y después "Publish", nos dan tres opciones, con cada opción un código html distinto, la primera es para mostrar un enlace de texto a la página de nuestro calendario (la mejor opción para el blog), la segunda muestra el calendario, pero no se puede controlar su tamaño, que es bastante grande y la tercera es un código para embeberlo en la página y en el que podemos controlar su tamaño en width (ancho) y height (alto) pero que si lo reducimos a tamaño de sidebar, por ejemplo, según mi opinión queda fatal...

Estas son las tres opciones con los códigos de cada una, que hay que pegar en un elemento html o en una entrada, por supuesto, los códigos son los míos, tu has de usar los que te dan para tu propio calendario:

[1]I would like to have a link to a full-page view of my calendar

<A HREF="http://www.localendar.com/public/Rosa42">Calendar</A>

[2]I would like to embed my calendar as part of a web page

<SCRIPT language="Javascript" src="http://www.localendar.com/public/Rosa42?include=Y&style=M0"> </SCRIPT>

[3]{NEW} I would like a fully-interactive embedded calendar as part of a web page
<ILAYER src="http://www.localendar.com/public/Rosa42" height=600 width=700 ></ILAYER>
<IFRAME src="http://www.localendar.com/public/Rosa42" height=600 width=700 marginheight=0 marginwidth=0 scrolling=no frameborder=0 border=0></IFRAME>

nana

Hola Rosa, descubrí tu blog hoy y la verdad es que me parece increible lo que estás haciendo. te lo agradezco, porque aunque sea la primera vez que entro ya estás en mis 'feeds'.
Me gustaría hacerte una pregunta, si no estás muy liada:
¿Cómo puedo cambiar el tipo de fuente con el que se muestra la lista de entradas justo debajo del calendario?
Gracias anticipadas.

Rosa

nana, fijate en el paso [4] hazlo así, pero añadiendo este código:

#calbackloadimg{
font: Georgia Serif;
}

En Georgia Serif, pon el tipo de fuente que vas a usar.

nana

Gracias Rosa, es que estoy un poco espesita...

Winston Smith

muy bueno, llevaba tiempo buscando un calendario. un saludo

Rosa

Winston Smith , me alegro que te haya sido útil:-)

Σ=o) Pau

Rosita... me gusto aplicar el calendario pero la forma que tienes en tus cabreos los archivos me gusta más y de acuerdo a la respuesta me debes el post me lo podrías poner o bien mandar a mi correo si es muy complicado? gracias de antemano :)

besotes ronroneados

Rosa

Pau, ¡ese era el que te dije! Se me paso...:$
Estará allá en el fondo de mis borradores...¡lo rescato mañana! ¡Prometido!

Σ=o) Pau

No te preocupes, con todo lo que te toca ver, tus cosas y demás uf! muchas gracias lo esperaré con gusto porque no demora en cargar y es muy cómodo, le había cambiado los colores en azulito todo mono al archivo .css pero las flechitas y fechas se me hizo un lio :D

Gracias por tu pronta respuesta ;)

Σ=o) Pau

pd: se me olvidó... muchos ronroneos en mi abrazote ♥ ;)

MARGA'S HAPPY PATCHWORK

Gracias Rosa, Ha funcionado bien y rapido.
Una pregunta:

El archivo de blog clasico, lo elimino y ya esta o tengo que hacer algo mas.

Otra vez gracias.

Rosa

MARGA, puedes dejarlo e suprimirlo como quieras...

Σ=o) Pau

Rosita... por fis, si puedes no se te olvide rescatar tu calendario nuevo ya? ♥

besos y un abrazo!!!!!!

Rosa

Pau, jolines si, tienes toda la razón:-$ siempre me surge algo que me parece más puntual que el calendario...¡ya basta de excusas! la próxima entrada el calendario.:-L

Enrique Carlos Ameijeiras

Rosita:
Coloque este formidable recurso en un blog de pruebas. Es excelente para mi blog de efemérides que se actualiza diariamente. Solo que solo me aparecen los días que tienen post en el calendario, el resto en estan pero en blanco y no se ven. Trate de cambiar el color del blog y ponerle color al background, pero no funciona. Que puede esta pasando.
Enrique. labiblio@gmail.com está en el blog nuclearte de blogger.
Besos

Enrique Carlos Ameijeiras

ya está, Rosita, es que toma el color por defecto del blog y yo tengo el texto en color blanco
bueno, me arreglo
gracias igual

GuillermoZ0009

Parece ser que en este calendario, algo no salio bien, todo bien en cuanto el diseño etc etc... sin embgargo no me marca los dias donde hay publicaciones en todos los dias y meses aparece tachado el dia.

En este Blog lo aplica:
http://generacion-jc.blogspot.com/#

Saludos Rosa

Rosa

GuillermoZ0009 Quizá has puesto mal alguno de los datos... o quizá el problema esté en tus feed...el calendario necesita leerlos correctamente para funcionar y tienen que estas "Completo" en Configuración - Feed del sitio.

De todos modos y si me permites el consejo, no se para que quieres más gadget en tu blog...está tan saturado de cosas innecesarias que tarda mucho en cargar.

Ezequiel de la Parra

Rosa instale el widget en mi blod de prueba y se ve mal. La direccion es http://pruebarocktails.blogspot.com
Que puede estar pasando? Gracias!!

Rosa

Ezequiel de la Parra La verdad...no tengo ni idea :O
Si lo has copiado y pegado como aquí, no se porque se deforma así en algún mes...nunca vi ese efecto antes.

Ezequiel de la Parra

Gracias Rosa, lo elimine al calendario ya que no es nada imprescindible. Te hago otra consulta a ver si me puedes ayudar, instale una aplicacion para ocultar ciertos post de la página principal pero me surgio un problema, los post se me repiten en la pagina principal y descubri que se repiten tantas veces como etiquetas tengan. Es decir, si un post tiene 3 etiquetas aparece 3 veces en la página principal. Esto pasa sólo en la página principal. Sabés que puede ser? Muchas gracias Rosa!!

Rosa

Ezequiel de la Parra No se como hiciste para ocultar entradas en el home, pero lo lógico sería que si algo hiciste mal, se ocultaran entradas indeseadas, no que se repitieran...la verdad que os pasa cada cosa más rara :S

Lo que yo haría sería volver atrás, es decir, deshacer los pasos que hayas hecho para incluir eso que dices, ya que supongo que algo ahí estará mal...más no puedo decirte :o

Vladimir Ernesto Vallejo Castillo

hola, que excelente aplicacion, como se hace para cambiar los meses a español. Gracias

vlackened@yahoo.es

Rosa

Vladimir En la imagen de ejemplo están en inglés, pero una vez aplicado el calendario se muestran en español, tal y como ves que están en el código.

Elisa_chan

Ey! incrible este blog jejeje.
llegue ayer, y me gusta tu manera de explicar las cosas ;)

pero claro, tengo alguna duda y no se si podrias mirarlo u_u
se que comentais que el idioma esta en español, pero el calendario no O_o Encima comienza con el Domingo jajajaja, sabes alguna manera de cambiarlo?? (yo esq el html y el css no lo domino la verdad)

bueno, pues eso Rosa, un saludo y gracia por el calendario!! y eso, a ver si puedes sacarme de la duda ;) por el resto, genial jijijiji

Rosa

Elisa_chan No puede cambiarse eso que yo sepa... si se cambia no coincidiría el conteo exacto de fechas...

Elisa_chan

vaya,una pena, pero muchisimas gracias por responderme Rosa ^^ no tiene mucha importancia, era mas bien algo 'estetico' jejeje, gracias de nuevo! un saludete!!!

Brown de Adrogué Blog

yo no tengo idea de como hacerlo por favorrrrrrrrrrrr

Rosa

Brown de Adrogué Blog Justo es lo que explico en la entrada... como hacerlo.

xltutor

Hola, recien estoy aprendiendo a usar javascript y lo que hice fue alojar la parte 2 del código en un archivo javascript y llamarlo con src, luego inserté el archivo html en un gadget. Al cargar mi blog se ve el mes, año incluso el botón pero al cabo de un tiempo aún no se carga el calendario. Pienso que el código html no reconoce las funciones que se encuentra en el archivo .js ya que son externos y ese es el problema. Hay una forma de poner este código como archivo externo y que se reconozca en la parte de html.

Gracias.

Rosa

xltutor Ese archivo ya tiene varias partes alojadas de forma externa, así que no, no puedes llamarlo desde un alojamiento, has de usarlo tal cual se explica aquí.

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S