Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Blogger. Usar condiciones

30/06/2009
Una condición se forma con una serie de instrucciones y nos permite hacer algo sólo si se cumple determinado supuesto. Básicamente sería algo así:

SI autor = oloman, imprime dibujo1
SI NO ES ASI, imprime dibujo2
CERRAR SI

Esto, claro está, hay que hacerlo en un lenguaje que nuestro ordenador entienda y en el caso concreto de Blogger, en idioma Blogger. En el caso del anterior ejemplo, el código sería de este estilo:
<b:if cond='data:comment.author == "Oloman"'> <img src='dibujo1.jpg'/>
<b:else/> <img src='dijujo2.jpg'/>
</b:if>

Las condiciones pueden ser de igualdad (==) o de desigualdad (!=) y a cada lado deben llevar algo comparable. Puede ser etiquetas DATA que contengan cualquiera de los datos de nuestro blog almacenados por Blogger o caracteres de cualquier tipo. En este último caso deberán ir entre comillas dobles, tal y como podeis ver en el código mostrado arriba como ejemplo. Como las comillas dobles no le sientan bien a nuestra parte HTML, hay que sustituirlas por &quot; para que funcione bien el código.

La utilización de </b:else> (SI NO...) es opcional, pero todo <b:if cond... debe llevar siempre su cierre (</b:if>)

El uso de condicionales es especialmente útil para que ciertos elementos se muestren en un tipo de páginas o no. Para ello, es necesario conocer cómo las bautiza Blogger:

data:blog.pageType es una variable Blogger que guarda el tipo de página en el que estamos. Puede ser igual a:
  • "item", que indica la página individual de cualquier entrada (permalink)
  • "archive", que representa las páginas de navegación por etiquetas o siguiente-anterior
  • "index", la página de inicio
Sabiendo esto, si por ejemplo queremos que el gadget HTML5 de nuestra plantilla, sólo aparezca en las páginas individuales de cada entrada y no en el resto, insertaremos una condición que englobe todo el código que muestra los datos resultantes del gadget (es necesario tener plantilla de artilugios expandidos):

<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

Las líneas en verde son las que hemos insertado para conseguir que ese artilugio se vea sólo si la página en la que estamos es de una entrada individual. En todos los demás casos (Inicio, página de etiquetas, post resumidos...) no se verá el artilugio HTML5.

No se ha previsto hacer nada en el caso de que la igualdad no se cumpla. Si quisiéramos hacer algo distinto y que saliera otra cosa en las páginas que no cumplieran la condición (estaríamos en páginas que no son entradas individuales), tendríamos que usar la etiqueta </b:else> con la estructura del primer ejemplo (dibujo1-dibujo2)

Hay otras etiquetas DATA interesantes para condicionar cosas que queremos que se ejecuten en unos sitios sí y en otros no:
  • data:blog.pageTitle es el título de la página actual que, generalmente, es el título del blog más algún otro dato adicional
  • data:blog.pageName es el título de la página que generalmente coincide con el título del post
  • data:blog.pageType es el tipo de página donde estamos (item archive index)
  • data:blog.homepageUrl la dirección URL de la página de inicio del blog
  • data:blog.url es la dirección URL de la página donde estamos
(*) Esta última relación es un extracto literal de un post de Vagabundia, dónde podeis encontrar todas las etiquetas DATA que maneja Blogger.

De esta manera, si por ejemplo queremos que cierto elemento se muestre sólo en una entrada concreta y en ningún sitio más, tendríamos que cambiar la línea que fija la condición a cumplir, de la siguiente manera:

<b:if cond='data:blog.url == &quot;http://oloblogger.blogspot.com/2009/06/videos-aleatorios-bpt.html&quot;'>


¿Que más podemos hacer? Pues volviendo al ejemplo del principio del todo, podemos por ejemplo conseguir, que cuando un comentario está escrito por cierto autor, el estilo del texto sea personalizado. El código ya lo facilitamos anteriormente, pero sin explicar demasiado cómo funcionaba. Realmente lo que hicimos entonces, fue comparar las etiquetas data:comment.author (autor del comentario) y data:post.author (autor del post). Si eran la misma persona se usaba un estilo y si no, pues se usaba otro distinto.

También podemos discriminar ciertos post por el nombre de alguna de sus etiquetas (data:label.name), podemos hacer cosas distintas para post con fechas distintas (data:post.dateHeader), generar algún cambio si el siguiente post en la navegación por antiguos/recientes detectamos cierto título o URL (data:newerPageTitle, data:newerPageUrl), entr otras cosas.

No sé para qué puede servir esto último, pero seguro que alguien le encuentra utilidad. Todas las etiquetas DATA son susceptibles de comparación y por tanto, con todas ellas se pueden crear condiciones.


Vídeos aleatorios. BPT.

26/06/2009


Después de mostrar cómo hacer un gadget para mostrar frases aleatoria, otro para imágenes aleatorias y otro con imágenes que incluían enlaces, que me pidais la manera de insertar vídeos aleatorios es ya de BPT... con todos mis respetos, como siempre. Así que a pesar de hacer un post completo para este tema, no puedo por menos que etiquetarlo dentro de la categoría indicada.

Quizás el mejor lugar para colocar este gadget, sería como un nuevo idem en la barra lateral, seleccionando el tipo HTML/JAVASCRIPT. El código base es este:

<script type="text/javascript">
enlace = new Array();
enlace[0] = 'CODIGO_OBJECT_EMBED_VIDEO_1';
enlace[1] = 'CODIGO_OBJECT_EMBED_VIDEO_2';
enlace[2] = 'CODIGO_OBJECT_EMBED_VIDEO_3';
enlace[3] = 'CODIGO_OBJECT_EMBED_VIDEO_4';

aleatorio = Math.random() * (enlace.length);
aleatorio = Math.floor(aleatorio);
document.write('<div align="center">' + enlace[aleatorio] + '</div>');
</script>

CODIGO_OBJECT_EMBED_VIDEO_X es el código que por ejemplo facilita YouTube para insertar un vídeo. Hay que ponerlo tal cual, con todos sus símbolitos, entre las comillas simples.

Podeis añadir tantas líneas enlace[x] = '... como querais, pero siempre respetando la numeración consecutiva de la matriz.

Como en el ejemplo que podeis ver a continuación, los parámetros WIDTH y HEIGHT del código para embeber objetos, se puede cambiar, pero en este caso hay que respetar la proporcionalidad: a mitad de ancho, corresponde la mitad de altura.

Para comprobar que cada vez sale un vídeo distinto, teneis que refrescar la página.


Navegación Blogger. Entradas antiguas/más recientes.

19/06/2009
En Blogger, existen un par de maneras de ir navegando por los posts publicados. Una es la navegación por etiquetas, que consiste en acceder secuencialmente a las entradas que tienen una misma idem. Este es un gadget que se añade directamente desde Elementos de Página y que normamente no presenta problemas mayores.

La otra es seguir los enlaces que habitualmente están en la parte inferior del blog, justo detrás de las entradas, y que nos indican que podemos ir a "Entradas antiguas", "Entradas más recientes" o a "Inicio".



Algunas plantillas no incluyen estos enlaces, pero no es porque Blogger no incluya el código necesario, sino más bien porque no hay ningún sitio en esas plantillas que "llamen" a la ejecución de ese código. Así que vamos a ver cómo funcionan este tipo de artilugios y cómo conseguir que hagan lo que tienen que hacer.

Los artilugios de plantilla son utilidades que se incluyen dentro del LOOP de Blogger. El LOOP es un bucle en el cual se ejecutan determinadas instrucciones rutinarias, un determinado número de veces.

Los códigos en una plantilla estándar para mostrar los elementos básicos de un blog, están siempre ahí, dentro del WIDGET con ID=BLOG, que es el artilugio principal. Sin embargo, a veces no nos aparecen sus resultados o no hacen lo que deben hacer. Esto es porque desde otra parte del código hay que llamar a la rutina correspondiente para que se ejecute. Esto se hace en Blogger con una etiqueta INCLUDE. Pongamos que quiere decir "incluir" y con eso quizás estará más claro.

En esencia y dicho de otra manera, en Blogger, si existe una tarea que vamos a usar muchas veces, hacemos un trozo de código dentro de una etiqueta INCLUDABLE y luego la llamamos para que se ejecute, todas las veces que nos haga falta, con una etiqueta INCLUDE.

Dicho esto, veamos en concreto el artilugio para conseguir los enlaces Entradas antiguas / Entradas más recientes. Dentro del WIDGET antes indicado (BLOG1), podemos encontrarlo con un ID='NEXTPREV'. Aquí puedes echarle un vistazo al artilugio completo.


Esta rutina está a prueba de bomba. Podeis borrarla completa desde b:includable hasta /b:includable, guardar la plantilla y cuando volvais a editarla, comprobareis que sigue estando ahí. Se conoce que Blogger la considera indispensable y la incluye automáticamente aunque se intente borrar. Se puede modificar pero no eliminar, aunque eso es otra historia.

Entonces, ¿cómo puede ser que en mi plantilla no se vean estos enlaces si siempre está el código del INCLUDABLE? Pues por lo que hemos explicado anteriormente... el código está y lo que simplemente ocurre, es que no hemos solicitado que se ejecute mediante un INCLUDE.

Ahora que sabemos esto la solución para que veamos lo que no conseguimos ver es bien sencilla. Elegimos el lugar dónde queremos "incluir" nuestros artilugio (en este caso NEXTPREV) y ponemos:

<b:include name='nextprev'/>

Listo.

Sólo una cosa más... esta rutina o INCLUDABLE está siempre en el mismo sitio dentro de todo el código de la plantilla, pero el INCLUDE lo podemos poner dónde nos apetezca. Habitualmente se coloca después del cierre (/div) del <div class='blog-posts hfeed'>, con lo que se muestra al final de la página. Pero también lo podemos poner, por ejemplo, tras <div class='post-header-line-1'> y lo veremos después del título del post, tal y cómo podeis ver (en el momento de escribir esta entrada) en las paginas individuales de este blog.



Y nada impide colocarlo más de una vez: arriba, debajo de un post, más abajo...


Problemas con fecha en Notepad Chaos y otras

16/06/2009
Como ya han sido más de dos los que me han preguntado por el "undefined" que aparece en algunas versiones de la plantilla Notepad Chaos, me parece que es hora de explicar como solucionar ese problema con las fechas.

Realmente, se trata del SCRIPT que genera dicha fecha y de hecho, afecta a varias plantillas que tienen este mismo código. Por ejemplo, le ocurre también a la plantilla Aspire. Este es el código de marras:

<div class='post-inner'>

<script type='text/javascript'>
var timestamp = &quot;<data:post.timestamp/>&quot;;
if (timestamp != &#39;&#39;) {
var timesplit = timestamp.split(&quot;,&quot;);
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(&quot; &quot;);
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>

<div class='date-tab'>

<span class='month'><script type='text/javascript'>document.write(date_mmm);</script></span>

<span class='day'><script type='text/javascript'>document.write(date_dd);</script></span>

</div>

<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Hay varias soluciones y esta es sólo una de ellas. En primer lugar, entramos en Configuración-->Formato y cambiamos el formato de fecha al de "13 de Junio de 2009". El SCRIPT que utilizaremos en esta ocasión, corta el texto por los espacios en blanco y por eso utilizamos ese formato. El nuevo SCRIPT, sería este:

<div class='post-inner'>

<div class='date-tab'>

<script type='text/javascript'>
function calendario (cual){
var lafecha = cual.split(&#39; &#39;);
fday = &quot;<span class='day'>&quot;+lafecha[0]+&quot;</span>&quot;;
fmonth = &quot;<span class='month'>&quot;+lafecha[2]+&quot;</span>&quot;;
fyear = &quot;<div>&quot;+lafecha[4]+&quot;</div>&quot;;
document.write(fday);
document.write(fmonth);
}
</script>
<script>calendario(&#39;<data:post.dateHeader/>&#39;);</script>

</div>

<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


El código marcado en gris es el que no hay que cambiar y se ha reproducido para situar la colocación del antiguo y del nuevo código.

Si decidís usar otro formato de fecha, hay que cambiar el elemento "divisor" en la línea var lafecha = cual.split(&#39; &#39;); Si por ejemplo utilizamos 13/06/2009, habría que sustituir el espacio en blanco por una barra:
var lafecha = cual.split(&#39;/&#39;);

Con el primer formato explicado las palabras "de" hacían que los números que indican la posición de los distintos cortes fueran respectivamente 0, 2 y 4. Por tanto, si cambiamos el formato de fecha, todavía habrá que hacer una sustitución más y cambiar los números entre los corchetes:

fday (día) seguiría siendo el elemento [0] (el primero), pero ahora fmonth (mes) pasaría a ser el elemento [1] (el segundo) y fyear, que no utilizamos en este caso, pero que ahí queda por si alguien lo necesita, pasaría a ser el elemento [2] (el tercero).

Actualización: En algunos casos os podeis ahorrar estos cambios, simplemente cambiando el formato de fecha en Configuración-->Formato --> Formato de cabecera de fecha. Probad esto primero en cualquier caso.


Post en forma de sumarios (leer más) en dos pasos

13/06/2009
Acabo de encontrar este SCRIPT en Quite Random y es sencillamente... cómo decirlo: ¡sencillo! Allí citan que el creador es BloggerSphera.

Sólo con dos cambios, podemos conseguir un blog estilo magazine. Incluye unos sumarios de las entradas e incorpora una imagen si el post tiene alguna. Por supuesto, incluye el consabido "leer más" y lo que es mejor, sin necesidad de incluir nada especial al crear tus entradas. Oséase... automático. Además, como no es muy largo se puede insertar directamente en la plantilla para no depender de servicios de almacenaje externos.

Quizás el único fallo es que necesita escalar la imagen para que todas se vean igualitas, en lugar de recortarlas que quizás sería lo óptimo. No obstante, el resultado me ha parecido muy bueno.

Y sin más preámbulo, el montaje del sistema:

Paso 1. Localizar el </head> y justo antes insertar este código que incluye el estilo y el SCRIPT.

<!-- SUMARIOS AUTOMATICOS -->
<style type='text/css'>
.leermas {
}
.post-thumbnail {
float:right;
margin:0px 0 10px 10px;
}
.centrar-imagen {
display:block;
text-align:center;
margin:0px auto;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1) {
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;
if(img.length>=1) {
if(thumbnail_float) {
imgtag = '<img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/>';
summ = sumario_img;
}
else {
imgtag = '<img class="centrar-imagen" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

var thumbnail_float = true;
sumario_noimg = 340;
sumario_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
//]]>
</script>

Paso 2. Busca la línea <p><data:post.body/></p> y la sustituyes por esto otro.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;);</script>
<a class='leermas' expr:href='data:post.url'>Leer más &#187;</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

Puedes ver el resultado con Vista Previa y si te gusta, guardarlo.

Con esto ya tienes algo bastante majo, pero puedes personalizarlo un poco con las clases que se nombran en primer lugar y con los últimos parámetros del código del SCRIPT:

  • .leermas: Aspecto del enlace, como color, tamaño, tipo de letra fondo. También se puede añadir un HOVER.
  • .post-thumbnail: Tal como está, la imagen flota a la derecha. Se puede cambiar a la izquierda.
  • .centrar-imagen: Esta clase se usa cuando se escoge (más adelante) que la imagen no flote. En ese caso, la centra.
  • var thumbnail_float: Valor TRUE para que flote. FALSE para que se centre encima del texto del sumario.
  • sumario_noimg: Número de caracteres a mostrar para post sin imágenes.
  • sumario_img: Idem para post con imágenes. Normalmente menor que en el anterior caso para que ocupen más o menos lo mismo.
  • img_thumb_height: Altura de la imagen miniatura en pixels.
  • img_thumb_width: Anchura de la imagen miniatura en pixels.
Colocando imágenes alargadas tipo banner al principio de los posts, puede resultar muy interesante poner la variable var thumbnail_float con el valor FALSE y un ancho grande (por ejemplo 400x90px), para que simule cabecera de post.


Lista de comentaristas (Top ten)

10/06/2009
He aquí un par de artilugios, para mostrar en vuestra barra lateral una relación de los usuarios que más comentan en vuestro blog. Ambos están basados en las PIPES de Yahoo.

El primero está publicado en Vagabundia, y extrae los datos de los últimos 5.000 comentarios publicados en vuestro blog:

<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ol>");
var i;
for (i = 0; i < obj.count ; i++) {
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ol>");
}
</script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2FNOMBRE_BLOG.blogspot.com&num=10&filter=Anonymous,Anonimo,Nombre_autor" type="text/javascript"></script>

Basta con copiar y pegar este código en un nuevo elemento HTML en vuestra barra lateral y antes de guardar, insertar el nombre de vuestro blog (NOMBRE_BLOG), sustituir el número (10) de comentaristas a mostrar y colocar vuestro nick en el filtro (Nombre_autor). Esto último sólo si no quereis descubrir que sois los que más comentais en él :)


La segunda opción está sacada de El escaparate que nos chivó la existencia de un instalador automático para el gadget en Blogger Widgets. Aunque actualmente hay un aviso de que no funciona, lo cierto es que la he probado y hace lo que tiene que hacer. Además, tarda menos en cargar que la primera explicada, porque sólo analiza los últimos 500 comentarios y tiene una simpática novedad: el nombre del comentarista es un enlace a su perfil o a su blog. O lo que es lo mismo, una manera de regalar un enlace a vuestros comentaristas más activos. Se instala y se configura igual que el anterior, salvo que querais usar el sistema BPT.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++) {
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2FNOMBRE_BLOG.blogspot.com&num=10&filter=Anonymous,Anonimo,Nombre_autor" type="text/javascript"></script>


Como siempre, podeis crear una clase para formatear el aspecto de salida de la lista y después incorporarla al DIV contenedor.


Cambiando que es gerundio

07/06/2009
Le tenía mucho cariño a mi plantilla. Más que nada porque llevaba con ella desde mis inicios. Pero resulta que un amigo no para de darme la brasa con que no se llevan los fondos oscuros, que mejor fondos claros, que si el estilo 2.0, que si... En fin, que al final ha conseguido que mirara por ahí y he encontrado otra cosa que me gustaba casi más que la plantilla histórica. Lo cierto es que al final no le he hecho demasiado caso y me ha salido algo más grunge que lo que él pretendía. Además, no es precisamente lo que se lleva.

El diseño está basado en la plantilla Notepad Chaos, que es un diseño original de Evan Eckard para WordPress y que GosuBlogger ha "Bloggerizado" convenientemente.

Siempre me ha gustado esa plantilla, porque tengo debilidad por los blogs con aspecto de cuadernos, libros o similares, pero tampoco era del todo lo que me cuadraba. Así que unos cuantos retoques para hacerla más barroca y ¡voila!.

In memoriam, dejaremos aquí una imagen con la plantilla de siempre y como parece que a mucha otra gente (no a mi colega, claro) sí que le gustaba, a ver si saco un rato para colgar la plantilla completa y que os la podais descargar.

Aunque esta nueva me he hartado de probarla, si observais algún bug, os agradecería que me dejarais un comentario aquí mismo. Gracias.

Prueba


Entradas antiguas/recientes. Menú flotante.

06/06/2009
La idea es de La Mujer Quijote, a quién se le ocurrió que podía ser interesante unir el truco del boton para ir arriba y la creación de marcadores, para mostrar a manera de menú flotante, los enlaces Blogger de Entradas más recientes - Página principal - Entradas Antiguas.

Aunque es una cosa sencilla de hacer, para que el resultado quede más o menos mono, hay que retocar algunas líneas tanto de CSS como de la parte HTML .

Empezamos por la hoja de estilo (plantillas de artilugios expandidas para lo que vendrá después) y buscamos los contenedores de estos enlaces. Si no se ha modificado se llamarán BLOG-PAGER, BLOG-PAGER-NEWER-LINK y BLOG-PAGER-OLDER-LINK. Cogemos las tres clases, las borramos completas y en su lugar ponemos esto otro.

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: left;
}
#home-link {
float: left;
}
#blog-pager {
text-align: left;
position:fixed;
top:100px;
left:100px;
}
* html #blog-pager{ /*IE only*/
position:absolute;
}

Simplemente hemos alineado el NEWER y el OLDER flotando a la izquierda, hemos creado una nueva clase para el HOME, se ha reconfigurado el BLOG-PAGER para que quede fijo (flotando) a cierta distancia de los márgenes de pantalla y se ha añadido un pequeño hack para que en IE6 (cómo no) haga algo parecido a lo que queremos.

Dando a Vista Previa, ya podremos ver como funciona con el enlace a Entradas Antiguas que tengamos configurado actualmente, así como la posición que va a ocupar.

Esta posición puede configurarse, cambiando TOP por BOTTOM y/o LEFT por RIGHT. Asimismo con el valor en pixels de cada coordenada, que puede cambiar de valor o ser sustituido directamente por una distancia en porcentaje (10%, por ejemplo). Esto ya será al gusto de cada cual.

Para rematar la faena y recordando el post de cómo sustituir los enlaces de entradas anteriores/siguientes por imágenes, en este caso quedarán mejor unas pequeñas imágenes que los textos estándar, así que vamos a ello.


Os recordamos que todavía no hemos grabado nada, aunque tampoco sería un problema si lo habéis hecho. Se busca el artilugio que comienza con...

Ver todo el artilugo [+/-]

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>


...y se sustituye entero (desde <b:includable> hasta </b:includable>, ambos inclusive) por este otro...

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img alt='Entradas posteriores' src='http://img37.imageshack.us/img37/2346/izda.jpg' title='Entradas posteriores'/> </a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<span id='home-link'> <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Inicio' src='http://img505.imageshack.us/img505/2268/inicio.gif' title='Inicio'/></a> </span> <b:else/> <b:if cond='data:newerPageUrl'> <span id='home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Inicio' src='http://img505.imageshack.us/img505/2268/inicio.gif' title='Inicio'/></a> </span> </b:if> </b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img alt='Entradas anteriores' src='http://img41.imageshack.us/img41/3490/dcha.jpg' title='Entradas anteriores'/></a>
</span>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Se ha puesto el código entero para que sólo tengais que borrar, copiar y pegar, pero sólo se han reordenado los distintos enlaces para que se muestren en el orden izquierdo-inicio-derecho, se ha incluido la clase HOME-LINK para el enlace del inicio y se han sustituido los mensajes de cada enlace por imágenes. Esas imágenes las podeis cambiar por otras que hagan juego con vuestro diseño.


25 Blogs de ayuda en castellano... más

03/06/2009

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba