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

На просторах зарубежного интернета нашла для вас три карты сайта (sitemap html) для ваших блогов на площадке blogspot. Как установить карту и настроить читайте ниже.
Сообщение отредактировано 23.01.2021 г.

Это самый простой вариант sitemap. Карта выглядит в виде простого списка ссылок на статьи блога. Скриншот:

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

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

   <script type='text/javascript'>
    var postTitle = new Array();
    var postUrl = new Array();
    var postPublished = new Array();
    var postDate = new Array();
    var postLabels = new Array();
    var postRecent = new Array();
    var sortBy = "titleasc";
    var numberfeed = 0;
    function bloggersitemap(a) {
        function b() {
            if ("entry" in a.feed) {
                var d = a.feed.entry.length;
                numberfeed = d;
                ii = 0;
                for (var h = 0; h < d; h++) {
                    var n = a.feed.entry[h];
                    var e = n.title.$t;
                    var m = n.published.$t.substring(0, 10);
                    var j;
                    for (var g = 0; g < n.link.length; g++) {
                        if (n.link[g].rel == "alternate") {
                            j = n.link[g].href;
                            break
                        }
                    }
                    var o = "";
                    for (var g = 0; g < n.link.length; g++) {
                        if (n.link[g].rel == "enclosure") {
                            o = n.link[g].href;
                            break
                        }
                    }
                    var c = "";
                    if ("category" in n) {
                        for (var g = 0; g < n.category.length; g++) {
                            c = n.category[g].term;
                            var f = c.lastIndexOf(";");
                            if (f != -1) {
                                c = c.substring(0, f)
                            }
                            postLabels[ii] = c;
                            postTitle[ii] = e;
                            postDate[ii] = m;
                            postUrl[ii] = j;
                            postPublished[ii] = o;
                            if (h < 10) {
                                postRecent[ii] = true
                            } else {
                                postRecent[ii] = false
                            }
                            ii = ii + 1
                        }
                    }
                }
            }
        }
        b();
        sortBy = "titledesc";
        sortPosts(sortBy);
        sortlabel();
        displayToc();
    }
    function sortPosts(d) {
        function c(e, 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
        }
        for (var b = 0; b < postTitle.length - 1; b++) {
            for (var a = b + 1; a < postTitle.length; a++) {
                if (d == "titleasc") {
                    if (postTitle[b] > postTitle[a]) {
                        c(b, a)
                    }
                }
                if (d == "titledesc") {
                    if (postTitle[b] < postTitle[a]) {
                        c(b, a)
                    }
                }
                if (d == "dateoldest") {
                    if (postDate[b] > postDate[a]) {
                        c(b, a)
                    }
                }
                if (d == "datenewest") {
                    if (postDate[b] < postDate[a]) {
                        c(b, a)
                    }
                }
                if (d == "orderlabel") {
                    if (postLabels[b] > postLabels[a]) {
                        c(b, a)
                    }
                }
            }
        }
    }
    function sortlabel() {
        sortBy = "orderlabel";
        sortPosts(sortBy);
        var a = 0;
        var b = 0;
        while (b < postTitle.length) {
            temp1 = postLabels[b];
            firsti = a;
            do {
                a = a + 1
            } while (postLabels[a] == temp1);
            b = a;
            sortPosts2(firsti, a);
            if (b > postTitle.length) {
                break
            }
        }
    }
    function sortPosts2(d, c) {
        function e(f, 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
        }
        for (var b = d; b < c - 1; b++) {
            for (var a = b + 1; a < c; a++) {
                if (postTitle[b] > postTitle[a]) {
                    e(b, a)
                }
            }
        }
    }
    function displayToc() {
        var a = 0;
        var b = 0;
        while (b < postTitle.length) {
            temp1 = postLabels[b];
            document.write("");
            document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
            firsti = a;
            do {
                document.write("<p>");
                document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");
                if (postRecent[a] == true) {
                    document.write(' - <strong><span>New!</span></strong>')
                }
                document.write("</a></p>");
                a = a + 1
            } while (postLabels[a] == temp1);
            b = a;
            document.write("</div></div>");
            sortPosts2(firsti, a);
            if (b > postTitle.length) {
                break
            }
        }
    }
    </script>
    <script src="https://www.yourblog.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script>

3. Замените адрес сайта в коде, выделенный желтым на url вашего блога.
4. Опубликуйте страницу.

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

Как вставить в блог?
Также, как и в первом случае, создайте новую страницу блога и вставьте в режиме 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 (адрес блога) вместо ссылки.  Не забудьте, что если карта блога не отображается, значит у вас не присвоено ни одного ярлыка к записям блога. И если вы хотите, чтобы в вашей карте присутствовали все статьи, то проследите за тем, чтобы к каждой записи вашего блога стояла метка.

Sitemap html в виде таблицы

Стилизированная карта сайта в виде серой таблицы, где в первом столбце располагается перечень тем, во втором - даты публикации, а в третьем - метки.

Код для вставки:

