" Tabela de Conteúdos (Mapa) Guias COM (mapa do site) "

Como  Tabelas de Conteúdos  , also Chamado de  mapa do site  OU mapa do site, permitindo AOS Visitantes Navegar POR TODO o Conteúdo do Site de Uma forma Prática, em NOSSOS Rótulos Caso Acessar e Seu Respectivo Pós publicado.  
'vi  hum par DELES  mas ESTE em especial Que eu gosto da forma Como se organiza Tudo em abas, tipo TabView  O Que LHE confere hum Projetar de Usuario Mais intuitiva also inclui VÁRIAS opções Que o tornam Mais completa.  O índice e Um criando Nurrohman Taufik , um Gênio da Indonésia nestas Questões Blogger . He NÃO requer Bibliotecas externas de Modo Quase nao tem de se preocupar com a Questão da Compatibilidade. A demo Rápido Rápido Rápido Rápido rápido Você PODE aquí ver, o LADO ESQUERDO E o blogue de Marcas, Ao Clicar em cantarolar DELES E OS bilhetes hum Direita Correspondente Ao Rótulo. 

ESTAS Tabelas de Conteúdos geralmente São exibidos em 
Uma página estatica, POR ESSA Razão, vamos Todo o código Dentro da Página, incluíndo OS Estilos Pará Manter Estes Pará carregar em QUALQUÉR Outra Parte do blog Onde o mapa do site Não Será exibido. 
Para colocar Este  Conteúdo -sitemap- Tabela em Seu Blog  Que Rápido página rápido Você CRIAR Uma, e Estar no Guia HTML  página cole o código SEGUINTE:

