Títulos de todas o ultimas entradas del blog (widget)

Emilio me preguntaba en un comentario si conocía alguna forma de mostrar todas las entradas del blog por su título, pero además quería disponer de una barra de scroll (scrollbar) en el mismo widget, para evitar que este se alargara en exceso.
Me he acordado que tenía una entrada en borradores sobre un widget de Hoctro´s que precisamente muestra los títulos de todas las entradas de nuestro blog o un número menor de nuestras últimas entradas, y he incluido una leve modificación en su código para añadirle una barra de scroll.

[1] En primer lugar necesitaremos acceder dentro de nuestro panel de Blogger a la pestaña "Configuración" -> "Feed del sitio" y en el desplegable de "Permitir Feeds del blog" seleccionar el modo "Completo".
Tendremos que ir después, también desde "Configuración" a la pestaña "Archivo" y seleccionar "Si" en la opción "Habilitar páginas de entrada".

[2] Una vez hecho esto, tendremos que añadir este código en nuestra plantilla justo antes de </head> (no hará falta expandir la plantilla de artilugios):

<script type='text/javascript'>

// Developed by Hoctro - All rights reserved 2007

// This credit must be included in all your derived usages.

// &quot;cb&quot; is intended to be a common library, where different widgets would

// utitlize the shared operations such as getTitle, getLink, etc. from a json object.

var cb = {

// search function requires these parameters:

// 1. query: a blogger address, such as &quot;hoctro.blogspot.com&quot;,

// 2. type: type of return data, either &quot;comments&quot; or &quot;posts&quot;,

// 3. start: the start-index parameter (where to start extracting data)

// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)

// 5. func: the returned function the json object will feed.

search: function(query, type, start, increment, func) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/&#39; + type + &#39;/default?alt=json-in-script&amp;start-index=&#39;

+ start + &#39;&amp;max-results=&#39; + increment + &#39;&amp;callback=&#39; + func + &#39;&amp;orderby=published&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

document.documentElement.firstChild.appendChild(script);

},

// searchLabel function return a result of posts w/ a label query

// it requires these parameters:

// 1. query: a blogger address, such as &quot;hoctro.blogspot.com&quot;,

// 2. an array of labels

// 3. func: the returned function the json object will feed.

searchLabel: function(query, label, func) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39; + encodeURIComponent(label) +

&#39;?alt=json-in-script&amp;callback=&#39; + func + &#39;&amp;orderby=published&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

document.documentElement.firstChild.appendChild(script);

},

// getTotalResults needs the json object, and it&#39;ll return the total number of comments (or posts) of the blog.

getTotalResults: function(json) {

return json.feed.openSearch$totalResults.$t;

},

// getStartIndex gets the start index of a search inside an json object.

getStartIndex: function(json) {

return json.feed.openSearch$startIndex.$t;

},

// getLink return a href link if &quot;name&quot; matches the content inside &quot;a&quot; tags) of the link

getLink: function(entry, name) {

var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {

if (entry.link[k].rel == name)

alturl = entry.link[k].href;

}

return alturl;

},

// getTitle gets the title of the title of an entry of a json object.

getTitle: function(entry) {

return entry.title.$t;

},

// getContent gets the content inside an entry of a json object.

getContent: function(entry) {

return entry.content.$t;

},

// getCommentAuthor: gets the commenter name inside an entry of a json object.

getCommentAuthor: function(entry) {

return entry.author[0].name.$t;

},

// Given a json label search, this function return the decoded label.

getLabelFromURL: function(json) {

for (var l = 0; l &lt; json.feed.link.length; l++) {

if (json.feed.link[l].rel == &#39;alternate&#39;) {

var raw = json.feed.link[l].href;

// The next two lines are borrowed from Ramani&#39;s Neo Template

// code. Thanks Ramani!

var label = raw.substr(raw.lastIndexOf(&#39;/&#39;)+1);

return decodeURIComponent(label);

}

}

},

txt : function (s) {

return s + &quot; Widget by &lt;a href=&#39;http://hoctro.blogspot.com&quot; + &quot;&#39;&gt;Hoctro&lt;/a&gt;&quot;;

}

};

</script>

[3] Localizamos ahora la línea más abajo dentro del código de nuestra plantilla, que es la que marca el comienzo de la sidebar:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Justo debajo de esa línea añadiremos el código necesario para mostrar el widget que, en un principio, se verá el primero de los añadidos a nuestra sidebar, pero que más tarde podremos mover al lugar que queramos:

<b:widget id='HTML50' locked='false' title='TODAS LAS ENTRADAS' type='HTML'>

<b:includable id='main'>

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

<ul><div id='dataPost' style='height:400px; overflow:auto;'/></ul>

</div>

<script type='text/javascript'>

// Developed by Hoctro - All rights reserved 2007

// This credit must be included in all your derived usages.

// This widget lists the available posts based on the uP.nPost value below

// Use -1 if you want them all.

var uP = {

nPost : -1

};

var cP = {

// private variable to store the total results

totCount : 0,

// the number of elements for each json call

increment : 10,

// this is the place to define the blog name for subsequent retrieval data

web : &quot;elescaparatederosa.blogspot.com&quot;,

listPosts: function(json, tag) {

var text=&quot;&quot;;

for (var i = 0; i &lt; json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

text += &quot;<li>&quot; + &quot;&lt;a href=&#39;&quot; + cb.getLink(entry, &quot;alternate&quot;)

+ &quot;&#39;&gt;&quot; + cb.getTitle(entry) + &quot;</li>&quot;;

}

var p = document.createElement(&#39;span&#39;);

document.getElementById(tag).appendChild(p);

p.innerHTML = text;

},

callPostJson: function(json) {

this.listPosts(json, &quot;dataPost&quot;);

},

getCo : function(json) {

this.totCount = cb.getTotalResults(json);

var count = (uP.nPost &lt; 0) ? this.totCount : uP.nPost;

var i=1;

while(i&lt;=count) {

var incr = (count-i &lt; this.increment) ? count-i+1 : this.increment;

cb.search( cP.web, &quot;posts&quot;, i, incr, &#39;cP.callPostJson&#39;);

if (incr==0) incr=incr+1;

i = i+incr;

}

}

};

cb.search( cP.web, &quot;posts&quot;, 1, 2, &#39;cP.getCo&#39;);


</script>

</b:includable>

</b:widget>

[4] Cambiamos donde dice: elescaparatederosa.blogspot.com por la url de nuestro blog sin el http://

Donde dice:  nPost : -1  es donde haremos los cambios para mostrar un número de títulos de entrada ilimitado, es decir, todas las entradas del blog actuales y las que vayamos publicando o para mostrar solo el número de títulos que nos interese de las últimas entradas publicadas.

Si vamos a mostrar todas las entradas dejaremos este valor tal cúal está en -1, en cambio,  si solo queremos mostrar las veinte últimas entradas por ejemplo, cambiaremos ese valor a 20.
Si vamos a usarlo para las últimas entradas, recordaremos cambiar el título del widget por algo más apropiado.





Esta parte del código:  style='height:400px; overflow:auto; es la que he añadido para que aparezca de forma automática la scrollbar, cuando el alto del widget sobrepase los 400px, podéis reducir o ampliar su altura cambiando el valor en height.