MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Mapa de sitio con pestañas


Sitemap

Las tablas de contenido, también llamadas sitemap o mapa del sitio, permiten al visitante navegar por todo el contenido del sitio de una forma práctica, en nuestro caso accediendo a las etiquetas del blog y sus respectivas entradas publicadas.

Esta tabla de contenido es una creación de Taufik Nurrohman, un genio indonesio en estos temas de Blogger. No requiere de librerías externas así que prácticamente no tendremos que preocuparnos por el tema de la compatibilidad.

El demo lo puedes ver en éste mismo blog.
Del lado izquierdo están las etiquetas del blog, al dar click sobre una de ellas se muestran del lado derecho las entradas correspondientes a dicha etiqueta.

Estas tablas de contenido por lo general se muestran en una página estática, por ese motivo pondremos todo el código dentro de la página, incluyendo los estilos para evitar que estos se carguen en cualquier otra parte del blog donde el sitemap no se mostrará.

Para poner esta tabla de contenido -sitemap- en tu blog crea una página, y estando en la pestaña HTML de la página pega este código:
<style>#SiteMapBlogger {width:99%;margin:0 auto;background-color:#444; /* 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:#ccc; /* Color de las etiquetas */text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}#SiteMapBlogger .sitemapTabs li a:hover {background-color:#556270; /* Color de fondo de las etiquetas al pasar el cursor */color:#FFF}#SiteMapBlogger .sitemapTabs li a.active-tab {background-color:#69D2E7; /* 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;border-left:5px solid #69D2E7; /* 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:10px; /* Tamaño de la fecha */color:#DCDCDC; /* 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:#414141 /* 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:#556270; /* 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;border:0 solid #888}#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:#556270;color:#ccc;}#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 entradas...</span></div><br /><script>var tabbedTOC = {blogUrl: "http://nombre-de-mi-blog.blogspot.com/",containerId: "SiteMapBlogger",activeTab: 1,showDates: true,showSummaries: false,numChars: 200,showThumbnails: false,thumbSize: 40,noThumb: "//lh4.googleusercontent.com/-ELPJlqQBEWg/VGOtHaYDk9I/AAAAAAAAGJM/f2jRyUgZet0/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: 7,newText: " - <i style='color:red;'>¡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:"//lh4.googleusercontent.com/-ELPJlqQBEWg/VGOtHaYDk9I/AAAAAAAAGJM/f2jRyUgZet0/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>

En donde está en color rojo va el nombre de tu blog. En el área de los estilos verás en color verde dónde puedes personalizar el aspecto.

Ahora vamos con las opciones de este gadget, estas opciones se encuentran en el código que añadiste:

activeTab es la pestaña predeterminadashowDates cambiar a false para ocultar la fechashowSummaries cambiar a true para mostrar resúmenes (sumarios)numChars número de caracteres en el resumenshowThumbnails cambiar a true para mostrar miniaturas de las entradasthumbSize tamaño de la miniaturanoThumb miniatura predeterminada para las entradas que no tienen imagen.monthNames es el nombre de los meses cuando se muestra la fechanewTabLink cambiar a true para abrir las entradas en una pestaña nuevasortAlphabetically cambiar a false para ordenar las entradas por fechashowNew cambiar a false para ocultar el texto "¡Nuevo!" que aparece en las entradas recientes, o define cuántas entradas recientes tendrán ese textonewText es el texto "¡Nuevo!" de las entradas recientes
Aunque este gadget ofrece la posibilidad de mostrar resúmenes (sumarios) de las entradas con su respectiva miniatura, se recomienda no activar ninguna de las dos opciones para evitar lentitud en la carga. También es importante que una vez que pongas el código no cambies a la pestaña Redactar.

Este sitemap es responsive, o sea que se adapta al tamaño del contenedor y cambia su forma cuando se mira desde un móvil por ejemplo. Por tal motivo debajo de @media (max-width:700px) verás otros estilos, esos son los estilos para el modo "pequeño" del sitemap.

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者