Карта блога для Blogger

Карта блога или пользовательская карта - это специальный виджет, выводящий на отдельную страницу все сообщения из вашего блога.

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

Как добавить пользовательскую карту в блог на Blogger

Чтобы создать пользовательскую карту блога, необходимо выполнить следующие действия:

Создать новую страницу.
Вставить специальный код в HTML редактор статьи (смотри ниже).
Опубликовать сообщение.

Также, при необходимости, может потребоваться редактирование шаблона.

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

Я предлагаю вам семь вариантов, выбирайте любой понравившийся.

Первый вариант - нумерованный список

В первом варианте карты блога статьи выводятся в виде нумерованного списка для каждого ярлыка, при этом, если кликнуть на саму рубрику, то откроется страница данного ярлыка. Недавно опубликованные статьи отмечаются значком "New".

Основными минусами данной карты в том, что для каждого ярлыка может отображаться не более 150 сообщений, а статьи без метки, вообще, не выводятся.

Для установки данного варианта, вставьте в HTML редактор статьи следующий код:

<div id="toc"></div><blockquote><div id="toc"><br /></div></blockquote><div id="toc"></div><div id="toc">
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 3=F H();2 u=F H();2 w=F H();2 q=F H();2 6=F H();2 y=F H();2 7="L";2 17=1s;2 27=2P;2 E="";2 1a=0;r 1Q(a){r b(){4("A"1H a.1i){2 d=a.1i.A.v;1a=d;D=0;B(2 h=0;h<d;h++){2 n=a.1i.A[h];2 e=n.O.$t;2 m=n.23.$t.1x(0,10);2 j;B(2 g=0;g<n.M.v;g++){4(n.M[g].18=="2c"){j=n.M[g].s;U}}2 o="";B(2 g=0;g<n.M.v;g++){4(n.M[g].18=="1Z"){o=n.M[g].s;U}}2 c="";4("16"1H n){B(2 g=0;g<n.16.v;g++){c=n.16[g].28;2 f=c.1v(";");4(f!=-1){c=c.1x(0,f)}6[D]=c;3[D]=e;q[D]=m;u[D]=j;w[D]=o;4(h<10){y[D]=13}I{y[D]=1s}D=D+1}}}}}b();7="L";P(7);19();17=13;1r();9.x()}r 1O(a){1F(0,0);E=a;K(E)}r 1n(){19();E="";K(E)}r P(d){r c(e,g){2 f=3[e];3[e]=3[g];3[g]=f;2 f=q[e];q[e]=q[g];q[g]=f;2 f=u[e];u[e]=u[g];u[g]=f;2 f=6[e];6[e]=6[g];6[g]=f;2 f=w[e];w[e]=w[g];w[g]=f;2 f=y[e];y[e]=y[g];y[g]=f}B(2 b=0;b<3.v-1;b++){B(2 a=b+1;a<3.v;a++){4(d=="L"){4(3[b]>3[a]){c(b,a)}}4(d=="15"){4(3[b]<3[a]){c(b,a)}}4(d=="1g"){4(q[b]>q[a]){c(b,a)}}4(d=="R"){4(q[b]<q[a]){c(b,a)}}4(d=="1w"){4(6[b]>6[a]){c(b,a)}}}}}r 19(){7="1w";P(7);2 a=0;2 b=0;S(b<3.v){J=6[b];T=a;1p{a=a+1}S(6[a]==J);b=a;1j(T,a);4(b>3.v){U}}}r 1j(d,c){r e(f,h){2 g=3[f];3[f]=3[h];3[h]=g;2 g=q[f];q[f]=q[h];q[h]=g;2 g=u[f];u[f]=u[h];u[h]=g;2 g=6[f];6[f]=6[h];6[h]=g;2 g=w[f];w[f]=w[h];w[h]=g;2 g=y[f];y[f]=y[h];y[h]=g}B(2 b=d;b<c-1;b++){B(2 a=b+1;a<c;a++){4(3[b]>3[a]){e(b,a)}}}}r K(a){2 l=0;2 h="";2 e="25 Z";2 m="11 12 2p 2s 2A";2 d="2L";2 k="11 12 1I 1J 1K";2 c="1L";2 j="";4(7=="L"){m+=" (1N)";k+=" (14 V)"}4(7=="15"){m+=" (1l)";k+=" (14 V)"}4(7=="1g"){m+=" (1l)";k+=" (14 V)"}4(7=="R"){m+=" (1l)";k+=" (1S V)"}4(E!=""){j="11 12 1Y 31"}h+="<1t>";h+="<N>";h+=\'<5 8="i-W-1b">\';h+=\'<a s="1c:1o();" O="\'+m+\'">\'+e+"</a>";h+="</5>";h+=\'<5 8="i-W-1d">\';h+=\'<a s="1c:1q();" O="\'+k+\'">\'+d+"</a>";h+="</5>";h+=\'<5 8="i-W-1e">\';h+=\'<a s="1c:1n();" O="\'+j+\'">\'+c+"</a>";h+="</5>";h+=\'<5 8="i-W-1f">\';h+="X 1M";h+="</5>";h+="</N>";B(2 g=0;g<3.v;g++){4(a==""){h+=\'<N><5 8="i-A-1b"><a s="\'+u[g]+\'">\'+3[g]+\'</a></5><5 8="i-A-1d">\'+q[g]+\'</5><5 8="i-A-1e">\'+6[g]+\'</5><5 8="i-A-1f"><a s="\'+w[g]+\'">X</a></5></N>\';l++}I{z=6[g].1v(a);4(z!=-1){h+=\'<N><5 8="i-A-1b"><a s="\'+u[g]+\'">\'+3[g]+\'</a></5><5 8="i-A-1d">\'+q[g]+\'</5><5 8="i-A-1e">\'+6[g]+\'</5><5 8="i-A-1f"><a s="\'+w[g]+\'">X</a></5></N>\';l++}}}h+="</1t>";4(l==3.v){2 f=\'<C 8="i-1u">1h 1R \'+3.v+" Z<G/></C>"}I{2 f=\'<C 8="i-1u">1h \'+l+" 1T 1U 1V \'";f+=E+"\' 1W "+3.v+" 1X Z<G/></C>"}2 b=9.Y("i");b.1k=f+h}r 1r(){2 a=0;2 b=0;S(b<3.v){J=6[b];9.x("<p/>");9.x(\'<C 8="20"><a s="/21/22/\'+J+\'">\'+J+"</a></C><1y 8=\'24\'>");T=a;1p{9.x("<1z>");9.x(\'<a s="\'+u[a]+\'">\'+3[a]+"</a>");4(y[a]==13){9.x(\' - <C 8="F">26!</C>\')}9.x("</1z>");a=a+1}S(6[a]==J);b=a;9.x("</1y>");1j(T,a);4(b>3.v){U}}}r 1o(){4(7=="L"){7="15"}I{7="L"}P(7);K(E)}r 1q(){4(7=="R"){7="1g"}I{7="R"}P(7);K(E)}r 1A(){4(17){K(E);2 a=9.Y("1B")}I{29("2a 2b... 1C 2d 2e")}}r 2f(){2 a=9.Y("i");a.1k="";2 b=9.Y("1B");b.1k=\'<a s="#" 2g="1F(0,0); 1A(); 2h.2i(\\\'i-2j\\\',\\\'2k\\\');">?? 1h 2l 2m</a> <2n 2o="1D://2q.2r.1E/2t.2u"/>\'}r 2v(){B(2 a=0;a<1a;a++){9.x("<G>");9.x(\'2w 2x : <a s="\'+u[a]+\'">\'+3[a]+"</a><G>");9.x(\'X 2y : <a s="\'+w[a]+\'">\'+3[a]+"</a><G>");9.x("<G>")}};9.x("<C 2z=\'Q-2B:2C;2D:2E;Q-2F:2G;2H:2I 2J 0 0;\'><a O=\'2K 1C 1G 2M 2N - 2O 1G 1m.2Q.2R\' s=\'1D://1m.2S-2T.1E\' 2U=\'2V\' 18=\'2W\'><Q 2X=\'#2Y\'>2Z 30 1P!</Q></a></C>");',62,188,'||var|postTitle|if|td|postLabels|sortBy|class|document|||||||||toc||||||||postDate|function|href||postUrl|length|postMp3|write|postBaru||entry|for|span|ii|postFilter|new|br|Array|else|temp1|displayToc|titleasc|link|tr|title|sortPosts|font|datenewest|while|firsti|break|first|header|Download|getElementById|Artikel||Klik|untuk|true|newest|titledesc|category|tocLoaded|rel|sortlabel|numberfeed|col1|javascript|col2|col3|col4|dateoldest|Menampilkan|feed|sortPosts2|innerHTML|ascending|www|allPosts|toggleTitleSort|do|toggleDateSort|displayToc2|false|table|note|lastIndexOf|orderlabel|substring|ol|li|showToc|toclink|TOC|http|com|scroll|by|in|Sortir|bedasarkan|tanggal|Kategori|MP3|descending|filterPosts|widget|loadtoc|Semua|oldest|artikel|dengan|kategori|dari|Total|menampilkan|enclosure|labl|search|label|published|postname|Judul|New|numChars|term|alert|Just|wait|alternate|is|loading|hideToc|onclick|Effect|toggle|result|blind|Daftar|Isi|img|src|sortir|radiorodja|googlepages|berdasarkan|new_1|gif|looptemp2|Post|Link|mp3|style|judul|size|0px|float|right|family|arial|margin|20px|5px|Blogger|Tanggal|Abu|Farhan|Style|250|intert3chmedia|net|abu|farhan|target|_blank|nofollow|color|ff5f00|Grab|this|semua'.split('|'),0,{}))
//]]>
</script>
<script src="https://news-sawich.blogspot.com//feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

Замените в коде https://news-sawich.blogspot.com на адрес вашего блога и опубликуйте сообщение.

Второй вариант - обычный список

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

Минусы - не более 150 сообщений для каждой метки и статьи без ярлыка не выводятся.

Для установки используйте следующий код:

<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://news-sawich.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>

https://news-sawich.blogspot.com - замените на адрес своего сайта и опубликуйте статью.

Третий вариант - анимированная

Основная особенность третьего варианта заключается в том, что она анимированная, т.е. постоянно меняет свой цвет.

По внешнему виду - это три столбца: название ярлыка, заголовок статьи и дата публикации. Все новые сообщения обозначаются меткой: New.

Для установки используйте код:

<div class="spicetab" id="spicetab"></div>
<script>
var tabbedTAB={blogUrl:"https://news-sawich.blogspot.com",containerId:"spicetab",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Янв","Фев","Maр","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:#ff0000;">New</em>'};
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"",containerId:"spicetab",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Янв","Фев","Maр","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' – <em style="color:#ff0000;">New!</em>'};if("undefined"==typeof tabbedTAB)tabbedTAB=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTAB[e]?tabbedTAB[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b.getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g)c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++i)f[i].className="",f[parseInt(a,10)].className="active-tab"},a["showTabs_"+c]=function(e){for(var f=parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g.showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!==!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="tab-line"></span><ul class="tab-tabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="tab-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false;" onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>";j+="</ul>",j+='<div class="tab-content">';for(var o=0,n=i.length;n>o;++o){j+='<ol class="panel" data-category="'+i[o].term+'"',j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t.replace(/<br *\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.numChars)+"…":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10)+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>":"",z=0,A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='<li title="'+x[B].term+'"',j+=g.showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries?'<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li>")}}j+="</ol>"}j+="</div>",j+='<div style="clear:both;"></div>',b.getElementById(g.containerId).innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g.src=d.blogUrl.replace(/\/+$|[\?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function(){f.appendChild(g)}}(window,document);
</script>
<style scoped="" type="text/css">
.spicetab{border-radius:15px;margin:0 auto;position:relative;opacity: .9;background:linear-gradient(90deg, rgb(169, 108, 232), rgb(0, 115, 183));background-size:400% 400%;animation:Gradient 15s ease infinite}
.spicetab .loading{display:block;padding:2px 12px;color:#fff}
.spicetab ul,.spicetab ol,.spicetab li{list-style:none;color: #fff; margin:0;padding:0}
.spicetab .tab-tabs{width:20%;float:left}
.spicetab .tab-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.spicetab .tab-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.spicetab .tab-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.spicetab .tab-content,.spicetab .tab-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.spicetab .tab-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.spicetab .panel{position:relative;z-index:5}
.spicetab .panel li a{text-decoration: none;color:#000080;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.spicetab .panel li time{display:block;font-weight:bold;font-size:11px;color:#4285f4;float:right}
.spicetab .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.spicetab .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#FFFFFF}
.spicetab .panel li{background-color:#FFFFFF;margin:0}
.spicetab .panel li:nth-child(even){background-color:#fff}
.spicetab .panel li a:hover,.spicetab .panel li a:focus,.spicetab .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.spicetab .panel li a em{background:#9ACD32;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.spicetab .panel li:before{display:none}
@-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){.spicetab .tab-tabs,.spicetab .tab-content{overflow:hidden;width:auto;float:none;display:block}.spicetab .tab-tabs li{display:inline;float:left}.spicetab .tab-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.spicetab .tab-content{border:none}.spicetab .tab-line,.spicetab .panel li time{display:none}}
</style>

Замените https://news-sawich.blogspot.com на адрес своего блога. И опубликуйте сообщение.

Четвертый вариант - с постраничной навигацией

Четвертый вариант состоит из двух столбцов: название рубрики и заголовок статьи. Также, отображается количество сообщений с данной меткой.

Одновременно, скрипт может выводить до 150 сообщений одного ярлыка (количество настраивается). Для перехода к следующим публикациям необходимо воспользоваться встроенными кнопками навигации.

Для установки используйте код:

<style type='text/css' scoped='scoped'>
#sidebar-wrapper{display:none!important}#main-wrapper{width:100%!important}#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;line-height:18px;border:1px solid #7FFFD4}#show-cat ul{margin:0;border-top:0 solid #7FFFD4;padding:0}#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #7FFFD4;border-bottom:0 solid #7FFFD4;border-left:0 solid #7FFFD4;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #7FFFD4}#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:#0000CD;font-weight:bold;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#0000CD;color:#fff}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;margin:10px 0 0 -40px;padding:10px;border:1px solid #7FFFD4}#show-post a:hover{color:#07ACEC}#show-post a{color:#0000CD;font-weight:bold}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #7FFFD4}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{border-radius:2px;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>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home = "https://"+window.location.hostname;
cat_numb = 150;
cat_pre = 'Назад';
cat_nex = 'Вперед';
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 += ' – ' + (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=999999&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

cat_numb = 150 - 150 - это число, выводимых сообщений для одного ярлыка. Замените на желаемое. И опубликуйте сообщение.

Пятый вариант - аккордеон

В пятом варианте статьи отображаются в один столбик в виде раскрывающегося списка. При нажатии на названия ярлыка, отображаются сообщения из данной рубрики.

Максимальное выводимых сообщений для каждого ярлыка - 150 штук.

Для установки используйте следующий код:

<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#000080;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#000080;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#0000FF}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#5F9EA0!important;transition:initial}
.table-of-content a{color:#FFFFFF!important;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#FF0000!important;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Загрузка...</span></div>
<script>
var toc_config = {
url: "https://"+window.location.hostname,
containerId: 'table-of-content',
showNew: 15,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script>
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<h3 class="toc-header">'+n[g]+"</h3>",l+='<div class="toc-content"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li>")}l+="</ol></div>"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc-header").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document); </script>

Опубликуйте сообщение.

Шестой вариант - с сортировкой по ярлыкам и поиском

Карта блога с сортировкой по ярлыкам и поиском

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

Одновременно, выводится 10 сообщений с картинкой, заголовком и превью. Для перехода к следующим записям, нажимаете на "Дальше".

Для установки используйте код:

<style>
/* CSS Sitemap */
#table-outer table{width:100%;margin:0;padding:0}
#table-outer input,#table-outer select{padding:4px;font:inherit;border:2px solid #ecf0f1;width:170px;box-sizing:border-box}
#table-outer select{cursor:pointer;outline:none}
#table-outer input:focus{outline:none}
#resultDesc{margin-bottom:10px}
#feedContainer{overflow:hidden;margin-top:20px}
#feedContainer strong{font-size:10px}
#feedContainer,#feedContainer li{padding:0;margin:0;list-style:none}
#feedContainer li{float:left;width:50%;margin-bottom:10px;position:relative;z-index:0}
#feedContainer .inner{padding: 8px; margin: 0 5px; position: relative; background-color: #fff; border: 1px solid #f9f9f9; height: 133px; float: left; width: 45%; margin-bottom: 10px; position: relative; z-index: 0;}
#feedContainer img{float:left;margin:0 8px 0 0;max-width:100%;border:1px solid #f9f9f9;padding:2px}
#feedContainer .toc-title{max-height:33px;overflow:hidden}
#feedContainer .toc-title:hover{text-decoration:underline}
#feedContainer .news-text{font-size:11px}
#feedNav a,#feedNav span{display:block;text-align:center;color:#fff;text-decoration:none;background-color:#444;padding:5px;width:95%;margin:0 auto;transition:all 0.3s linear}
#feedNav a,#feedNav span:hover{background-color:#333;transition:all 0.3s linear}
#feedContainer .date{display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px}
#feedContainer .date .dd{font-size:9px;line-height:5px;font-weight:bold}
#feedContainer .date span{display:inline-block;line-height:5px;text-align:center;margin-left:5px}
</style>
<br />
<div id="table-outer">
<table><tbody>
<tr><td><label> </label></td><td><select id="orderFeedBy"><option selected="" value="published">Новые посты</option><option value="updated">Обновленные посты</option></select></td></tr>
<tr><td><label> </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Загрузка...</option></select></span></td></tr>
<tr><td><label> </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
Загрузка...</div>
<script type="text/javascript">
var tocConfig = {
url: "https://news-sawich.blogspot.com",
feedNum: 10,
labelName: false,
numChars: 140,
thumbWidth: 70,
navText: "Дальше ▼",
frontText: "Назад &uArr;",
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
loading: "<span>Загрузка...</span>",
searching: "<span>Поиск...</span>",
MonthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"],
noResult: "Нет результата"
};
function getID(b) {
return document.getElementById(b)
}
var head = document.getElementsByTagName("head")[0],
tocContainer = getID("feedContainer"),
feedNav = getID("feedNav"),
orderByer = getID("orderFeedBy"),
labelSorter = getID("labelSorter"),
input = getID("postSearcher").getElementsByTagName("input")[0],
resultDesc = getID("resultDesc"),
nextPage, feedArchive, startPage = 0;

function cropFeed(d, c) {
var f = d.split("<");
for (var e = 0; e < f.length; e++) {
if (f[e].indexOf(">") != -1) {
f[e] = f[e].substring(f[e].indexOf(">") + 1, f[e].length)
}
}
f = f.join(" ");
f = f.substring(0, c - 1);
return f
}
function showLabels(c) {
var a = c.feed.category,
d = "";
d = "<select id='labelSorter' onchange='changeSort(this.value);'>";
d += "<option value='' selected>РУБРИКИ...</option>";
for (var b = 0; b < a.length; b++) {
d += "<option value='" + decodeURIComponent(a[b].term) + "'>" + a[b].term.toUpperCase() + "</option>"
}
d += "</select>";
labelSorter.innerHTML = d
}
function showFeedList(t) {
var m = t.feed.entry,
o, s, n, h, e, u, g, p, r, q, c = "";
if (typeof(t.feed.entry) !== "undefined") {
for (var f = 0; f < tocConfig.feedNum; f++) {
o = (m) ? m[f] : "", nextPage = "";
if (f == t.feed.entry.length) {
break
}
s = o.title.$t;
for (var d = 0; d < o.link.length; d++) {
if (o.link[d].rel == "alternate") {
n = o.link[d].href;
break
}
}
for (var b = 0; b < t.feed.link.length; b++) {
if (t.feed.link[b].rel == "next") {
nextPage = t.feed.link[b].href
}
}
for (var a = 0; a < o.link.length; a++) {
if (o.link[a].rel == "replies" && o.link[a].type == "text/html") {
q = o.link[a].title;
break
}
}
if ("content" in o) {
e = o.content.$t
} else {
if ("summary" in o) {
e = o.summary.$t
} else {
e = ""
}
}
if ("media$thumbnail" in o) {
h = o.media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s" + tocConfig.thumbWidth + "-c")
} else {
h = tocConfig.noImage.replace(/\/s[0-9]+\-c/, "/s" + tocConfig.thumbWidth + "-c")
}
postdate = o.published.$t.substring(0, 10), u = postdate.substring(0, 4), g = postdate.substring(5, 7), p = postdate.substring(8, 10), r = tocConfig.MonthNames[parseInt(g, 10) - 1];
c += "<div class='inner'>";
c += "<a href='" + n + "' target='_blank'><img style='width:" + tocConfig.thumbWidth + "px;height:" + tocConfig.thumbWidth + "px;' src='" + h + "' alt='" + s + "' /></a>";
c += "<a class='toc-title' href='" + n + "' target='_blank'>" + s + "</a> <br>";
c += "<div class='news-text'>" + cropFeed(e, tocConfig.numChars) + "…<br style='clear:both;'/></div>";
c += '<div class="date"><span class="dd">' + p + '</span><span class="dm">' + r + '</span><span class="dy">' + u + "</span></div></div>"
}
if (input.value !== "" && window.location.hash == "#search") {
resultDesc.innerHTML = "<span>Результаты поиска <strong>"" + input.value + ""</strong></span>"
} else {
resultDesc.innerHTML = ""
}
feedContainer.innerHTML += c;
if (nextPage) {
if (window.location.hash && window.location.hash !== "#0") {
c = "<a href='javascript:initResult(2);' class='next'>" + tocConfig.navText + "</a>"
} else {
c = "<a href='javascript:initResult(1);' class='next'>" + tocConfig.navText + "</a>"
}
} else {
c = "<a href='#table-outer' onclick='jQuery('html, body').animate({scrollTop: jQuery('#table-outer').offset().top}, 1500); return false' class='front'>" + tocConfig.frontText + "</a>"
}
feedNav.innerHTML = c;
input.value = "";
labelSorter.getElementsByTagName("select")[0].removeAttribute("disabled");
orderByer.removeAttribute("disabled")
} else {
feedContainer.innerHTML = "";
alert(tocConfig.noResult);
feedNav.innerHTML = "<a href='?reload=true'>" + tocConfig.frontText + "</a>";
searchDesc.innerHTML = ""
}
}
function initResult(a) {
var b, c;
if (a == 1) {
b = nextPage.indexOf("?");
c = nextPage.substring(b)
} else {
if (a == 2) {
b = nextPage.indexOf("?");
c = nextPage.substring(b).replace(/\?/, "/-/" + window.location.hash.substr(1) + "?")
} else {
c = "?start-index=1&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&alt=json-in-script"
}
}
c += "&callback=showFeedList";
updateScript(c)
}
function removeScript() {
var a = getID("temporer-script");
a.parentNode.removeChild(a)
}

function buildLabels() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels";
head.appendChild(a)
}
function updateScript(b) {
if (startPage == 1) {
removeScript()
}
feedNav.innerHTML = tocConfig.loading;
if (tocConfig.labelName !== false) {
feedArchive = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary/-/" + tocConfig.labelName + b
} else {
feedArchive = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary" + b
}
var a = document.createElement("script");
a.type = "text/javascript";
a.src = feedArchive;
a.id = "temporer-script";
head.appendChild(a);
startPage = 1
}
function changeSort(c) {
removeScript();
tocContainer.innerHTML = "";
feedNav.innerHTML = tocConfig.loading;
var b = document.createElement("script"),
d = labelSorter.getElementsByTagName("select")[0],
a = (c !== 0) ? "/-/" + c : "";
b.type = "text/javascript";
b.id = "temporer-script";
b.src = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary" + a + "?alt=json-in-script&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&callback=showFeedList";
head.appendChild(b);
d.disabled = true;
orderByer.disabled = true;
window.location.hash = c
}
function searchPost() {
removeScript();
tocContainer.innerHTML = "";
resultDesc.innerHTML = "";
feedNav.innerHTML = tocConfig.searching;
var a = document.createElement("script");
a.type = "text/javascript";
a.id = "temporer-script";
a.src = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary?alt=json-in-script&orderby=published&q=" + input.value + "&max-results=9999&callback=showFeedList";
head.appendChild(a);
window.location.hash = "#search";
return false
}
getID("postSearcher").onsubmit = function() {
return searchPost()
};
orderByer.onchange = function() {
changeSort(0)
};
labelSorter.getElementsByTagName("select")[0].onchange = function() {
changeSort(this.value)
};
window.onload = function() {
initResult(0);
buildLabels();
window.location.hash = "#0"
};
</script>

Замените https://news-sawich.blogspot.com на адрес своего блога и опубликуйте сообщение.

Седьмой вариант - простая таблица

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

Для установки седьмого варианта, вставьте в HTML редактор статьи следующий код:

<div id="bp_toc">
</div>
<script src="https://dl.dropbox.com/s/tnrrbc5ak4zzoia/%D0%BA%D0%B0%D1%80%D1%82%D0%B0%20%D0%B1%D0%BB%D0%BE%D0%B3%D0%B0.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>

Опубликуйте сообщение.

После этого, откройте редактор шаблонов Blogger, найдите строку: ]]></b:skin>.

Выше нее вставьте код:

#bp_toc {background:#2b8a47;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;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:#aaa;font-family:'Open Sans';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 {background:#FFFFFF;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#0000FF;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#8B0000;}
#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;margin-right:0.5em;}
td.toc-entry-col2 {background:#FFFFFF;}

Сохраните изменения.

P.S. Все предложенные варианты карты блога для Blogger полностью рабочие. Но проблема в том, что они очень капризные и часто конфликтуют с ранее установленными виджетами, а в некоторых темах и с кодами самого шаблона. Поэтому, одни и те же карты в одних шаблонах могут работать безупречно, а в других темах не будут работать вообще.

Поиск по этому блогу

С миру по нитке

Карта блога для Blogger