Quickribbon

lunes, 26 de febrero de 2007

Últimos artículos por categoría

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

17 comentarios:

Batto dijo...

Este truco está muy chulo, casi es lo que ando buscando desde hace días.

¿Como podría hacer lo mismo, pero de una categoría en concreto? Aunque esa categoría estuviera a piñon metida en el código, no se si me explico.

Si miráis mi blog (www.ramenparados.com) veréis que tengo algunas entradas etiquetadas como NOVEDADES, q son las novedades de manga y anime que salen, mi intención es pponer una columna de ULTIMAS NOVEDADES similar al de ULTIMAS ENTRADAS, pero solo de la entradas etiquetadas así.

Saludos ;)

Zaebos dijo...

Pues creo que estás de suerte, porque hace poco encontré un truquillo similar a este que es el que uso para mostrar "últimos contenidos" que tengo en la barra lateral derecha... en este puedes escoger que categoría mostrar...pero aún no había posteado el truco, pero me anticipo y te lo cuento. tienes que incluir este código justo después del cierre de un widger, después si quieres lo mueves desde la plantilla de diseño. el código es este:

<b:widget id='HTML4' locked='false' title='Contenidos por Categoría' type='HTML'>
<b:includable id='main'>
<!-- *****************http://hoctro.blogspot.com*****Dec,2006****************** -->
<!-- <b:if cond='data:blog.pageType == "item"'> -->
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='data2006'/>
<script type='text/javascript'>

var homeUrl2 = "karalletest.blogspot.com";
var labels = ["ULTIMAS NOVEDADES"];

function listEntries2(json) {
var ul = document.createElement('ul');

for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}

for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl2.length+21);
var k;
for (k=0; k<20; k++)
label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('h4');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2006').appendChild(div1);
}
}
}

function search2(query, label) {

var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + label +
'?alt=json-in-script&callback=listEntries2');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

for (var i=0; i < labels.length; i++)
if (labels[i])search2(homeUrl2, labels[i]);
</script>
</div>

<b:include name='quickedit'/>
<!-- </b:if> -->
</b:includable>
</b:widget>


Copia este código y fijate donde pone ULTIMAS NOVEDADES... tiene que coicidir con el nombre de la categoría que quieras mostrar. SI quieres mostrar más, no tienes más que añadirlas y ya está.
De todos modos, pondré este código en el blog en los proximos días mejor explicado.

Saludos

Zaebos dijo...

Bueno.. lo he copiado desde mi plantilla(salvo lo ultimas novedades) con lo que la id="html4" se corresponde con mi plantila. Si tu ya tienes un Widget HTML4 no te va a dejar ponerlo. Cambialo por HTML50 o el número que quieras para que no coincida con ningun otro.

Espero que te sirva, de todos modos, lo pondré en el blog en breve.

saludos otra vez

Zaebos dijo...

ups... por poco me lo dejo en el tintero... por supuesto tienes que cambira la URL de mi página por la tuya... en donde pone :
var homeUrl2="tu página.blogspot.com"

creo que ahora ya no me dejo nada

;)

Gem@ dijo...

Pues me alegra un montón por batto porque yo andaba buscando lo mismo desde que me lo pregunto el otro día ;)

Batto dijo...

Gracias Zaebos, me pondré a probarlo ahora mismo. A ver si no meto la pata.

PD: Buenas Gem@, me alegro de que leyeras mi postit! ^_^x

Gracias a los dos estoy aprendiendo bastante en esto de los blogs.

Batto dijo...

Vale, probado... y no me funciona, me dice que algún tag del XML no está bien cerrado.

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The content of elements must consist of well-formed character data or markup.


He estado revisando y salvo q la haya pifiado cambiando las dos o tres tonterías que me has comentado, creo q está bien.

Como mee dijiste tenía un widget HTML4, por lo q lo renombré al 5, metí mi url y cambie el texto de la etiqueta a buscar, no hice nada más.

Tb como me dijiste lo metí detrás de un widget, el HTML4.

PD: Si me decis como poneros el código os pego aquí lo que quería meter.

Zaebos dijo...

bueno... voy a revisarlo bien... a ver si se me ha pasado algo por alto

Zaebos dijo...

Jajajaja¡¡ ya encontré el fallo¡¡... creo... es que para poder mostrar código en blogger sin que lo interprete tengo que sustituir los < > por otro texto para que se muestren , pero no se interpreten.. la cuestión es que eso lo hago con un script que me los cambia... el tema es que curiosamente en este widget hay unas partes de texto que se interpretan como < y > al ponerlo en el blog... jejeje, normal que te ponga que no están bien cerradas... jejeje


Haz una cosa, copia el código directamente desde la página de Hoctro, que es el autor del widget y cambias los valores de URL y categoría que quieras mostrar por la tuya... eso si, la categoría no puede tener más de 3 palabras y además te recomiendo que no tenga caracateres no sajones como acentos y ñs...

a ver si así te va.

http://hoctro.blogspot.com/2006/12/killer-hack-contents-by-category.html

Zaebos dijo...

http://hoctro.blogspot.com/
2006/12/
killer-hack-contents-by-category.html

te la pongo así porque se corta la dirección... ji ji ji

Batto dijo...

Ahora lo probaré q ando viendo el final de Final Fantasy Advent Children XDDD

Por cierto, una imagen para enlazaros? Sois la caña ;)

Batto dijo...

Funciona ^_^x

Ahora una cosa más (soy pesado eh?) como podría quitar el texto que indica la categoría/Etiqueta si solo muestro una?

es decir, como puedo quitar el texto "Novedades" de encima de los links?

Saludos y de nuevo gracias!

Zaebos dijo...

prueba borrando esta línea del código:
h.appendChild(txt);

Batto dijo...

Joder macho, eres un crack.. PERFECTO!

Repito, tenéis alguna imagen para poder colgaros un enlace en mi blog? Sois geniales ;)

Zaebos dijo...

Jajaja... gracias.. pero es pura suerte¡¡¡ te lo garantizo porque no tengo ni idea de HTLM, Javascript ni nada por el estilo... lo único que hice fue lo de siempre.. ensayo y error probando a borrar lineas del código que pudieran tener que ver con el texto de la categoría... respecto a la imagen... pues no tengo nada, porque este blog lo abrí más que nada para probar trucos ... otra cosa es qe como el resultado me gusta.. pues sigo poniendo lo que pruebo y veo que funciona... así que de nada, si te sirve de ayuda me alegro.

Zaebos dijo...

jaja.. por no saber.. hasta he escrito mal HTML.. jejeje

Gem@ dijo...

Así estamos todos probando y aprendiendo de los errores ;)
Yo si tengo una imagen para enlazarme y el otro día hablaba en mi blogs de la importancia de el intercambio de links.
A Batto ya le tengo enlazado, mañana sin falta te enlazo a ti zaebos ;)
(Es muy tarde, feliz descanso)

Template Designed by Douglas Bowman - Updated to New Blogger by: Blogger Team
Modified for 3-Column Layout by Hoctro
Re Updated by Zona de Pruebas