Siempre
es importante tener instalado en nuestro sitio o blog un Mapa del Sitio para
que las visitas puedan encontrar más fácilmente las entradas.
Primero
creamos una página estática:
Le
ponemos un título, en este caso es Mapa del Sitio y la edición la realizamos en
el modo HTML:
En Configuración
de la Página, ponemos los parámetros correspondientes:
Ahora
pegamos el código siguiente
<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#252524;
/*color fondo etiquetas*/
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:white;}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;}
#tabbed-toc .toc-tabs {
width:15%;
float:left;}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
/* color enlace etiqueta */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {
background-color:#4B4B4B;
/* background de etiquetas */
color:white;} /* color enlace etiqueta con background
*/
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#ccc;
/* background de la primera etiqueta */
color:white; /* color enlace primera etiqueta con
background */
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:85%;
float:right;
background-color:#ffffff;
/* color separación entre entradas */
border-left:5px
solid #ccc; /* borde separación entre etiquetas y entradas */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#3A3A3A;
/* color enlace de entradas */
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;}
#tabbed-toc .panel li:nth-child(even) {
background-color:#DFDDDD;} /* primer color separación
entre entradas */
#tabbed-toc .panel li:nth-child(even) {
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li.bold a {
background-color:#333; /* color background de las
entradas */
color:white;
/* color del enlace con el background de las entradas */
outline:none;}
@media (max-width:700px) {
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;}
#tabbed-toc .toc-content {
border:none;}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;}}
</style>
<div id="tabbed-toc"><span
class="loading">Loading...</span></div>
<a
style="display:block;text-align:right;font:normal bold 8px
Arial,Sans-Serif;text-decoration:none;margin:10px;" href=" http://elplanetablogger.blogspot.com/"
title="indice">Planeta Blogger</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl:
" http://elplanetablogger.blogspot.com/ ", /*
url del blog */
containerId: "tabbed-toc",
activeTab: 1,//()
showDates:false,
numChars: 200,
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 5,
newText: " - <em
style='color:red;'>Nuevo!</em>"
};
</script>
<script
src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/indice.js
' type='text/javascript'></script>
Ahora haremos algunos cambios
importantes.
En donde está en color Rojo podemos
cambiar los fondos, siendo a opción de cada quien. En donde está en color Azul, ponemos nuestra propia URL.
No olvidar ponerle la fecha de la publicación
acorde a la primera publicación que hicimos cuando comenzamos con el blog. También
usted puede instalar el índice en una nueva entrada. Aquí lo hicimos en una página
estática porque consideramos que luce mejor.
Terminado esto, pulsamos en Publicar.
Usted puede ver como luce, en este mismo
sitio y solo pulsando en Mapa.
Eso es todo y gracias por entrar.
