18 septiembre 2014

Como poner un índice en blogger con scroll

indice para blogger


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.

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

5 comentarios

Gracias por el aporte lo usare sin duda alguna

excelente, funciona genial en sitios responsive, muchas gracias!

Hola, muy bueno tu indice, Pero quiero hacerte una sugerencia. Se podría mostrar las entradas con una miniatura. Seria mucho mas interesante. Gracias por leer mi comentario.

Xam la mayoría de los bloggers lo que buscamos es aligerar el peso de nuestros blog y si vamos colocando imágenes por todos lados no conseguiremos nuestros propósitos, no te discuto que quede más interesante pero si más lento.
De todas formas para ello habría que modificar completamente el script, tomo nota y mas adelante quizas lo publique.
Saludos.

Gracias por la entrada, me ha venido de perlas :)


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"