Zona de Pruebas

Añadir "Blog reactions" a nuestros posts

2008-01-04T23:56:00.000+01:00

Con este pequeño truco vamos a añadir en cada una de nuestras entradas un vínculo que hace referencia a la repercusión en otros blogs de nuestros artículos. Muchos ya lo habréis visto en infinidad de páginas, pero para otros tal vez sea nuevo. Si tenemos un blog y queremos saber qué importancia o a qué otros bloggers les interesa nuestras entradas qué mejor manera que ver la repercusión que tiene cada una de nuestras aportaciones en la red de redes de los Blogs; Technorati.
Pues bien, con este sencillo código lo conseguiréis, eso si, tal vez los resultados no os gusten tanto... ;)

Lo primero es ir a la plantilla HTML y expandir los widgets.
Ahora buscamos la siguiente línea de código.

<p class="post-footer-line post-footer-line-3">

A continuación añadimos este script:


<script src="http://embed.technorati.com/linkcount" type="text/javascript"%gt;</script><a href="http://www.blogger.com/%22http://technorati.com/search/%22%20+%20data:post.url" rel="linkcount">View blog reactions</a>

Ojo con las aperturas y cierres de <p y </p>

Mejora para el truco de Leer más

2007-08-18T11:51:00.000+02:00

Una manera muy vistosa de redecorar el truco de leer más que ya vimos en este otro post. Con estos pasos conseguiremos un efecto fade in y fade out estupendo en el texto oculto. El truco es obra de Hackosphere (una vez más) y me parece realmente vistoso.
Para instalar el truco en nuestra página tendremos que hacer un par de incursiones en la plantilla. La apariencia final depende del color de fondo que tengamos en nuestros posts, así que para evitar el tener que andar entrando en el editor de HTML para ir cambiando los códigos de colores hasta encontrar el que más nos guste yo opto por crear una variable de color para poder cambiarla cómodamente desde "Colores y Fuentes" sin tener que bucear en la plantilla o liarnos con los códigos de colores.

Así pues buscamos en la plantilla, casi al principio, la zona en la que se definen las variables y añadimos esta:

<variable name="peekbgcolor" description="color fade" type="color" default="#fff" value="#f2984c">

Después buscamos la etiqueta de cierre </head> y justo encima ponemos este script:


<script src='http://anniyalogam.com/scriptaculous/src/prototype.js' type='text/javascript'/>
<script src='http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects' type='text/javascript'/>
<script type='text/javascript'>
var fade = true;
var peekaboo_bgcolor = peekbgcolor$;
</script>


Tan sólo nos queda un paso más y es localizar esta línea en nuestra plantilla y borrarla:

<style>#fullpost {display:none;}</style>

Ahora el truco ya está instalado en la plantilla. Para usarlo no tendremos más que usar en los posts donde queramos que aparezca la siguiente estructura:

TEXTO SUMARIO
<span id="fullpost">
TEXTO OCULTO
</span>

Prueba a mostrar el texto

Tras la etiqueta fullpost colocamos todo el texto oculto que queramos mostrar sólo al pulsar sobre "sigue leyendo", "leer más" o lo que hayamos escogido. El efecto que se consigue con esta mejora es bastante vistoso.

Problemas con los Posts expandibles?

2007-07-15T08:27:00.000+02:00

Tal vez hayas instalado los Posts Expandibles en tu blog siguiendo las instrucciones de este Blog, o tal vez desde otro pero igualmente experimentes (o vayas a experimentar) problemas en su funcionamiento. Esto es debido a que muchos trucos que usamos los Bloggers tienen la misma procedencia con lo que es posible que usemos el mismo script... lo que quiero decir es que si no estás seguro vale la pena que le eches un vistazo. La cuestión es que el sistema que usamos en esta página y otras muchas es gracias a un Script de Hackosphere. Lo que ha ocurrido es que la página en la que se haya hospedado dicho script se ha visto desbordada de tal manera que no funciona correctamente. Para solucionarlo deberemos eliminar la linea de código que instalamos en su momento e instalar el script completo en nuestra plantilla justo encima del cierre </HEAD>. Una vez hecho, los problemas desaparecerán.

Gracias a Hackosphere por compartir su script, su espacio y su tiempo.

El script completo lo teneis aquí

