Nuevo Estilo de Índice por Etiquetas para Blogger

El índice por etiquetas o mapa del sitio como ya algunos sabrán muestra de forma ordenada todas las entradas que se han publicado en el blog en sus respectivas categorías, facilitándole al usuario la búsqueda del contenido de tu blog, además te da una ventaja de cara al SEO pues ayuda a que tu blog se posicione mas rápido.
Nuevo Estilo de Índice por Etiquetas para Blogger

El índice muestra la palabra Nuevo!, cuando el articulo ha sido recientemente publicado; la vista previa del índice es el siguiente:

Para agregar este genial índice por etiquetas solo debes pegar en la edición HTML del editor de páginas el siguiente código;

<script>var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter='';var numberfeed=0;function loadtoc(json){function getPostData(){if("entry"in json.feed){var numEntries=json.feed.entry.length;numberfeed=numEntries;ii=0;for(var i=0;i<numEntries;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postdate=entry.published.$t.substring(0,10);var posturl;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var postmp3='';for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='enclosure'){postmp3=entry.link[k].href;break}}var pll='';if("category"in entry){for(var k=0;k<entry.category.length;k++){pll=entry.category[k].term;var l=pll.lastIndexOf(';');if(l!=-1){pll=pll.substring(0,l)}postLabels[ii]=pll;postTitle[ii]=posttitle;postDate[ii]=postdate;postUrl[ii]=posturl;postMp3[ii]=postmp3;if(i<5){postBaru[ii]=true}else{postBaru[ii]=false};ii=ii+1}}}}}getPostData();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2()}function filterPosts(filter){scroll(0,0);postFilter=filter;displayToc(postFilter)}function allPosts(){sortlabel();postFilter='';displayToc(postFilter)}function sortPosts(sortBy){function swapPosts(x,y){var temp=postTitle[x];postTitle[x]=postTitle[y];postTitle[y]=temp;var temp=postDate[x];postDate[x]=postDate[y];postDate[y]=temp;var temp=postUrl[x];postUrl[x]=postUrl[y];postUrl[y]=temp;var temp=postLabels[x];postLabels[x]=postLabels[y];postLabels[y]=temp;var temp=postMp3[x];postMp3[x]=postMp3[y];postMp3[y]=temp;var temp=postBaru[x];postBaru[x]=postBaru[y];postBaru[y]=temp}for(var i=0;i<postTitle.length-1;i++){for(var j=i+1;j<postTitle.length;j++){if(sortBy=="titleasc"){if(postTitle[i]>postTitle[j]){swapPosts(i,j)}}if(sortBy=="titledesc"){if(postTitle[i]<postTitle[j]){swapPosts(i,j)}}if(sortBy=="dateoldest"){if(postDate[i]>postDate[j]){swapPosts(i,j)}}if(sortBy=="datenewest"){if(postDate[i]<postDate[j]){swapPosts(i,j)}}if(sortBy=="orderlabel"){if(postLabels[i]>postLabels[j]){swapPosts(i,j)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var j=0;var i=0;while(i<postTitle.length){temp1=postLabels[i];firsti=j;do{j=j+1}while(postLabels[j]==temp1);i=j;sortPosts2(firsti,j);if(i>postTitle.length)break}}function sortPosts2(firstvar,lastvar){function swapPosts2(x,y){var temp=postTitle[x];postTitle[x]=postTitle[y];postTitle[y]=temp;var temp=postDate[x];postDate[x]=postDate[y];postDate[y]=temp;var temp=postUrl[x];postUrl[x]=postUrl[y];postUrl[y]=temp;var temp=postLabels[x];postLabels[x]=postLabels[y];postLabels[y]=temp;var temp=postMp3[x];postMp3[x]=postMp3[y];postMp3[y]=temp;var temp=postBaru[x];postBaru[x]=postBaru[y];postBaru[y]=temp}for(var i=firstvar;i<lastvar-1;i++){for(var j=i+1;j<lastvar;j++){if(postTitle[i]>postTitle[j]){swapPosts2(i,j)}}}}function displayToc(filter){var numDisplayed=0;var tocTable='';var tocHead1='Judul Artikel';var tocTool1='Klik untuk sortir berdasarkan judul';var tocHead2='Tanggal';var tocTool2='Klik untuk Sortir bedasarkan tanggal';var tocHead3='Kategori';var tocTool3='';if(sortBy=="titleasc"){tocTool1+=' (descending)';tocTool2+=' (newest first)'}if(sortBy=="titledesc"){tocTool1+=' (ascending)';tocTool2+=' (newest first)'}if(sortBy=="dateoldest"){tocTool1+=' (ascending)';tocTool2+=' (newest first)'}if(sortBy=="datenewest"){tocTool1+=' (ascending)';tocTool2+=' (oldest first)'}if(postFilter!=''){tocTool3='Klik untuk menampilkan semua'}tocTable+='<col4>';tocTable+='<href>';tocTable+='<td class="toc-header-col1">';tocTable+='<a href="javascript:toggleTitleSort();" title="'+tocTool1+'">'+tocHead1+'</a>';tocTable+='</td>';tocTable+='<td class="toc-header-col2">';tocTable+='<a href="javascript:toggleDateSort();" title="'+tocTool2+'">'+tocHead2+'</a>';tocTable+='</td>';tocTable+='<td class="toc-header-col3">';tocTable+='<a href="javascript:allPosts();" title="'+tocTool3+'">'+tocHead3+'</a>';tocTable+='</td>';tocTable+='<td class="toc-header-col4">';tocTable+='Download MP3';tocTable+='</td>';tocTable+='</tr>';for(var i=0;i<postTitle.length;i++){if(filter==''){tocTable+='<href><td class="toc-entry-col1"><a href="'+postUrl[i]+'">'+postTitle[i]+'</a></td><td class="toc-entry-col2">'+postDate[i]+'</td><td class="toc-entry-col3">'+postLabels[i]+'</td><td class="toc-entry-col4">'+'<a href="'+postMp3[i]+'">'+'Download'+'</a>'+'</td></tr>';numDisplayed++}else{z=postLabels[i].lastIndexOf(filter);if(z!=-1){tocTable+='<href><td class="toc-entry-col1"><a href="'+postUrl[i]+'">'+postTitle[i]+'</a></td><td class="toc-entry-col2">'+postDate[i]+'</td><td class="toc-entry-col3">'+postLabels[i]+'</td><td class="toc-entry-col4">'+'<a href="'+postMp3[i]+'">'+'Download'+'</a>'+'</td></tr>';numDisplayed++}}}tocTable+='</table>';if(numDisplayed==postTitle.length){var tocNote='<postUrl class="toc-note">Menampilkan Semua '+postTitle.length+' Artikel<br/></span>'}else{var tocNote='<postUrl class="toc-note">Menampilkan '+numDisplayed+' artikel dengan kategori '';tocNote+=postFilter+'' dari '+postTitle.length+' Total Artikel<br/></span>'}var tocdiv=document.getElementById("toc");tocdiv.innerHTML=tocNote+tocTable}function displayToc2(){var j=0;var i=0;document.write('<div id="feed-control">');document.write('<div class="gfg-root">');while(i<postTitle.length){temp1=postLabels[i];document.write('<div class="gfg-subtitle">');document.write('<a  class="gfg-collapse-href" href="/search/label/'+temp1+'">'+temp1+'</a>');document.write('<div class="clearFloat"></div>');document.write('</div><div class="gfg-list"><false>');firsti=j;var tempposition='odd';do{if(tempposition=='odd'){document.write('<li><div class="gfg-listentry gfg-listentry-odd">');tempposition='even'}else{document.write('<li><div class="gfg-listentry gfg-listentry-even">');tempposition='odd'}document.write('<a href="'+postUrl[j]+'">'+postTitle[j]+'</a>');if(postBaru[j]==true){document.write(' - <strong><em><postUrl style="color: rgb(255, 0, 0);">&#161; Nuevo !</span> </em></strong>')};document.write('</div></li>');j=j+1}while(postLabels[j]==temp1);i=j;document.write('</ol></div>');sortPosts2(firsti,j);if(i>postTitle.length)break}document.write('</div>');document.write('</div>')}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var toclink=document.getElementById("toclink")}else{alert("Cargando...")}}</script><br />
<script src="http://URL_DE_TU_BLOG/feeds/posts/default?max-results=9999&alt=json-in-script&amp;callback=loadtoc"></script><br />
<style type="text/css">
.gfg-root {
  width : 100%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
font-family:Arial;
font-size:13px
}
.gfg-title {
  font-size: 14px;
  font-weight : bold;
  color:#585858;
  background-color:#BDBDBD;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}
.gfg-title a {
  color : #3366cc;
}
.gfg-subtitle {
  font-size: 14px;
  font-weight: bold;
  color:#585858!important;
padding:4px;
border-radius:4px;
  background-color: #BDBDBD;
  line-height: 1.4em;
  overflow:hidden;
  white-space:nowrap;
  margin-bottom:5px;
}
.gfg-subtitle a {
  color:#404040!important
}
.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}
.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
}
.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}
.gfg-listentry-odd {
  background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}
