Карта сайта для Blogger по ярлыкам 2018 - семь вариантов

Карта сайта, что это такое и для чего их нужно устанавливать на свой сайт - блог.

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

Что такое карта сайта?

Пользовательская карта сайта - это виджет в котором отображаются все сообщения вашего блога. Данный виджет должен располагаться на отдельной странице блога. При добавлении очередного сообщения, карта сайта автоматически обновляется, скажем так занося в свою картотеку новую информацию и напротив самых свежих постов стоит надпись NEW. Думаю многие из вас уже поняли, что эта карта предназначена для читателей блога. Напомню, что для поисковых роботов так же существует карта сайта (файлы sitemap), которая упрощает их передвижение по ресурсу. Цель, как первой так и второй сделать блог более удобным в использовании и сканировании.

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

Как Добавить карту сайта в блог на Blogger

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

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

Теперь давайте перейдем к установке, для этого нужно перейти в раздел Тема - Изменить HTML в редакторе находите код ]]></b:skin> перед которым нужно будет вставить следующий код:

/* CSS Full Sitemap */
#bp_toc {background:#4DB2EC;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:#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;}


Сохраняем шаблон и переходим в раздел Страницы - Создать Страницу в открывшемся редакторе переходим на вкладку HTML и вставляем следующий код:

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

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

Второй вариант - аккордеон
карта сайта аккордеон
Смотреть Демо
Данный вариант виджета отображает столбиком все ярлыки блога в алфавитном порядке. При нажатии на ярлык появляются последние сообщения из данной категории. В отличии от первого варианта, этот может показывать последние 150 сообщений по каждому ярлыку. Для установки создайте Страницу, перейдите на вкладку HTML, вставьте туда содержимое скачанного файла и опубликуйте страницу.

Третий вариант с  постраничной навигацией
Blogger html карта сайта с навигацией
Смотреть Демо
Здесь у нас так же появляется список ярлыков, но при нажатии по ярлыку колонка с постами появляется с правой стороны. Прелесть этой карты заключается в том, что она имеет свою навигацию. За раз может выводить до 150 сообщений. Так же показывает количество сообщений для каждого ярлыка. Способ установки такой же, как и во втором типе. Скачать файл с HTML кодом.

Четвертый вариант со спойлером и миниатюрами
html карта сайта со спойлером и миниатюрами
Смотреть Демо
Данный тип чем-то напоминает карту аккордеон, здесь категории так же раскрываются в низ, но в добавок к заголовку прикреплено изображение (миниатюра). Каждая категория может выкатывать до 150 сообщений. Установку чутка отличается и вообще сам виджет довольно капризный. Для установки скачайте файл. HTML код файла вставьте в разделе Тема - Изменить HTML в самом низу редактора перед закрывающим тегом </body>. После создайте новую Страницу, перейдите на вкладку HTML и пропишите там [sitemap] теперь можете опубликовать страницу.

Пятый вариант с миниатюрами и безлимитной прокруткой страниц
Карта сайта с миниатюрами и безлимитной прокруткой страниц
Демо
Наконец-то добрались к последнему виджету. Идем дальше, у пользователей есть следующие возможности при просмотре публикаций с ее помощью:

1) Сортировать выдаваемые посты (сообщения) по новым и обновленным. Обновленные - это ваши опубликованные посты в которых вы, что-то дописывали или убирали от того и обновленные.

2) Читатель вашего блога или сайта может выбрать определенную категорию постов.

3) Поиск поста вручную, введя в строку поиска его название.

4) Изначально карта выдает шесть постов, чтобы увидеть остальные нужно кликнуть по кнопке Load more. Когда посты заканчиваются вместо кнопки Load more появляется кнопка Top при нажатии которой осуществляется скроллинг страницы вверх.

Все эти функции вы можете прощупать на тестовом блоге.

