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
