Como crear un Mapa del Sitio (Sitemap) HTML en Blogger o Pagina Web

¿Le gustaría agregar un Mapa del Sitio (Sitemap) HTML en tu blog de blogger? A diferencia del archivo Mapa del Sitio XML (/sitemap.xml) que se envía a los motores de búsqueda. El mapa del sitio html muestra el diseño de la lista de páginas del blog por etiqueta para los usuarios, así como las búsquedas de índice de Google para mejorar o indexar.

Sitemap HTML está indexado o generado en HTML normal, y normalmente muestra todas las páginas y publicaciones de blog disponibles en su blog. Pero en este complemento de blog de sitemap, se utiliza JQUERY para actualizar el sitemap del blog cada vez que publicamos de forma automática.

Antes de avanzar para agregar la página Sitemap es muy importante entender la diferencia entre el mapa del sitio HTML y el mapa del sitio XML.

¿Qué Es XML Sitemap?
En realidad, el motor de búsqueda utiliza sus respectivos rastreadores web (bots) para descubrir páginas de enlaces dentro del sitio y de otros sitios. XML Sitemap es un archivo .xml adjunto a su sitio web que proporciona estos datos a los rastreadores. El archivo sitemap consta de todas las publicaciones URL con información adicional sobre cada URL. El motor de búsqueda usa esta información para indexar las publicaciones de la mejor manera posible. El uso del archivo XML Sitemap garantiza que sus páginas web serán indexadas en los motores de búsqueda.

¿Qué Es HTML Sitemap?
HTML sitemap es una página html común que puede leer tanto los robots de los motores de búsqueda como los visitantes. El rastreador web lo trata como una página HTML normal (con muchos enlaces). El objetivo principal del uso del mapa del sitio basado en HTML es representar todas sus publicaciones de manera organizada para que los usuarios puedan navegar por todas sus publicaciones a través de una sola página.

Características
El sitemap esta basado en Gadget: Archivo del Blog de blogger, que permite a las personas que te visitan navegar fácilmente por tu blog con vínculos a entradas antiguas.

• La lista de publicaciones se actualizará automáticamente con la adición de nuevas publicaciones. 
• Agregado automático de etiquetas nuevas a las nuevas publicaciones. 
• Ordenado alfabéticamente (ascendente)

Cómo agregar un Mapa Del Sitio (sitemap) en Blogger
Esta es una página de mapa del sitio basada en etiquetas y solo puede aplicar temas basados en etiquetas, por ejemplo: sitemap

Paso 1. Ingresa a tu cuenta de Blogger, luego ve a Páginas > Página nueva. Crear página de sitemap basada en HTML en Blogger
Paso 2. Ingresa "Sitemap" o "Mapa del sitio" en el campo de título de la página.
Paso 3. Cambia al modo HTML.
Paso 4. Ingresa el siguiente código en una página en blanco, es decir, borre cualquier código predeterminado dentro del campo HTML antes de pegar el código provisto.

[<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='https://ruben-apaza.blogspot.com';cat_numb=4;cat_pre='< Anterior';cat_nex='Siguiente >';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>
<style scoped="" type="text/css">
#show-cat{float:left;margin:20px 2% 20px 0;width:25%;height:246px;overflow-x:hidden;overflow-y:auto;line-height:normal;border:1px solid rgba(0,0,0,0.1)}
#show-cat ul{margin:0;border-top:0 solid rgba(0,0,0,0.1);padding:0}
#show-post ul li{list-style-type:none;margin:0 0 0 -25px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#show-post ul li:hover{margin-right:10px;border-color:#fcd3d3}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);transition:initial}
#navi-cat a:hover{color:#fff!important}
#show-cat ul li:last-child a{border-bottom:none}
#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:13px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}
#show-post{float:left;width:69%;line-height:1.6em}
#show-post a{color:#333;font-size:14px}
#show-post a:hover{color:#f14b4b}
#navi-cat{padding:20px 0}
#navi-cat a{padding:5px 10px;background:rgba(0,0,0,0.7);margin:0 5px 0 0;color:#fff;border-radius:3px;}
#navi-cat a:nth-child(2){background:#f14b4b;margin:0 10px 0 0;color:#fff}
#navi-cat span{float:right;padding:5px 0;font-size:12px;color:rgba(0,0,0,0.5);font-weight:700}
#show-cat::-webkit-scrollbar{width:8px;height:8px}
#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}
#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
#show-cat::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}
@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}
@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}
</style>]

Descartar cualquier tipo de error HTTPS.
Paso 5. Configuración, reemplazar 'https://ruben-apaza.blogspot.com' con la URL o dirección de tu blog o Web.
Paso 6. Haz clic en Publicar y listo. Cada vez que pueda publicar un nuevo artículo, la publicación del blog lo mostrará automáticamente en su página de Sitemap.

Agrego una página de mapa de sitio basada en HTML en su blog o web. Coloque su enlace a el blog o página web donde quiera mostrar su página Mapa del sitio (sitemap), por ejemplo en el menu. Para cualquier problema relacionado con la presente, contactate con nosotros o agregue un comente a continuación.