Переходим к установке виджета Для установки вам нужно создать новую страницу, перейти на вкладку HTML и разместить там код - скачать. В скрипте найдите ссылку - http://dan-blog102.blogspot.com вместо нее вставьте ссылку своего блога.

Шестой вариант с картинками и нумерованной навигацией
Карта блога с картинками и нумерованной навигацией
Смотреть демо
Данный вариант чем-то похож на предыдущий, только вместо безлимитной навигации у него прикручена постраничная навигация. Одна страница вмещает 150 публикаций. Хотя видок у нее так себе, но довольно удобная штука, подойдет для крупных вебресурсов. Чтобы установить скачайте файл, создайте новую страницу, на вкладке HTML вставьте содержимое файла и опубликуйте страницу.

 Седьмой вариант - Динамическая карта блога 
Динамическая карта сайта
Демо
Весьма интересный способ внедрения карты сайта предложил вьетнамский программист. Его способ заключается в том, чтобы использовать один из динамических шаблонов blogger и знакомый всем тег Iframe. Для установки скачайте файл, создайте страницу, перейдите на вкладку HTML и вставьте код из файла. После найдите строку: <iframe src="https://dan-blog111.blogspot.com/view/flipcard"></iframe> вместо ссылки https://dan-blog111.blogspot.com вставьте ссылку своего блога. Так же можете поменять внешний вид сообщений, для этого нужно прописать в той же строке вместо flipcart одно из следующих значений: timeslide, classic, sidebar, magazine, mosaic или snapshot.





Поделиться в социальных сетях:
Facebook Twitter Google+ Vkontakte

Рекомендуем

8 Коммент.

Оставить комментарий
avatar
Иннушка
мая 04, 2018

Все замечательно,но где скачать файл на Динамическую карту блога (последнюю)?

Ответить
avatar
Марк Корвин
мая 05, 2018

Можете скачать по ссылке - https://drive.google.com/open?id=1Ia8-KL09VqENmfrW6YN_DviXJXWdUb0t

Ответить
avatar
Иннушка
июня 03, 2018

ООгромное спасибо!Только увидела Ваш ответ,скачала.

Ответить
avatar
RobotTv [Евгений Уляшев]
июля 24, 2018

Шесть вариантов получилось, один вариант не смог сделать - Четвертый вариант со спойлером и миниатюрами . Пишет тег < style > нужно закрыть . Тег закрыл так < / style > и сохранил, потом сохранил на на странице во вкладке HTML - [ sitemap ] . Но карта все ровно не отобразилась, отображается просто [sitemap] .

Ответить
avatar
Марк Корвин
июля 25, 2018

Вообще эти виджеты скажем так крайне чувствительны, то есть очень часто конфликтуют с кодами шаблонов, на одном работают, а на другом уже нет. 4 вариант самый капризный. Попробуйте добавить библиотеки jquery между открывающим и закрывающим тегом body. Скрипт: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>

Ответить
avatar
Вениамин Яковлев
августа 12, 2018

Спасибо за полезный пост. НО... некоторые варианты карт - как не для людей. Например "аккордион" - не мог автор кода ещё мельче шрифт сделать для названия постов? Глаза даже на компе сломаешь.
Вариант третий - очень объемный, грузится плоховато. Вариант пятый - вроде удобен (с поиском), но опять, неужели нельзя было ярлыки по алфавиту сделать, а не вразнобой? И грузится тоже - то грузится, то не грузится, капризно. Таблица - вроде рабочий, неплохой вариант, но в посте не очень понятно описано, куда код нужно вставлять - его нужно вставлять ВНУТРЬ между > < Без головы, по написанному - не догадаться.
На код динамики - вообще ссылку на скачивание автор поста не оставил. Это про последний вариант. Ещё не пробовал.

Ответить
avatar
Sergey Kobinsky
сентября 21, 2018

Спасибо....,отлично

Ответить
avatar
Ірина Топчій
октября 03, 2018

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

Ответить