Actualizacion: Parece ser que la página con el script ya no está disponible... aquí os lo dejo:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>

Tu foto o avatar en los comentarios

2007-06-11T01:48:00.000+02:00

Gracias a este truco que nos brinda PurpleMoggy´s Blog podremos visualizar nuestras fotos o avatares de Blogger junto a los comentarios que dejemos en las entradas.
Para lograrlo tendremos que efectuar un par de pasos en la plantilla, pero nada demasiado complejo.

Una vez hecha una copia de seguridad de nuestra plantilla, nos moveremos por el editor HTML con los widgets expandidos y buscamos la sección de comentarios de nuestro blog:

Las líneas resaltadas en Rojo son las que tendremos que añadir a nuestra plantilla exactamente en las posiciones en las que veis arriba. Después de asegurarnos haber añadido correctamente este par de líneas, subiremos por nuestra plantilla hasta la etiqueta de cierre </HEAD> y justo encima añadimos estas líneas:

Actualizacion: Al cambiar ciertas partes del código para poder mostrarlo en un post he cometido algún error. Las lineas que hay que cambiar son estas, pero nolas he borrado arriba para no cometer el mismo error y de paso dejarlas en sus posiciones para que sirvan de referencia para encontrarlas en la plantillas.

Primera linea a cambiar:
<div class='commentphoto' style='float:right;'/>

Última linea a cambiar:
<div style='clear:both;'/>

Calendario de Posts

2007-04-20T10:37:00.000+02:00

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:

<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'/>


<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>

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.

Últimos artículos por categoría

2007-02-26T03:12:00.000+01:00

Una buena alternativa al código de Últimos Artículos con un par de diferencias clave que harán que uséis uno u otro sistema. En este nuevo código no podremos ver las primeras líneas del post como hasta ahora, pero a cambio nos permite mostrar por orden cronológico los posts que deseemos organizados en función de las categorías que hemos creado. Para introducir este nuevo código deberemos tener bastante cuidado ya que hay que introducirlo exactamente entre dos etiquetas "b:widget" de nuestra plantilla y es fácil equivocarse. No hay que preocuparse entre que Widgets meterlo ya que después podremos moverlo de un sitio a otro desde la página de diseño de nuestro panel de Blogger sin tener que andar copiando y pegando códigos. El código completo lo podeis copiar directamente desde aquí, pero una vez introducido en nuestra plantilla tenemos que cambiar un par de cosas para ponerlo a nuestro gusto:

Buscamos en el código esta sección:

ar homeUrl3 = "hoctro.blogspot.com";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

Las partes coloreadas son las que deberemos cambiar por nuestra página, el número de posts por categoría que vamos a mostrar y el número de categorías que se mostrarán.

Además, este script sólo mostrará los posts de todas las categorías en la página principal, pero si seleccionamos una categoría en concreto, o bien visitamos un artículo concreto, mostrará sólo los artículos etiquetados en esa categoría/s.

He optado por no ponerlo en esta página por una sencilla razón, y es que , como ocurre con muchos scripts, tiene problemas con los acentos con lo que las categorías se muestrarn con errores tipográficos. Si quereis verlo en funcionamiento podeis pasaros por Manda Carallo.

Este truco es obra, una vez más, de Hoctro

Emoticonos en el Blog

2007-02-25T01:37:00.000+01:00

Una manera sencilla de darle un poco de vida a tus posts es la inclusión de emoticos, o smilies... Existen diferentes maneras de hacerlo, todas ellas más o menos complicadas, pero sin duda, esta que os voy a comentar es a prueba de tontos... sin ofender... que yo también busco siempre cosas sencillas. Este truco nos lo ofrece The Last Word, uno de los mejores Blogs de Hacks que podeis encontrar.

Lo único que debéis hacer es copiar el código que os ofrecen en la página y pegarlo justo encima del cierre de la etiqueta HEAD del blog como ya hemos hecho más veces.

A partir de este momento, el script se encargará de buscar en vuestros posts los caracteres que sustituirá por los emoticonos.

Estos son las combinaciones que reconoce el script:

) o :-) 
:( o :-( 
:P o :-P 
:D o :-D 
:$ o :-$ 
;) o ;-)

Beatiful Beta Auto Widget Install

2007-02-21T12:25:00.000+01:00

Esta herramienta, además de ser muy pero que muy fácil de instalar en nuestra plantilla nos la dejará lista para poder luego meterle mano con los muchos widgets que Beatiful Beta oftrece, entre los que recomiendo el de "Últimos Comentarios" y "Buscador" que pondré aquí más adelante.

Lo único que deberemos hacer es introducir una línea de código enre los HEADS de la plantilla.

La cosa debería quedar algo así:

<head>
.
.
.
.
.
<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>
.
.
.
</head>

Guardad vuestra plantilla y ya la teneis lista para acceder a los widgets de Beatiful Beta, que repito, algunos son realmente interesantes, como por ejemplo el Buscador, los Últimos Comentarios y los Posts Recientes. Todos estos Widgets los podéis encontrar aquí, y una vez introducida la lína de código no tendréis más que pulsar en el botón y esperar a que acabe el proceso. Para evitar errores, es recomendable que tengáis iniciada la sesión en Blogger. Después, como siempre, podréis cambiar y retocar el código a vuestro gusto.

Imágenes aleatorias en la cabecera

2007-02-01T23:58:00.000+01:00

En relidad este pequeño truco vale tanto para imágenes como texto, pero normalmente es el tema de poder situar una cabecera aleatoria para el blog para lo que más se suele usar este tipo de scripts. Este truco consta de dos partes. Un primer script que colocaremos por ejemplo en la cabecera y justo debajo la segunda parte del código.

Evidentemente tendremos que tener al menos un par de imágenes preparadas que tendremos que subir a la red. La primera vez que usé este truco usé a blogger como host de las imágenes subiéndolas en un post y luego copiando el código, pero no se por qué, ahora con la nueva versión de bloger eso no funciona así que las podremos subir a imageshack o cualquier otro servicio de hospedaje de imágenes.

Lo primero que vamos a hacer es borrar la cabecera actual del blog para lo cual buscaremos en la plantilla un código más o menos como este:

<b:widget id='Header1' locked='true' title='Titulo del Blog (cabecera)' type='Header'/>

Eliminamos esa línea con lo que ya no se mostrará el título del blog en la cabecera. Ahora es el momento de ir a la página de diseño e introducir en la cabecera este elemento como HTML/JavaScript:

<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>

Guardamos los cambios y añadimos la segunda parte del código de la misma manera, pero asegurándonos de que quede justo debajo del anterior.

<script language="javascript" type="text/javascript">
var randHdr = randRange(1,3);

if (randHdr == 1) {
document.write('<img src="URL IMAGEN 1">')
} else if (randHdr == 2) {
document.write('<img src="URL IMAGEN 2">')
} else if (randHdr == 3) {
document.write('<img src="URL IMAGEN 3">')
}
</script>



Sustituímos las zonas coloreadas de rojo por la direccón de la imagen que hemos subido y voilá. Ya tenemos una cabecera con imagen aleatoria en el blog.

Si queremos añadir más imágenes tenemos que ir añadiendo líneas de código para cada una de ellas y poner el número total de ellas en el valor randRange(1,nºtotal de imágenes)

Cuenta Atrás

2007-02-01T11:08:00.000+01:00

Un pequeño script para situar en la plantilla una cuenta atrás para lo que queramos. En este caso son los días que faltan para una boda, pero se puede cambiar para lo que sea. El código es el siguiente:

<script languaje="javascript">

//cambiar el texto

var before="nuestra boda"

var current="Hoy es nuestra boda!"

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec" )

function countdown(yr,m,d){

var today=new Date()

var todayy=today.getYear()

if (todayy < 1000)

todayy+=1900

var todaym=today.getMonth()

var todayd=today.getDate()

var todaystring=montharray[todaym]+" "+todayd+", "+todayy

var futurestring=montharray[m-1]+" "+d+", "+yr

var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1)

if (difference==0)

document.write(current)

else if (difference>0)

document.write("Faltan "+difference+" días para "+before)

}

//cambiar la fecha

countdown(2007,6,16)

</script>

Los parámetros a cambiar son la fecha y el texto que queramos. Para ello ponemos la fecha deseada en donde pone countdown (año, mes, día) y los textos en "var before" y "var current"

Para meterlo en la plantilla no tenemos más que ir a diseño y añadir un elemento HTML/javascript en la zona de la plantilla que queramos