Como Crear un Mapa Visible de Tu Sitio Web

Quiero compartir con ustedes una forma practica de poder tener en tu pagina web un mapa de tu pagina visible como se ve en la imagen. Esto lo podemos conseguir en el caso de Blogger de la siguiente manera. Ejemplo,  mi blog.

 1- Crea una página nueva con el nombre de Mapa de Sitio o de la forma que ustedes crean más correcto.

 2- En hacemos clic en la parteo edición  HTML para poder pegar el siguiente Codigo Script, pero antes cambiar la url en color rojo poner tu url de tu pagina.


<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://www.juaneliasjavier.com"; // URL blogmu

</script>

<script src="http://juaneliasjavier.nixiweb.com/wp-content/uploads/2013/06/Mapa20del20Blog.js" type="text/javascript"></script>




 Listo has creado con esto sencillo pasos el mapa de tu Sitio Web.
-->