Карта сайта для Blogger 2018

Почему я назвала статью Карта сайта для Blogger 2018? Потому что старые карты, вернее коды не работают. Я посмотрела свои Блоги и увидела чистые, пустые страницы. А это не есть хорошо. Исправляем ситуацию и пишем Карту сайта для Blogger новую.



Посмотреть эту карту сайта для Blogger вы можете у меня на странице Карта сайта

Преимущества карты сайта для Blogger 2018

Ну самое первое преимущество в том, что она рабочая. Это главное. А дальше -

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

Приступим к созданию карты сайта для Blogger

Для создания карты сайта для Blogger, нам нужна будет админ панель, новая страница на Blogger и код.

Идем в настройки html (Тема - настройки html)  и ищем через поиск слово  ]]></b:skin> Перед этим словом вставляем код

/* 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, удаляем все что там есть и вставляем следующий код:

<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>

Скопируйте код, вставьте в новую страницу в редакторе html и сохраните.

Ну вот и все )))  А вы думали сложнее? Жду комментариев у кого как получилось.