Как сделать карту сайта для Blogspot

На просторах зарубежного интернета нашла для вас три карты сайта (sitemap html) для ваших блогов на площадке blogspot. Как установить карту и настроить читайте ниже.
Сообщение отредактировано 10.09.2017 г.
Карта блога №1 для Blogger (Blogspot) вы пока видите вы моем блоге. В ближайшем будущем я ее собираюсь менять. Карта выглядит в виде простого списка ссылок на статьи блога. Скриншот:

Как установить?

1. Создайте новую страницу блога, дайте название,
2. В режиме HTML новой страницы вставьте код карты:
   

   <script type="text/javascript">

    var numposts = 450;
    var standardstyling = true;

    function showrecentpostsundefinedjson) {
     for undefinedvar i = 0; i < numposts; i++) {
      var entry = json.feed.entry[i];
      var posttitle = entry.title.$t;
      var posturl;
      if undefinedi == json.feed.entry.length) break;
      for undefinedvar k = 0; k < entry.link.length; k++) {
       if undefinedentry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
       }
      }
      posttitle = posttitle.linkundefinedposturl);
      if undefinedstandardstyling) document.writeundefined'<li>');
      document.writeundefinedposttitle);
     }
      if undefinedstandardstyling) document.writeundefined'</li>');
    }
   </script>

   <br />
   <ul>
    <script src="https://mycrib.ru/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>

     

    var numposts = 450;

    var standardstyling = true;

     

    function showrecentposts(json) {

     for (var i = 0; i < numposts; i++) {    var entry = json.feed.entry[i];    var posttitle = entry.title.$t;    var posturl;    if (i == json.feed.entry.length) break;    for (var k = 0; k < entry.link.length; k++) {     if (entry.link[k].rel == 'alternate') {      posturl = entry.link[k].href;      break;     }    }    posttitle = posttitle.link(posturl);    if (standardstyling) document.write('

   ');

      document.write(posttitle);

     }

      if (standardstyling) document.write('

   ');

    }

   </ul>

 Вторая рабочая карта блога также содержит перечень ссылок, разделенных по категориям (меткам) Автор неизвестен. Скриншот:

Как вставить в блог?
Также, как и в первом случае, создайте новую страницу блога и вставьте в режиме html код:

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Arrayundefined);var postUrl=new Arrayundefined);var postPublished=new Arrayundefined);var postDate=new Arrayundefined);var postLabels=new Arrayundefined);var postRecent=new Arrayundefined);var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemapundefineda){function bundefined){ifundefined"entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;forundefinedvar h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substringundefined0,10);var j;forundefinedvar g=0;g<n.link.length;g++){ifundefinedn.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";forundefinedvar g=0;g<n.link.length;g++){ifundefinedn.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";ifundefined"category" in n){forundefinedvar g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOfundefined";");ifundefinedf!=-1){c=c.substringundefined0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;ifundefinedh<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}bundefined);sortBy="titleasc";sortPostsundefinedsortBy);sortlabelundefined);tocLoaded=true;displayToc2undefined);document.writeundefined'</br><div class="sitemap-link"><a href="https://helplogger.blogspot.com/2013/12/add-sitemap-table-of-contents-to-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}function filterPostsundefineda){scrollundefined0,0);postFilter=a;displayTocundefinedpostFilter)}function allPostsundefined){sortlabelundefined);postFilter="";displayTocundefinedpostFilter)}function sortPostsundefinedd){function cundefinede,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}forundefinedvar b=0;b<postTitle.length-1;b++){forundefinedvar a=b+1;a<postTitle.length;a++){ifundefinedd=="titleasc"){ifundefinedpostTitle[b]>postTitle[a]){cundefinedb,a)}}ifundefinedd=="titledesc"){ifundefinedpostTitle[b]<postTitle[a]){cundefinedb,a)}}ifundefinedd=="dateoldest"){ifundefinedpostDate[b]>postDate[a]){cundefinedb,a)}}ifundefinedd=="datenewest"){ifundefinedpostDate[b]<postDate[a]){cundefinedb,a)}}ifundefinedd=="orderlabel"){ifundefinedpostLabels[b]>postLabels[a]){cundefinedb,a)}}}}}function sortlabelundefined){sortBy="orderlabel";sortPostsundefinedsortBy);var a=0;var b=0;whileundefinedb<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}whileundefinedpostLabels[a]==temp1);b=a;sortPosts2undefinedfirsti,a);ifundefinedb>postTitle.length){break}}}function sortPosts2undefinedd,c){function eundefinedf,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}forundefinedvar b=d;b<c-1;b++){forundefinedvar a=b+1;a<c;a++){ifundefinedpostTitle[b]>postTitle[a]){eundefinedb,a)}}}}function displayTocundefineda){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";ifundefinedsortBy=="titleasc"){m+=" undefineddescending)";k+=" undefinednewest first)"}ifundefinedsortBy=="titledesc"){m+=" undefinedascending)";k+=" undefinednewest first)"}ifundefinedsortBy=="dateoldest"){m+=" undefinedascending)";k+=" undefinednewest first)"}ifundefinedsortBy=="datenewest"){m+=" undefinedascending)";k+=" undefinedoldest first)"}ifundefinedpostFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSortundefined);" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSortundefined);" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPostsundefined);" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";forundefinedvar g=0;g<postTitle.length;g++){ifundefineda==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOfundefineda);ifundefinedz!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";ifundefinedl==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementByIdundefined"toc");b.innerHTML=f+h}function displayToc2undefined){var a=0;var b=0;whileundefinedb<postTitle.length){temp1=postLabels[b];document.writeundefined"<p/>");document.writeundefined'<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.writeundefined"<li>");document.writeundefined'<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");ifundefinedpostRecent[a]==true){document.writeundefined' - <strong><span style="color: rgbundefined255, 0, 0);">New!</span></strong>')}document.writeundefined"</li>");a=a+1}whileundefinedpostLabels[a]==temp1);b=a;document.writeundefined"</ol>");sortPosts2undefinedfirsti,a);ifundefinedb>postTitle.length){break}}}function toggleTitleSortundefined){ifundefinedsortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPostsundefinedsortBy);displayTocundefinedpostFilter)}function toggleDateSortundefined){ifundefinedsortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPostsundefinedsortBy);displayTocundefinedpostFilter)}function showTocundefined){ifundefinedtocLoaded){displayTocundefinedpostFilter);var a=document.getElementByIdundefined"toclink")}else{alertundefined"Just wait... TOC is loading")}}function hideTocundefined){var a=document.getElementByIdundefined"toc");a.innerHTML="";var b=document.getElementByIdundefined"toclink");b.innerHTML='<a href="#" onclick="scrollundefined0,0); showTocundefined); Effect.toggleundefined'toc-result','blind');">?? Display Table of Contents</a> <img src="https://1.bp.blogspot.com/-_VZwBpHw_SI/UrXvLbFxacI/AAAAAAAAFiQ/ZGqWZUZesCI/s1600/new_icon.gif"/>'}function looptemp2undefined){forundefinedvar a=0;a<numberfeed;a++){document.writeundefined"<br>");document.writeundefined'Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.writeundefined'Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.writeundefined"<br>")}};
//]]>
</script>
<script src="https://mycrib.ru/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Укажите свой blogUrl (адрес блога) вместо ссылки, выделенной желтым.
P.S. Не забудьте, что если карта блога не отображается, значит у вас не присвоено ни одного ярлыка к записям блога. И если вы хотите, чтобы в вашей карте присутствовали все статьи, то проследите за тем, чтобы к каждой записи вашего блога стояла метка.

Карта блога. Вариант №3.

Статьи сгруппированы по категориям. Выбираем категорию и открывается перечень, относящихся к ней статей. Карта компактная. Без чужих ссылок. Можно полностью менять ее под себя, меняя код CSS. Встроить карту на блог очень просто - добавьте код на страницу в режиме HTML. При добавлении не забудьте указать следующие параметры:

               кликабельно


Измените адрес блога на свой. Выделен в коде желтым.
Код карты сайта:

&lt;div id=&quot;tabbed-toc&quot;&gt;

&lt;span class=&quot;loading&quot;&gt;Подождите, идет загрузка...&lt;/span&gt;&lt;/div&gt;

&lt;br /&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

var tabbedTOC = {

    blogUrl: &quot;https://mycrib.ru&quot;, // Enter your blog URL

    containerId: &quot;tabbed-toc&quot;, // Container ID

    activeTab: 1, // The default active tab index undefineddefault: the first tab)

    showDates: false, // `true` to show the post date

    showSummaries: false, // `true` to show the posts summaries

    numChars: 200, // Number of summary chars

    showThumbnails: false, // `true` to show the posts thumbnails undefinedNot recommended)

    thumbSize: 40, // Default thumbnail size

    noThumb: &quot;&quot;, // A &quot;no thumbnail&quot; URL

    monthNames: [ // Array of month names

        &quot;Январь&quot;,

        &quot;Февраль&quot;,

        &quot;Март&quot;,

        &quot;Апрель&quot;,

        &quot;Май&quot;,

        &quot;Июнь&quot;,

        &quot;Июль&quot;,

        &quot;Август&quot;,

        &quot;Сентябрь&quot;,

        &quot;Октябрь&quot;,

        &quot;Ноябрь&quot;,

        &quot;Декабрь&quot;

    ],

    newTabLink: true, // Open link in new window. `false` to open in same window

    maxResults: 99999, // Maximum post results

    preload: 0, // Load the feed after 0 seconds undefinedoption =&gt; time in milliseconds || &quot;onload&quot;)

    sortAlphabetically: true, // `false` to sort posts by published date

    showNew: 7, // `false` to hide the &quot;New!&quot; mark in most recent posts or

 //define how many recent posts are to be marked by changing the number

    newText: &quot; - &lt;em style=&#039;color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;&#039;&gt;New!&lt;/em&gt;&quot; // HTML/CSS for

//the &quot;New!&quot; text

};

&lt;/script&gt;

&lt;script src=&quot;http://yourjavascript.com/51107864021/tabbed-toc-defaults.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

&lt;style&gt;

/*Sitemap  */

#tabbed-toc {

 width: 99%;

 margin: 0 auto;

 overflow: hidden !important;

 position: relative;

 color: #000;

 border: 0;

 border-top: 5px solid #cccccc;

 background-color: #fff;

 -webkit-transition: all 0.4s ease-in-out;

}

#tabbed-toc .loading {

 display:block;

 padding:5px 15px;

 font:normal bold 11px Arial,Sans-Serif;

 color:#FFF;

}

#tabbed-toc ul,

#tabbed-toc ol,

#tabbed-toc li {

 margin:0;

 padding:0;

 list-style:none;

 }

#tabbed-toc .toc-tabs {

 width: 24.8%;

 float: left !important;

}

#tabbed-toc .toc-tabs li a {

 display:block;

 font:normal bold 10px/28px Arial,Sans-Serif;

 height:28px;

 overflow:hidden;

 text-overflow:ellipsis;

 color:#000;

 text-transform:uppercase;

 text-decoration:none;

 padding:0 12px;

 cursor:pointer;

  -webkit-transition: all 0.3s ease-in-out;

}

#tabbed-toc .toc-tabs li a:hover {

 background-color: #666666;

 color: #FFF;

 }

#tabbed-toc .toc-tabs li a.active-tab {

 background-color: #F42B00;

 color: #222;

 position: relative;

 z-index: 5;

 margin: 0 -2px 0 0;

}

#tabbed-toc .toc-content,

#tabbed-toc .divider-layer {

 width: 75%;

 float: right !important;

 background-color: #F5F5F5;

 border-left: 5px solid #666666;

 -webkit-box-sizing: border-box;

 -moz-box-sizing: border-box;

 box-sizing: border-box;

 -webkit-transition: all 0.3s ease-in-out;

}

