Cómo crear una página con el Sitemap en Blogger

Repasando mis listas de correo he encontrado, a mi parecer, una bonita forma de mostrar un Sitemap de nuestro blog en una página estática de Blogger creada por Abu Farhan según las referencias. La primera impresión de tener una página aparte con el mapa del sitio es que no es de demasiada utilidad aunque nos permite ver todas las entradas publicadas en una sola página y aparte ayudara a los motores de búsqueda en la indexación de nuestros contenidos.

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">
#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&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Editaremos la parte de nombredelblog.blogspot.com con el nombre de nuestro dominio y ya podremos darle a publicar estando ya todo listo.

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">
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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=9999"></script>
</ul>

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

<ul>
<script src="http://nombredelblog.blogspot.com /feeds/posts/default/-/Etiqueta?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=9999"></script>
</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.