Tutoriales Sobre Blogger: Mapa del blog o mapa del sitio para Blogger.

En este tutorial veremos como crar una pagina con Mapa del Blog o mapa del Sitio como mas les guste llamarlo.

Esta sera una versión en tablas con las posibilidades de ordenar por nombres o etiquetas.

Esta tabla estara ordenada por "Titulo de la entrada" "Etiquetas" "Fecha Creada"
Antes de comenzar veremos una demostración: 

Demostración

Comencemos:

• Paso 1: Vamos a Blogger>> Pàginas>> Pàgina Nueva>> Pàgina en Blanco

• Paso 2: Copiamos el siguiente código y pegamos en la Pagina en blanco en  HTML

<style type="text/css">
#tocTable {
  border:2px solid white;
  font:normal 11px Verdana,Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse;
  text-align:left;
}
#tocTable th, #tocTable td {
  border:1px solid white;
  background-color:#fafafa;
  padding:10px 15px;
}
#tocTable th {
  background-color:#5d5d5d;
  font-weight:bold;
  color:white;
  text-shadow:0px 1px 0px rgba(0,0,0,0.3);
}
th#th1         {width:60%;background-color:#5A930D;}
th#th2, th#th3 {width:20%;}
#tocTable td.toc-header-col1,
#tocTable td.toc-header-col2 {padding:0px 0px !important;background-color:#2372A7;}
#tocTable td.toc-header-col3 {background-color:#D7DEF0;}
#tocTable a {
  display:block;
  text-decoration:none;
  color:white;
  padding:10px 15px;
  background:transparent;
}
#tocTable td.toc-header-col1:hover,
#tocTable td.toc-header-col2:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0px 0px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 3px rgba(0,0,0,0.4);
}
select#tocSort {
  width:200px;
  border:1px solid #ccc;
  display:block;
  margin:0px 0px 7px 0px;
}
</style>
<script type="text/javascript">
var numberpost   = 999, // Tentukan jumlah maksimal posting
    theOption    = "Opciones...",                  // Label opsi 1
    theSortPost  = "Ordenar por Nombre", // Label opsi 2
    theSortLabel = "Ordenar por Etiquetas", // Label opsi 3
    theJudul     = "Titulo de la entrada",  // Header tabel 1
    theLabel     = "Etiqueta",  // Header tabel 2
    theDate      = "Fecha ",   // Header tabel 3
    blankLabel   = "Tak Berlabel",   // Label kosong
    yoursite     = "http://tutorialesblogger.blogspot.com"; // URL blogmu
</script>
<script src="https://dl.dropboxusercontent.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Mapa%20del%20Blog.js" type="text/javascript"></script>

• Paso 3: Damos en Publicar y a disfrutar de nuestro Mapa del Blog o Mapa del sitio 

Nota:- Solo deberás de cambiar la URL rojo por tu URL