Tutorial: Cómo agregar Sitemap con categorías a tu blog

¡Comparte el tutorial!

Tweet

Tener una tabla de contenido o Sitemap en tu blog es muy importante para ofrecer a tus lectores una navegación más rápida por el contenido de tu blog.

Es por eso que es este tutorial te muestro cómo agregar un sitemap con categorías a tu blog.

¿Que necesitamos?

* Blog en blogger

Dificultad

Fácil

Paso 1:

Te recomiendo que implementes el código dentro de una página estática en el blog.
Esto para dar una mejor imagen a la tabla de contenidos.

Si quieres ver como luce este Sitemap puedes verlo directamente ya implementado en este blog, arriba en el menú de lado izquierdo da clic sobre "Sitemap" para ver el código en ejecución.

¡IMPORTANTE! No cambies a vista "Redactar" una vez que hayas implementado el código, hacer esto echaría a perder el código.

Bien pues el código a implementar es éste:

<style>
#SiteMapBlogger {
width:99%;
margin:0 auto;
background-color: #0A366D; /* Color de la barra lateral */
overflow:hidden;
position:relative;
color:#333
}
#SiteMapBlogger .loadingPosts {
display:block;
padding:5px 10px;
font:normal bold 10px Arial, Sans-Serif;
color:#FFF
}
#SiteMapBlogger ul, #SiteMapBlogger ol, #SiteMapBlogger li {margin:0;padding:0;list-style:none;background:none;}
#SiteMapBlogger .sitemapTabs {width:20%;float:left}
#SiteMapBlogger .sitemapTabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#FFF; /* Color de las etiquetas */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#SiteMapBlogger .sitemapTabs li a:hover {
background-color:#FFF; /* Color de fondo de las etiquetas al pasar el cursor */
color:#333
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#125E8E; /* Color de la pestaña activa */
color:#FFF; /* Color del texto de la pestaña activa */
position:relative;
z-index:5;
margin:0 -1px 0 0
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-layer {
width:80%;
float:right;
background-color:#FFF; /* Fondo de los post principales */
border-left: 5px solid #125E8E; /* Color del borde que separa las entradas de las etiquetas */
box-sizing:border-box
}
#SiteMapBlogger .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;}
#SiteMapBlogger .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#SiteMapBlogger .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px; /* Tamaño del título de las entradas */
color:#333; /* Color del título de las entradas */
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#SiteMapBlogger .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:9px; /* Tamaño de la fecha */
color: #ECECEC; /* Color de la fecha */
float:right
}
#SiteMapBlogger .panel li .sitemapSummary {
display:block;
padding:10px 12px;
font-style:italic;
overflow:hidden
}
#SiteMapBlogger .panel li .sitemapSummary img.sitemapThumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px; /* Ancho del contenedor de las miniaturas */
height:72px; /* Alto del contenedor de las miniaturas */
border:1px solid #dcdcdc; /* Borde de las miniaturas */
}
#SiteMapBlogger .panel li:nth-child(even) {
background-color:#CBDFDE; /* Color de fondo secundario de las entradas */
font-size:10px;
color:#333 /* Color de texto secundario de las entradas */
}
#SiteMapBlogger .panel li a:hover,#SiteMapBlogger .panel li a:focus, #SiteMapBlogger .panel li a:hover time, #SiteMapBlogger .panel li.bold a {
background-color:#125E8E; /* Color de fondo del título de las entradas (modo sumario) y color de fondo del título de las entradas al pasar el cursor (modo normal) */
color:#FFF;
outline:none
}
#SiteMapBlogger .panel li.bold a:hover, #SiteMapBlogger .panel li.bold a:hover time {
background-color:#444
}
@media (max-width:700px) {
#SiteMapBlogger {
background-color:#fff; /* Color de fondo de pestaña activada por cursor */
border:0 solid #888; /* Color de letra de pestaña activada por cursor */
}
#SiteMapBlogger .sitemapTabs, #SiteMapBlogger .sitemapContent {
overflow:hidden;
width:auto;
float:none;
display:block
}
#SiteMapBlogger .sitemapTabs li {
display:inline;
float:left
}
#SiteMapBlogger .sitemapTabs li a, #SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#125E8E; /* Color de post */
color:#FFF
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#CBDFDE;
color:#fff
}
#SiteMapBlogger .sitemapContent {
border:none
}
#SiteMapBlogger .divider-layer, #SiteMapBlogger .panel li time {
display:none
}
}
</style>
<div id="SiteMapBlogger">
<span class="loadingPosts">Cargando...</span></div>
<br />
<script>
var tabbedTOC = {
blogUrl: "http://www.nombre-de-tu-blog.blogspot.com/",
containerId: "SiteMapBlogger",
activeTab: 1,
showDates: true,
showSummaries: false,
numChars: 100,
showThumbnails: false,
thumbSize: 40,
noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisaKvI9O8334qK-CAhNYE9kP4mqGEYVaC6XZn0eKvX_-DhvBdy_4ENsw3k__0l93pJbupFfMnbdErfWeo9bCxgwJwNYnrnutguFTt8PgRfPF6Ps_uWNymdhqEGho1zEU_vD-cuEtSg6aY/s128/imagen.png",
monthNames: ["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: false,
showNew: 7,
newText: " - <i style='color:#e69138;'>¡Nuevo!</i>"
};
</script>
<script>
/*
* Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
* Free for change but keep the original attribution.
* URL: https://plus.google.com/108949996304093815163 */
function clickTab(e){var t=document.getElementById(tabbedTOC_defaults.containerId),n=t.getElementsByTagName("ol"),r=t.getElementsByTagName("ul")[0],i=r.getElementsByTagName("a");for(var s=0;s<n.length;s++){n[s].style.display="none";n[parseInt(e,10)].style.display="block"}for(var o=0;o<i.length;o++){i[o].className="";i[parseInt(e,10)].className="active-tab"}}function showTabs(e){var t=parseInt(e.feed.openSearch$totalResults.$t,10),n=tabbedTOC_defaults,r=e.feed.entry,i=e.feed.category,s="",o=[];for(var u=0;u<(n.showNew===true?5:n.showNew);u++){if(u==r.length)break;r[u].title.$t=r[u].title.$t+(n.showNew!==false?n.newText:"")}r=n.sortAlphabetically?r.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):r;i=n.sortAlphabetically?i.sort(function(e,t){return e.term.localeCompare(t.term)}):i;s='<span class="divider-layer"></span><ul class="sitemapTabs">';for(var a=0,f=i.length;a<f;a++){s+='<li class="sitemapItem-'+a+'"><a href="javascript:clickTab('+a+');">'+i[a].term+"</a></li>"}s+="</ul>";s+='<div class="sitemapContent">';for(var l=0,c=i.length;l<c;l++){s+='<ol class="panel" data-category="'+i[l].term+'"';s+=l!=n.activeTab-1?' style="display:none;"':"";s+=">";for(var h=0;h<t;h++){if(h==r.length)break;var p,d=r[h],v=d.published.$t,m=n.monthNames,g=d.title.$t,y="summary"in d&&n.showSummaries===true?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,n.numChars)+"…":"",b="media$thumbnail"in d&&n.showThumbnails===true?'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>':'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+n.noThumb.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>',w=d.category?d.category:[],E=n.showDates?'<time datetime="'+v+'" title="'+v+'">'+v.substring(8,10)+" "+m[parseInt(v.substring(5,7),10)-1]+" "+v.substring(0,4)+"</time>":"";for(var S=0;S<d.link.length;S++){if(d.link[S].rel=="alternate"){p=d.link[S].href;break}}for(var x=0,T=w.length;x<T;x++){var N=n.newTabLink?' target="_blank"':"";if(w[x].term==i[l].term){s+='<li title="'+w[x].term+'"';s+=n.showSummaries?' class="bold"':"";s+='><a href="'+p+'"'+N+">"+g+E+"</a>";s+=n.showSummaries?'<span class="sitemapSummary">'+b+y+'<span style="display:block;clear:both;"></span></span>':"";s+="</li>"}}}s+="</ol>"}s+="</div>";s+='<div style="clear:both;"></div>';document.getElementById(n.containerId).innerHTML=s;clickTab(n.activeTab-1)}var tabbedTOC_defaults={blogUrl:"http://www.ciudadblogger",containerId:"SiteMapBlogger",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisaKvI9O8334qK-CAhNYE9kP4mqGEYVaC6XZn0eKvX_-DhvBdy_4ENsw3k__0l93pJbupFfMnbdErfWeo9bCxgwJwNYnrnutguFTt8PgRfPF6Ps_uWNymdhqEGho1zEU_vD-cuEtSg6aY/s128/imagen.png",monthNames:["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>¡Nuevo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()
</script>

Lo único que tienen que hacer es copiarlo e implementarlo en su blog, lo pueden colocar en una página individual, o en un post, aunque no es muy recomendado.

Pero el estilo y la configuración que va con el código es el que yo utilizo en el blog.
Veamos como configurar  y personalizar el Sitemap a su gusto.

Paso 2:

Bien, pues lo primero que debemos editar es el texto que está en color rojo, ahí debes colocar la URL de tu blog.

Despues, he dejado en forma de comentarios los colores que pueden editar para que convine con el tema de su blog, solo sustituye los valores que están de lado izquierdo de los /* comentarios en naranja */.

También puedes editar el tamaño de las fuentes, la fuente del texto, etc.

El estilo está en vivo en el blog, pero te muestro como se ve aquí mismo:

Este Sitemap incluye código Responsive, esto quiere decir que el Sitemap se adapta al tamaño de tu blog, incluso se podrá ver desde móviles:

Paso 3:

Lo último sería configurar las opciones que este Sitemap nos permite:

activeTab - Es la pestaña que aparecerá seleccionada por defecto.
showDates - Cambiar a false para no mostrar la fecha.
showSummaries - Cambiar a true para mostrar resúmenes de los post.
numChars - Número de caracteres en el resumen.
showThumbnails - Cambiar a true para mostrar imágenes de los post.
thumbSize - tamaño de las imágenes.
noThumb - Imagen predeterminada para las entradas que no tienen imagen..
monthNames - Nombre de los meses, si gustas los puedes editar.
newTabLink - Cambiar a true para abrir las entradas en una pestaña nueva.
sortAlphabetically - Cambiar a false para ordenar los post por fecha, true para alfabéticamente.
showNew - Cambiar a false para ocultar el texto "¡Nuevo!" y define cuántos post recientes tendrán ese texto.
newText - Texto "¡Nuevo!" de las entradas recientes, lo puedes modificar y también su color.

Y bueno, no hay más por explicar, la personalización y configuración del Sitemap ya depende de ustedes y sus necesidades.

Sería todo sobre cómo agregar tabla de contenidos o sitemap con categorías a tu blog. Espero te sea de utilidad.

Fin del tutorial