.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 14px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}
.gfg-horizontal-container {
  position : relative;
}
.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
  display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}
.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}
.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}
.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
  float : left;
}
.clearFloat {
  clear : both;
}</style>

En la parte resaltada en azul debes poner la URL de tu blog de la siguiente forma: miltrucosblogger.info (en caso de que tu blog tenga las www. las agregas pero lo que no debes agregar son las http:).

Espero que este tutorial te haya gustado y que lo compartas en tus redes sociales.

0
Shares

4 thoughts on “Nuevo Estilo de Índice por Etiquetas para Blogger

  • octubre 14, 2014 en 12:40 am
    Permalink

    Cuando copio el código en html en una página nueva, me da un error. Aún así lo visualizo en la vista previa. Al publicarlo no sale nada ¿Sabes por qué?
    Mi blog es de blogger.

    Responder
    • octubre 14, 2014 en 4:52 pm
      Permalink

      Podrías dejarme la URL de la página en la que agregaste el código así te puedo dar una respuesta más acertada.

      Saludos

      Responder
  • enero 5, 2015 en 12:42 pm
    Permalink

    Hola, entonces lo que hace, es que la presentación de la página de entradas esté en ese formato o diseño tan chulo ?
    Yo creé una nueva entrada y puse ese texto en html, le pogo la url de mi página en su sitio sin el html para que no se repita. Pero le doy a publicar la entrada y no noto ningún cambio.
    Hago algo mal ? Perdón por las molestias.

    Mi blog es http://ambulanciasyemerg.blogspot.com.es/

    Responder
    • enero 5, 2015 en 10:14 pm
      Permalink

      Roberto este truco lo debes poner en una página estática para que muestre el indice por etiquetas.

      Saludos

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *