Como poner un índice en blogger con scroll

Hoy tras un largo tiempo de inactividad debido al periodo vacacional, vengo de nuevo con otra forma de mostrar un índice para blogger. Ya mostré hace tiempo uno (Ver indice) que por cierto fue muy bien acogido entre los lectores.
Ahora os muestro otra forma y sin tener que desplazarse hacia bajo de la página para visualizar el total de las etiquetas.
El índice nos muestra las etiquetas dentro de un scroll y al hacer click en cualquiera nos muestra los resultados de ellas con una cantidad definida no siendo visible todas las entradas pero usando los botones de anterior y siguiente podremos navegar por el total de ellas.

Después de ver la demostración si deseas añadirlo a tu blog sigue los pasos siguientes.
Paso 1: Crear página
--------------------------------------------------------------------------------------------------------------------------------------------
En primer lugar tenemos que crear una nueva página. Panel de Administración → → páginas → → Nueva página página en blanco. El editor de la página se abrirá y ahora haga clic en la ficha HTML.
Paso 2: Agregar código
--------------------------------------------------------------------------------------------------------------------------------------------
Una vez en la ficha HTML del editor de páginas, agregue el código siguiente:

<style>#cajaindice{float:left;margin:20px 5% 20px 0;width:25%;height:389px;margin-top:-2px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}
#cajaindice ul{margin:0;border-top:0px solid #ccc;padding:0}
#cajaindice ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#cajaindice ul li a{display:block;padding:10px;border-bottom:1px solid #ccc;}
#cajaindice ul li:last-child a{border-bottom:none;}
#cajaindice ul li a,#enlacesnavegacion a{background:#fff;color:#4d90f0;text-decoration:none}
#cajaindice ul li a,#enlacesnavegacion a,#enlacesnavegacion span{font-size:14px}
#cajaindice ul li a:hover,#enlacesnavegacion a:hover{background:#ccc;color:#fff}
#resultadoindice{float:left;width:69%;line-height:1.6em}
#resultadoindice ul li{list-style-type:none;margin-left:-40px}
#enlacesnavegacion{padding:20px 0}
#enlacesnavegacion a{margin-right:10px;border:1px solid #ccc}
#enlacesnavegacion a,#enlacesnavegacion span{padding:5px 10px}
#enlacesnavegacion span{float:right}
@media screen and (max-width:768px){
#cajaindice{width:35%;}
#resultadoindice{width:59%;}
}
@media screen and (max-width:480px){
#cajaindice{width:100%;margin:20px 0}
#resultadoindice{width:100%;}
}</style>
<div id='cajaindice'></div>
<div id='resultadoindice'>
<script type='text/javaScript'>
var cat_home='http://www.amorsevillista.com';cat_numb=12;cat_pre='Anterior';cat_nex='Siguiente';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="enlacesnavegacion">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('resultadoindice').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('cajaindice').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

Paso 3: Configuración
--------------------------------------------------------------------------------------------------------------------------------------------
Ahora cambie la dirección URL en rojo"http://www.amorsevillista.com" por la vuestra.
Puedes cambiar tambien la cantidad de entradas a mostrar en: cat_numb=12 (cambia 12 por la cantidad deseada)
Después de realizar los cambios, guarde la página y enlázala en el menu o donde quieras, ahora ya puedes ver todo el contenido del blog en una sola página.