#tabbed-toc .divider-layer {

 float:none;

 display:block;

 position:absolute;

 top:0; right:0; bottom:0;

}

#tabbed-toc .panel {

 position:relative;

 z-index:5;

 font:normal normal 10px Arial,Sans-Serif;

}

#tabbed-toc .panel li a {

 display: block;

 position: relative;

 font-weight: bold;

 font-size: 11px;

 color: #222;

 line-height: 2.8em;

 height: 30px;

 padding: 0 10px;

 text-decoration: none;

 outline: none;

 overflow: hidden;

 -webkit-transition: all 0.3s ease-in-out;

}

#tabbed-toc .panel li time {

 display:block;

 font-style:italic;

 font-weight:400;

 font-size:10px;

 color:#666;

 float:right;

}

#tabbed-toc .panel li .summary {

 display:block;

 padding:10px 12px;

 font-style:italic;

 border-bottom:4px solid #275827;

 overflow:hidden;

}

#tabbed-toc .panel li .summary img.thumbnail {

 float:left;

 display:block;

 margin:0 8px 0 0;

 padding:4px;

 width:72px;

 height:72px;

 border:1px solid #dcdcdc;

 background-color:#fafafa;

}

#tabbed-toc .panel li:nth-childundefinedeven) {

 background-color: #DBDBDB;

 font-size: 10px;

}

#tabbed-toc .panel li a:hover,

#tabbed-toc .panel li a:focus,

#tabbed-toc .panel li a:hover time,

#tabbed-toc .panel li.bold a {

 background-color:#222;

 color:#FFF;

 outline:none;

 -webkit-transition: all 0.3s ease-in-out;

}

#tabbed-toc .panel li.bold a:hover,

#tabbed-toc .panel li.bold a:hover time {

 background-color:#222;

}

@media undefinedmax-width:700px) {

#tabbed-toc {

 background-color:#fff;

 border:0 solid #888;

}

#tabbed-toc .toc-tabs,

#tabbed-toc .toc-content {

 overflow:hidden;

 width:auto;

 float:none !important;

 display:block;

}

#tabbed-toc .toc-tabs li {

 display:inline;

 float:left !important;

}

#tabbed-toc .toc-tabs li a,

#tabbed-toc .toc-tabs li a.active-tab {

 background-color:#222;

 color:#ccc;

}

#tabbed-toc .toc-tabs li a.active-tab {

 color:#000;

}

#tabbed-toc .toc-content {

 border:none;

}

#tabbed-toc .divider-layer,

#tabbed-toc .panel li time {

 display:none;

}

}

&lt;/style&gt;