<Style>
#SiteMapBlogger {
width: 99%;
margin: 0 auto;
background-color: # 444;  / * Cor de la barra lateral, * /
overflow: hidden;
position: relative;
color: # 333
}
#SiteMapBlogger .loadingPosts {
display: block;
padding: 5px 10px;
font: bold 10px Arial normal, 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 hum {
display: block;
font: bold 10px / 28px normal, Arial, Sans-Serif;
height: 28px;
overflow: hidden;
text-overflow: reticências;
cor: #ccc;  / * Cor de las etiquetas * /
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
cursor: pointer
}
#SiteMapBlogger .sitemapTabs Li a: hover {
background-color: # 556270;  / * Cor de fondo de las etiquetas al pasar el cursor * /
color: #FFF
}
A.active POR .sitemapTabs tabulação li #SiteMapBlogger {
background-color: # 69D2E7;  / * Cor de la pestaña activa * /
color: #FFF;  / * Color del texto de la pestaña activa * /
position: relative;
z-index: 5;
margin: 0 0 0 -1px
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-Camada {
width: 80%;
float: right;
background-color: #FFF;
border-left: 5px solid # 69D2E7;  / * etiquetas Cor del borde Que separa las Entradas de las * /
box-sizing: border-box
}
#SiteMapBlogger .divider-Layer {float: none; display: block; position: absolute; top: 0; Direita: 0; bottom: 0;}
#SiteMapBlogger .panel {Position: relative; z-index: 5; font: 10px normal, normal, Arial, sans-serif}
#SiteMapBlogger .panel Li hum {
display: block;
position: relative;
font-weight: 700;
font-size: 11px;  / * tamaño del título de las Entradas * /
color: # 333;  / * Cor del título de las Entradas * /
line-height: 30px;
height: 30px;
padding: 0 12px;
text-decoration: none;
delinear: none;
overflow: hidden
}
#SiteMapBlogger .panel Tempo li {
display: block;
font-style: italic;
font-weight: 400;
font-size: 10px;  / * Tamaño de la fecha * /
color: #DCDCDC;  / * Cor 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 0 0 8px;
padding: 4px;
width: 72px;  / * Miniaturas Ancho del contenedor de las * /
height: 72px;  / * Miniaturas Alto del contenedor de las * /
border: 1px #dcdcdc Sólido;  / * Borde de las Miniaturas * /
}
#SiteMapBlogger .panel Li: nth-child (MESMO) {
background-color: #CBDFDE;  / * Entradas núcleos de fondo secundario de las * /
font-size: 10px;
color: # 414141  / * Entradas Cor de texto secundario de las * /
}
#SiteMapBlogger .panel Li a: hover # SiteMapBlogger .panel li a: foco, #SiteMapBlogger .panel li a: hover tempo, #SiteMapBlogger .panel li.bold a {
background-color: # 556270;  Entradas / * Cor de fondo del título de las (Modo sumario) y cor 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 {ritmo
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 um, #SiteMapBlogger .sitemapTabs-tab a.active li {
background-color: # 556270;
color: #ccc;
}
A.active POR .sitemapTabs tabulação li #SiteMapBlogger {
background-color: #CBDFDE;
color: # fff
}
#SiteMapBlogger .sitemapContent {
border: none
}
#SiteMapBlogger .divider-Layer, #SiteMapBlogger ritmo .panel li {
display: none
}
}
</ Style>
<Div id = "SiteMapBlogger">
<Class = "loadingPosts" span> Cargando Entradas ... </ span> </ div>
<br />
<Script>
var = {tabbedTOC
blogUrl: "http: // nombre-de-mi-blog .blogspot.com / ",
containerId: "SiteMapBlogger",
activeTab: 1,
EXPOSIÇÕES: Verdadeiro,
showSummaries: Falsos,
numchars: 200,
showThumbnails: Falsos,
ThumbSize: 40,
noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuYhT54cb0vjEJlZFkVGO43LFiqfQ9cZjerjit6CB6lcJnSLwtHFnTTXDs-Ls3_1xxoj8XjcjuMgVLFc_7TioyF7_sBSf8r04_VN2yWiG-lv491mgN3N70Vc_fNX9FB6It3Wwcf6tVW8U/s128/imagen.png",
monthNames: ["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
newTabLink: true,
maxResults: 99.999,
pré-carga: 0,
sortAlphabetically: true,
showNew: 7,
newText: "! - <i style =" color: red; "> ¡Nuevo </ i>"
};
</ Script>

<Script>
/ *
* Blogger Tabbed estilo de Tabela de Conteúdo Widget POR Taufik Nurrohman
* Livre para a Mudança, mas Manter a atribuição inicial.
* URL: https://plus.google.com/108949996304093815163 * /

funcao clickTab (e) {var s = 0; s <n.length; s ++) {n [s] .style.display = "none";. n [parseInt (e, 10)] style.display = "bloco"} for (var o = 0; o <i.length; o ++) {i [o] .className = "";. i [parseInt (e, 10)] CLASSNAME = "active-Guia"}} showTabs funcao (e) {var e.title $ t.localeCompare (T.Title $ t.)}):.? r; i = n.sortAlphabetically i.sort (function (e, t) {e.term retorno localeCompare (t.term).}): i; s = '<span class = "divisor -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 comprimento;. l <c; l ++) {'class <ol = "Painel" -categoria de Dados = s + = "' + 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 = "Resumo" em && d n.showSummaries === Verdade? d.summary. T.replace $ (/ < l? \ /?> / G ",") .replace (/<.*?>/ g, ""). substitua (/ [<>] / g, ""). subcadeia (0, n .numChars) + "...": "", b = "media $ thumbnail" Em D && n.showThumbnails === Verdade <img class =? "" style = "sitemapThumbnail width: '+ n.thumbSize +" px, altura : "+ n.thumbSize + px"; "alt =" "src =" "+ d.media $ thumbnail.url.replace (/ \ / s72 (\ - c) \ //" / s "+ n.thumbSize ? + "- C /" +) "" /> ':' <class = estilo "sitemapThumbnail" img = "width: '+ n.thumbSize +" px; height: "+ n.thumbSize +" px "; alt =" "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 .rel [S] == "alternate") {p = d.link [S] .href; break}} for (; x <T; var x = 0, T = w.length x ++?) {N = var n.newTabLink "target =" _ blank "':" "; if (w [x] .term == i [l] .term) {s + = '<title li = "" + w [x] .term +' "'; ? class = s + n.showSummaries = "bold"? : ""; "S + = '> <a href="'+p+'"'+N+">" + g + E + "</a>"; s + = n.showSummaries' <class = estilo "sitemapSummary" span> '+ b + y +' <span = "display: block; clear: both; "> </ Span> </ span> ':" "; s + =" </ li> "}}} s + =" </ ol> "} s + =" </ div> "; s + = '<div !!! - <em style = "color: red;"> ¡Nuevo </ em> "}; for (var i EM tabbedTOC_defaults) {tabbedTOC_defaults [i] = typeof tabbedTOC [i] == indefinido && typeof tabbedTOC [i] = = tabbedTOC "undefined" [i]:? tabbedTOC_defaults [i]} (function () {var
</ Script>

Onde ELE ESTÁ em  Vermelho  E o Nome do Seu blog.  Na área dos Estilos que Rápido rápido Você nao tenho nenhuma verde  . Onde você PODE personalizar a aparencia Para Ser mostrado Neste opções de Aparelhos, essas opções estao sem codigo que adicionou Rápido rápido Você:

activeTab es la pestaña predeterminada
showDates cambiar a false para ocultar la fecha
showSummaries cambiar a true para mostrar resúmenes (sumarios)
numChars número de caracteres en el resumen
showThumbnails cambiar a true para mostrar miniaturas de las entradas
thumbSize tamaño de la miniatura
noThumb miniatura predeterminada para las entradas que no tienen imagen.
monthNames es el nombre de los meses cuando se muestra la fecha
newTabLink cambiar a true para abrir las entradas en una pestaña nueva
sortAlphabetically cambiar a false para ordenar las entradas por fecha
showNew cambiar a false para ocultar el texto "¡Nuevo!" que aparece en las entradas recientes, o define cuántas entradas recientes tendrán ese texto
newText es el texto "¡Nuevo!" de las entradas recientes

activeTab  es la pestaña predeterminada
Exposições  cambiar Uma falsa Pará Ocultar la fecha
showSummaries  Cambiar a verdadeiros resúmenes Pará Mostrar (sumários)
numchars  Número de caracteres en el resumen
showThumbnails  cambiar hum Verdadeiro Pará Mostrar Miniaturas de las Entradas
ThumbSize  tamaño de la miniatura
noThumb  miniatura predeterminada para las Entradas Que No imagen tienen.
monthNames  es el nombre de los meses cuando se muestra la fecha
newTabLink  cambiar hum Verdadeiro abrir para las Entradas en una nueva pestaña
sortAlphabetically  cambiar Uma falsa Pará ordenar las Entradas POR fecha
showNew  cambiar Uma falsa Pará Ocultar el texto "¡Nuevo!" recientes Que Aparece en las Entradas, o Definir cuantas Entradas recientes tendrán ese texto
newText  es el texto "¡Nuevo!" de las Entradas recientes

activeTab  E um Guia Padrão  EXPOSIÇÕES  Change to  falso  Pará Ocultar a dados  showSummaries Change to  Verdadeiro  Resumos Para exibir (Resumos)  numchars  Número de caracteres não Resumo showThumbnails  Change to  Verdadeiro  Pará exibir Miniaturas das Entradas  ThumbSize thumbnail TAMANHO  nothumb  miniatura Padrão Pará Entradas Que Não Tem nenhuma Imagem. monthNames  E o Nome dos meses, Quando a dados de e exibida  newTabLink  interruptor Pará Verdadeiro  Pará abrir como Entradas em Uma nova aba  sortAlphabetically  Change to  false  Pará ordenar como Entradas POR dados  showNew  Change to  falso  Pará Esconder o texto "Novo!"  listado em Entradas Recentes, OU definir Quantas Entradas Recentes Que o texto vai newText E o texto "Novo!" de Entradas Recentes   

Embora este dispositivo fornece uma CAPACIDADE de exibir Resumos (Resumos) de Entradas com a respectiva miniatura, E NÃO recomendável ativar QUALQUÉR UMA das Duas opções Pará Evitar lento Pará carregar.  E Importante also that Uma Vez Que rápido você colocar o código NÃO altera o Guia  Compor  . Este mapa do site ésensível, POR ISSO se encaixa o TAMANHO fazer Recipiente e muda de forma when visto de hum telefone celular, Por Exemplo. Portanto soluçar  de mídia (com largura máx: 700px)  . Voce vai ver página Outros Estilos, sos São OS Estilos Para o "pequeno" Modo de mapa do site This  Tabela de Conteúdo OU mapa do site  eu Acho Que É o Que Mais Completo TEMOS ATÉ visto ágora Uma Vez Que oferece VÁRIAS opções that PODEM Ser configuradas Para dar-LHE uma aparencia Desejada. E O Melhor de Tudo, Não vai Depender de Bibliotecas externas scripts de UO, Tudo em hum Único código PRONTO PARA Copiar e colar.

fonte: ciudadblogger