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.
Publicaciones Relacionadas
trucos blog
