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

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

Карта блога №1 для Blogger (Blogspot)

Это самый простой вариант 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. Опубликуйте страницу.

Второй вариант Sitemap html для Blogger

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

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

 

С вкладками

sitemap blogger

Статьи сгруппированы по категориям. Выбираем категорию и открывается перечень, относящихся к ней статей. Карта компактная. Без чужих ссылок. Можно полностью менять ее под себя, меняя код 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 выводят просмотр динамического шаблона блога.

динамический шаблон blogger

<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, и вы найдете лучший для себя вариант.

18 ответов к «Как сделать карту сайта для Blogspot»
  1. Вторую хочу поставить на свой блог, карта понравилась, но не работает, висит слово Loading... и всё, не подскажете в чём может быть проблема?

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

    Код:

    <link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css&quot; type="text/css" media="screen" />
    <div id="tabbed-toc"><span class="loading">Loading...</span></div>
    <a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.allbloggertricks.com/&quot; title="Tabbed TOC">All Blogger Tricks</a>
    <script type="text/javascript">
    var tabbedTOC = {
    blogUrl: "http://centr-gaz.blogspot.ru/&quot;, // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: 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 (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png&quot;, // A "no thumbnail" URL
    monthNames: [ // Array of month names
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
    };
    </script>
    <script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script&gt;

  3. Честно сказать , перерыл в инете кучу инфы по данному вопросу , есть варианты , но мне ни один не понравился . Пришлось самому все делать для себя ручками .

    1. И мы хотим сами сделать, ручками своими, чтобы не было чужих ссылок. Подскажите прямой путь, где можно взять компактную информацию, чтобы с нуля написать этот скрипт и не заимствовать ни у кого?

  4. Хотела поставить второй вариант, сохранила на гугл диск и оттуда копирую, а архива нет. В общем что-то я напутала, да? (гугл диск, потому что после блокировки так мне мастера посоветовали)

  5. Элси, да второй карты похоже уже не существует.. На тестовом блоге она не работает. Я не сохранила заблаговременно на свой сервис((

  6. Igor, для того, чтобы проставить ярлыки, нужно отредактировать все записи на блоге. Сообщение -> изменить. Справа от текстового блока будет графа "Ярлыки". Нажмите на нее и заполните ключевыми словами через запятую, например, blogspot, виджеты и т.п. Эти слова должны характеризовать вашу статью.
    Попробуйте. И да, вторая карта из этой записи уже не работает (

  7. Igor Sannicov, попробовала вторую карту - тоже, к сожалению, не работает(( Придется править запись.

    Код карты блога, такой как у меня:

    <link href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css&quot; media="screen" rel="stylesheet" type="text/css"></link>
    <script src="http://blogtoc-cometa.googlecode.com/files/blogtoc_wa.js"&gt;
    </script>
    <script src="http://www.mycrib.ru/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"&gt;
    </script>

    Вместо адреса моего блога поставьте свой.

  8. Я добавил карту своего блога http://le2x.blogspot.com/sitemap.xml в Яндекс, буду ждать результата. Платформа blogger автоматически генерирует карту сайта. Скажите а в файле robot.txt обязательно прописывать sitemap.xml ?

  9. У меня на странице в режиме HTML стоит код. Нужно ли его удалять перед тем, как вставлять новый код?

  10. Ирина, вы можете его удалить, а можете вставить свой код перед закрывающимся тегом div:

    <div dir="ltr" style="text-align: left;" trbidi="on">
    <br />Здесь ваш код</div>

    Предупреждаю, что в данной статье коды карт уже не работают. Исправить статью пока некогда.

  11. Совсем непонятно для сайта в котором нет сообщений (с ярлыками), а только страницы. Для страниц ярлыки не предусмотрены. Как быть? И ещё вопрос. Если воспользоваться онлайн генератором, то куда потом вставить готовую карту в свой сайт на блогспоте.

  12. Ирина, если вы не используете ярлыки для вашего блога, то ни один из указанных способов создания карты вам не подойдет. А что вам мешает добавить ярлыки для сообщений?
    Есть способ добыть ссылки на все статьи блога с помощью сео программы и вставить в виде ссылок на страницу блога, но этот способ трудозатратный, и вам постоянно придется обновлять страницу по мере появления в блоге новых статей.
    А какой онлайн-генератор для создания карты сайта вы хотите использовать?

  13. Очень интересная информация, но у меня не сообщений, а есть страницы с темами. Кроме этого темы разбиты на 6 рубрик. Совсем не понятно, как действовать в таком случае. Заранее спасибо за ответ!

Добавить комментарий

Ваш адрес email не будет опубликован.