Про Архив, Содержание и Карту сайта

Если с понятиями "архив" и "содержание" всё более-менее очевидно, то с "картой сайта" нет строгой определённости. Многие блогеры "картой" именуют отдельную страницу блога, на которой собрано всё содержание, т.е. полный перечень всех статей блога. В этом смысле, мне кажется, точнее было бы её назвать "содержание блога" или "архив статей". А "картой" именовать именно Sitemap. Но так уж сложилось, что "карта сайта" и "содержание"  - это практически одно и то же, поэтому я здесь их тоже не буду различать.
В этой статье объединены описания понятий "архив", "содержание" и "карта сайта", т.к. они по большому счёту служат характеристиками наполнения блога статьями и создаются для облегчения навигации по нему.

1. Гаджеты от Blogger

Чтобы ориентироваться в содержании блога Blogger предоставляет 2 гаджета:
а) Архив блога, в котором все записи блога отображаются в хронологическом порядке.
б) Ярлыки, в котором записи блога группируются по темам (или по рубрикам, ключевым словам, тегам и т.п., называйте как хотите).
Эти гаджеты легко настраиваются и помещаются чаще всего в сайдбар или подвал (футер) блога.

Гаджет "Архив блога" в сайдбаре.

Гаджет "Ярлыки" в сайдбаре блога

2. Статические страницы.

Но многие блогеры дополнительно (или вместо) этих гаджетов отводят под содержание отдельную страницу (или несколько страниц, типа: Содержание, Оглавление, Архив, Все статьи, Список статей, Карта блога и т.п.).
Страница "Содержание" - это по существу список ссылок на все записи, созданный по одному из трёх основных принципов: 1) неотсортированный список статей, 2) список, отсортированный по датам публикации, 3) список, отсортированный по темам (рубрикам) статей.
Такую страницу можно вести вручную, т.е. каждый раз после публикации новой статьи добавляя ссылку на неё на страницу Содержание.
Например, страница Архив в блоге "Учиться никогда не поздно".
Можно автоматизировать этот процесс, поместив на страницу "Содержание" (в HTML-редакторе) определённый код.
В этом блоге я делала две подобных страницы: "Архив" и "Содержание".
Коды для этих страниц позаимствовала у известного блогера Абу Фархана (Abu Farhan): архив и содержание.

Все статьи блога на отдельной странице "Архив"

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

3. Дополнительные виджеты.

а) Кроме того, мне понравился виджет "Оглавление" с прокруткой, код которого я позаимствовала в блоге "Blogodel - Blogger, Блогспот" в статье "Полоса прокрутки всего содержания блога для Блоггер, Блогспот".
Код я незначительно изменила под дизайн своего блога (добавила рамку и уменьшила высоту).

Код для виджета “Оглавление” с прокруткой:

<style>
   .layer {
    overflow-x:hidden;overflow-y:scroll; /* Добавляем полосы прокрутки */
    width: 810px; /* Ширина блока */
    height: 240px; /* Высота блока */
    padding: 0px 0 0 0px; /* Поля вокруг текста */
    border: solid 1px #2288bb; /* Параметры рамки */
    margin: 0px 165px 0 0px;
}
</style>
<div class='layer'>
<style>
#arch {
font-size: 0px;
}
#arch ul li {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
border-radius: 3px;
font-size: 75.75%;
color: #2A7700;
line-height: 1.93;
padding: 5px 55px;
border-radius: 3px;
list-style: none;
}
#arch ul a {
font-size: 14px;
}
</style>
<script src='http://bloggerndch.googlecode.com/files/tocbyarchivemin.js'>
</script>
<script src='http://exp13blog.blogspot.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc'>
</script>

Пояснения к коду:
height: 240px; - высота блока виджета 240 px (можно изменить)
border: solid 1px #2288bb; - рамка: сплошная, толщиной 1 px, синего цвета (можно изменить)
exp13blog.blogspot.com - адрес вашего блога

Этот виджет я поместила в подвал блога (в гаджет "HTML/JavaScript")

Виджет Оглавление с прокруткой в подвале блога

б) Все статьи блога можно также показать с помощью виджета "Последние статьи" BuzzBoot от FeedBurner (только в настройках указать: "все статьи"). Этот виджет можно поместить как в сайдбар, так и на статическую страницу. Подробнее см. в статье “Виджет последних сообщений блога с помощью сервиса BuzzBoost от FeedBurner “.

4. Другие варианты оформления страницы “Содержание” (по материалам зарубежных блогов)

а) Виджет карты сайта в виде плиток "Responsive Sitemap Widget for Blogger" взят из статьи "2 Awesome Sitemap Widgets for Blogger" с блога “All Blogger Tricks”

б) Страница "Содержание блога" в виде таблицы с вкладками.
Код и описание можно посмотреть тут: Tabbed Table of Contents for Blogger

в) Страница "Содержание блога" в виде таблицы с эффектом аккордеона.
Код и описание можно посмотреть тут: Table of contents and Accordion for Blogger

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

Поделиться в соц. сетях: