Cómo funcionara el Mapa del sitio o Sitemap
Una vez se realicen los ajustes que comentaremos posteriormente se mostrara en la pagina un esquema de nuestras entradas de forma automática ordenadas por etiquetas y títulos permitiendo a los lectores una mayor facilidad de búsqueda de contenido. El código se puede introducir directamente desde la pestaña de edición en html de la propia página por lo que nos ahorraremos la engorrosa parte de tener que editar en la plantilla de la entrada y no habrá que preocuparse de posibles cambios de plantillas en esta entrada aunque sería posible introducir la parte de CSS en la propia plantilla si se deseara.
Creando la página Sitemap en Blogger
Como ya he comentado la operación es bastante sencilla, sólo hay que seguir unos pasos sencillos. Accederemos al panel de administración del blog desde el escritorio de Blogger buscando en el menú la parte de “Páginas” y una vez en ella seleccionaremos en “Página nueva” la opción de “Página en blanco”. Elegiremos una titulo para nuestra página y posteriormente elegiremos la opción de edición “HTML” donde introduciremos el siguiente código.
<style type="text/css">Editaremos la parte de nombredelblog.blogspot.com con el nombre de nuestro dominio y ya podremos darle a publicar estando ya todo listo.
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://nombredelblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Como ya he comentado con esto estaría todo listo, ahora bien si observamos el código comprobamos que básicamente consiste en un CSS y una llamada javascript, ya entrada en la capacidad y ganas de cada uno editarlo ya que siempre podríamos buscar el javascript y modificarlo para subirlo a otro lugar y realizar la llamada a este o simplemente incrustarlo en la propia página del blog.
Otra opción para nuestro Sitemap
Otra posible opción a la hora de crear nuestra página con Sitemap vendría dada por el siguiente código bastante más simple.
<script type="text/javascript">Deberíamos editar numpost al gusto del número de entradas que se desee mostrar asi como la url nombredelblog.blogpost.com a nuestro propio blog y si quisiéramos hacer listados por etiquetas deberíamos hacerlo con diferentes llamadas del siguiente código
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');
}
</script>
<ul>
<script src="http://nombredelblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=9999"></script>
</ul>
<ul>Donde además de cómo anteriormente editaremos la URL del blog y Etiqueta donde esta será el nombre de la etiqueta cuyas entradas queramos mostrar. Con esta opción podríamos llegar a crear un menú de archivo con diferentes páginas donde mostrar nuestros listados de entradas.
<script src="http://nombredelblog.blogspot.com /feeds/posts/default/-/Etiqueta?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=9999"></script>
</ul>