<style>
/* Sitemap plugin By MyBloggerLab */
#bp_toc {
    color: #666;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #d2d2d2;
    float: left;
    width: 100%;
}
span.toc-note {
    display: none;
}
#bp_toc tr:nth-child(2n) {
    background: #f5f5f5;
}
td.toc-entry-col1 a {
    font-weight: bold;
    font-size: 14px;
}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3  {
background:#9E9E9E;
}
.toc-header-col1 {
    padding: 10px;
    width: 250px;
}
.toc-header-col2 {
    padding: 10px;
    width: 75px;
}
.toc-header-col3 {
    padding: 10px;
    width: 125px;
}
.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
    font-size: 13px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {
    text-decoration: none;
}
.toc-entry-col1,
.toc-entry-col2,
.toc-entry-col3 {
    padding: 5px;
    padding-left: 5px;
    font-size: 12px;
}
.toc-entry-col1 a,
.toc-entry-col2 a,
.toc-entry-col3 a {
    color: #666;
    font-size: 13px;
    text-decoration: none
}
.toc-entry-col1 a:hover,
.toc-entry-col2 a:hover,
.toc-entry-col3 a:hover {
    text-decoration:underline;
}
#bp_toc table {
    width: 100%;
    margin: 0 auto;
    counter-reset: rowNumber;
}
.toc-entry-col1 {
    counter-increment: rowNumber;
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
       min-height: 3em;
    float: left;
    border-right: 1px solid #fff;
    text-align: center;
    padding: 0px 11px 1px 6px;
    margin-right: 15px;
}
td.toc-entry-col2 {
    text-align: center;
}
</style>
<div id="bp_toc">
</div>
<script src='https://spishu.ru/download/sitemap.js'  type="text/javascript"></script>
<script src="https://www.magnit-akciya.tk/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

 

С вкладками

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

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

<div class="tabbed-toc" id="tabbed-toc"></div>  
 <script>  
 var tabbedTOC={blogUrl:"https://вашблог.blogspot.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:red;">New</em>'};  
 </script>  
 <script src="https://cdn.jsdelivr.net/gh/Indzign/InSEO@master/daftarisikeren.js"></script>  
 <style scoped="" type="text/css">  
 .tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}  
 .tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}  
 .tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}  
 .tabbed-toc .toc-tabs{width:20%;float:left}  
 .tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}  
 .tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}  
 .tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}  
 .tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}  
 .tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}  
 .tabbed-toc .panel{position:relative;z-index:5}  
 .tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}  
 .tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right}  
 .tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}  
 .tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}  
 .tabbed-toc .panel li{background-color:#f9f9f9;margin:0}  
 .tabbed-toc .panel li:nth-child(even){background-color:#fff}  
 .tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}  
 .tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}  
 .tabbed-toc .panel li:before{display:none}  
 .nightmode .tabbed-toc .toc-content,.nightmode .tabbed-toc .toc-line{background-color:rgba(0,0,0,0.1)}  
 .nightmode .tabbed-toc{background:rgba(0,0,0,0.1)}  
 .nightmode .tabbed-toc .panel li{background:rgba(255,255,255,.05)}  
 .nightmode .tabbed-toc .panel li:nth-child(even){background:rgba(255,255,255,.1)}  
 @-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}  
 @-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}  
 @keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}  
 @media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}  
 </style> 

 Карта с градиентом

Некоторым блогерам понравится вариант sitemap с градиентными полосами. Установка кода стандартная, подробно описана выше.

Код для вставки:

<style type="text/css">
#sitemap {
width:100%;
margin:5px auto;
margin-left: 4px;
border:1px solid #23A839;
border-top:0px solid #2D96DF;
}
.label {
color:#FF5F00;
font-weight:bold;
margin: -16px -1px 0px;
padding:1px 0 2px 11px;
background: -webkit-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Firefox 3.6 to 15 */
background: linear-gradient(right,#6DFC85 0%,#23A839 40%); /* Standard syntax */
border:1px solid #23A839;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
display:block;
}
.label a {color:#fff;}
.label:first-letter {text-transform:uppercase;}
.new {
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname {
font-weight:normal;
background: -webkit-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Firefox 3.6 to 15 */
background: linear-gradient(right,#6DFC85 0%,#FFF 40%); /* Standard syntax */
}
.postname li {
border-bottom: #DDD 1px dotted;
margin-right:5px
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
</style>
<div id="sitemap">
<script type="text/javascript" src="https://cdn.rawgit.com/prozokti/rashid/master/sitemap.js"></script>
<script src="https://www.magnit-akciya.tk/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadsitemap"></script>
</div>

Sitemap с отображением постов в виде плитки

Уникальность этой карты заключается в том, что посты в ней можно сортировать по дате публикации, по ярлыкам, по авторам. Для создания этой карты через iframe выводят просмотр динамического шаблона блога.

<style type="text/css">
.grid-sitemap
 { 
    overflow: hidden;
    position: relative;
    height: 565px;
    margin: 20px 0 40px 0;
  }
.grid-sitemap iframe
 {
     display: block;
     width: 100%; 
     height: 680px;
     margin-top: -115px;
     margin-left: -5px;
  }
</style>
<div class="grid-sitemap">
<iframe src="https://вашадресблога.blogspot.com/view/flipcard"></iframe>
</div>

Я надеюсь, что вы найдете полезным пост про создание карты сайта для Blogger, и вы найдете лучший для себя вариант.