Карта сайта (Sitemap) для блога Blogger — Видео

Здравствуйте, дорогие друзья! Настало время создать карту сайта/блога для вашего вебресурса на Blogspot. Практически каждый, кто завёл блог на blogger, задаётся вопросом, каким образом  можно сделать разделение статей по рубрикам и добавить оглавление. Есть простой способ - карта сайта (Sitemap) для блога Blogger - создаётся на новой странице при помощи небольшого кода. В этом нам поможет скрипт который нужно добавить на статическую страницу блога, он автоматически будет генерировать заголовки всех ваших постов. И так: как создать страницу в блоге со всем содержанием (карта блога), то есть, карту сайта для посетителей - Sitemap.

Карту сайта ещё можно назвать "Содержание блога"; "Все статьи", где ваш посетитель будет знакомится со всеми вашими опубликованными сообщениями. Выглядеть карта сайта Blogger будет вот так, красиво:

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

Все статьи Blogger на отдельной странице блога

Для того, чтобы установить такую красивую карту блога/все статьи для посетителей на ваш веб-ресурс, создайте новую статическую страницу (внизу есть видео, что да, как) и дайте ей название: "Содержание сайта" или "Все статьи блога", или просто Sitemap, а в меню потом, дадите любое название ей (если в меню вставляется ссылка на страницу). Затем, в режиме HTML вставьте этот код:

<style>
/* CSS Full Sitemap */
#bp_toc {background:#1B9A0C;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#F5F2F2;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:#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;}
</style>
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.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>
<style scoped="" type="text/css">
#comments {display:none;}
</style>

И можете её (страницу) сохранить и спокойно опубликовать, а затем, в комментариях написать, как она вам, понравилась или нет. В данном коде, между строчек <style> и </style> производятся оформление карты, размер шрифта и так далее. А вот, чтобы поменять английские слова на русский, вам придётся потрудиться/повозиться. Для этого, нужно скопировать скрипт по адресу https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js, отредактировать его, только конечно аккуратно (несколько слов заменить на русский), а далее, загрузить его на свой хостинг (например, сайты Google) и в коде вставить ссылку на отредактированный скрипт. Для наглядности смотрим видео - урок.

Как создать карту сайта в Blogger - Видео

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