Още за Карта на сайта за Blogger

Здравейте приятели и читатели на този блог! Отварям още един път въпроса за карта на блога за Blogger. Предлагам ви вариант, в който във вид на таблица се посочват публикациите по дати и етикети. Скоро писах за значението на картата - Sitemap за блога, а също ви запознах с един вид от всичките предлагани нейни модели.
Приятели, тези два варианта не работят! 

И нека започнем.
ВАРИАНТ 1.
➤В настройките на блога влизаме в Шаблон, натискаме редакция на HTML код.

➤В рамката с кода на шаблона поставяме курсора и натискаме клавишите Ctrl+F.

➤Вдясно горе се появява прозорче за търсене, което вписваме ]]></b:skin> и натискаме Еnter.

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

➤Продължаваме, като пред ]]></b:skin> поставяме код 1:

/* 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;
}

➤Натискаме запазване на шаблона.

➤После преминаваме в настройките на блога в пункта Страници ➔ Създаване на страница. (Може да редактирате по-рано създадена страница за карта на блога или неговото съдържание, като избираме страница➔редактиране). В режима на редакция на HTML слагаме код 2:

<div id="bp_toc">
</div>
<script src='http://mybloggerlab.com/js/sitemap.js'  type="text/javascript"></script>
<script src="######/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

като заменяме ###### с адреса на нашия блог. Страницата запазваме (или актуализираме).
Тази карта изглежда така. Ако искаме да е в син цвят или друг, който да подхожда цветово на вашия блог, код 1 променете в участъка му

 .toc-header-col1,

 .toc-header-col2,

 .toc-header-col3

{ background:#9E9E9E;

като последния ред #9E9E9E отговаря за цвета.
Ето още един изглед на този вариант на картата на блога, която ви предлагам сега. Внасям и още едно уточнение, че тази карта ще работи без проблем в стандартен шаблон на blogspot. 

ВАРИАНТ 2. Кодът се влага само на статичната страница
Външният вид на тази карта прилича на ВАРИАНТ 1, но тук още отгоре на таблицата се изписват заглавията "Displaying all ... Posts" . Кодът се копира и слага на статичната страница в режим на HTML.

<style scoped="" type="text/css"> #bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;} span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';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:'Trebuchet MS';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:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;} #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:#fafafa;} #comments {display:none;} </style> <div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;"> </div> <script src='https://cdn.rawgit.com/BloggerSpice/Sitemap/master/sitemap.js' type='text/javascript'></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

Настройка на картата:

➤промяна на височината на картата - вместо 1200px поставете свое значение.

➤цвят на заглавието на таблицата – значението background:#008CDB (подберете цвета за вашия блог)

Е, пожелавам на всички нас тези два варианта на карта на блога за Blogger по дати на публикациите и етикети да работят дълго и качествено!

Успех! Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: