Карта сайта, что это такое и для чего их нужно устанавливать на свой сайт - блог.
Приветствую блоггеры, надеюсь настроение у вас хорошее, а если нет, тогда при помощи этой статьи попытаемся его приподнять. В сегодняшнем уроке я расскажу, что такое пользовательская карта сайта, для чего она нужна и как добавить ее в свой блог.
Простой вариант с таблицей на три столбика в которых отображается заголовок статьи, дата публикации и ее ярлык. Формируется из всех сообщений блога.
Теперь давайте перейдем к установке, для этого нужно перейти в раздел Тема - Изменить HTML в редакторе находите код ]]></b:skin> перед которым нужно будет вставить следующий код:
Приветствую блоггеры, надеюсь настроение у вас хорошее, а если нет, тогда при помощи этой статьи попытаемся его приподнять. В сегодняшнем уроке я расскажу, что такое пользовательская карта сайта, для чего она нужна и как добавить ее в свой блог.
Что такое карта сайта?
Пользовательская карта сайта - это виджет в котором отображаются все сообщения вашего блога. Данный виджет должен располагаться на отдельной странице блога. При добавлении очередного сообщения, карта сайта автоматически обновляется, скажем так занося в свою картотеку новую информацию и напротив самых свежих постов стоит надпись NEW. Думаю многие из вас уже поняли, что эта карта предназначена для читателей блога. Напомню, что для поисковых роботов так же существует карта сайта (файлы sitemap), которая упрощает их передвижение по ресурсу. Цель, как первой так и второй сделать блог более удобным в использовании и сканировании.
Влияние пользовательской карты сайта на продвижение блога.
Для
тех кого интересует вопрос о влиянии карты сайта на раскрутку блога и
его ранжирование в поисковых системах, могу ответить, что некое влияние
все же есть. Помним, что структура вебресурса должна быть удобной, чтобы
посетитель мог добраться к нужной статье в два, три клика. Но сделать
подобную структура очень сложно и многие вебмастера пренебрегают этим
seo правилом. Вот здесь то нам и пригодится пользовательская карта
сайта.Как Добавить карту сайта в блог на Blogger
Я решил немного обновить данный материал добавив сюда еще несколько похожих виджетов. А вы уже по ходу дела сможете определить, какой из них подходит вам больше всего.
Первый вариант - таблица
Демо Простой вариант с таблицей на три столбика в которых отображается заголовок статьи, дата публикации и ее ярлык. Формируется из всех сообщений блога.
Теперь давайте перейдем к установке, для этого нужно перейти в раздел Тема - Изменить 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&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
Публикуете страницу и смотрите, что вышло. Ну а дальше, чтобы нашу карту сайта было видно на всех страницах блога, можете создать для нее ячейку в вашем главном меню.
Второй вариант - аккордеон
Смотреть Демо Данный вариант виджета отображает столбиком все ярлыки блога в алфавитном порядке. При нажатии на ярлык появляются последние сообщения из данной категории. В отличии от первого варианта, этот может показывать последние 150 сообщений по каждому ярлыку. Для установки создайте Страницу, перейдите на вкладку HTML, вставьте туда содержимое скачанного файла и опубликуйте страницу.
Третий вариант с постраничной навигацией
Смотреть Демо Здесь у нас так же появляется список ярлыков, но при нажатии по ярлыку колонка с постами появляется с правой стороны. Прелесть этой карты заключается в том, что она имеет свою навигацию. За раз может выводить до 150 сообщений. Так же показывает количество сообщений для каждого ярлыка. Способ установки такой же, как и во втором типе. Скачать файл с 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.
22 Коммент.
Все замечательно,но где скачать файл на Динамическую карту блога (последнюю)?
ОтветитьМожете скачать по ссылке - https://drive.google.com/open?id=1Ia8-KL09VqENmfrW6YN_DviXJXWdUb0t
ОтветитьООгромное спасибо!Только увидела Ваш ответ,скачала.
ОтветитьШесть вариантов получилось, один вариант не смог сделать - Четвертый вариант со спойлером и миниатюрами . Пишет тег < style > нужно закрыть . Тег закрыл так < / style > и сохранил, потом сохранил на на странице во вкладке HTML - [ sitemap ] . Но карта все ровно не отобразилась, отображается просто [sitemap] .
ОтветитьВообще эти виджеты скажем так крайне чувствительны, то есть очень часто конфликтуют с кодами шаблонов, на одном работают, а на другом уже нет. 4 вариант самый капризный. Попробуйте добавить библиотеки jquery между открывающим и закрывающим тегом body. Скрипт: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>
ОтветитьСпасибо за полезный пост. НО... некоторые варианты карт - как не для людей. Например "аккордион" - не мог автор кода ещё мельче шрифт сделать для названия постов? Глаза даже на компе сломаешь.
ОтветитьВариант третий - очень объемный, грузится плоховато. Вариант пятый - вроде удобен (с поиском), но опять, неужели нельзя было ярлыки по алфавиту сделать, а не вразнобой? И грузится тоже - то грузится, то не грузится, капризно. Таблица - вроде рабочий, неплохой вариант, но в посте не очень понятно описано, куда код нужно вставлять - его нужно вставлять ВНУТРЬ между > < Без головы, по написанному - не догадаться.
На код динамики - вообще ссылку на скачивание автор поста не оставил. Это про последний вариант. Ещё не пробовал.
Спасибо....,отлично
ОтветитьБольшое спасибо, очень понравился последний вариант. Жалко, что нет возможности поменять язык и не видно кнопок, которые позволяют вернуться к общей карте, после просмотра отдельных публикаций.
ОтветитьВопрос по номеру 4.
ОтветитьВчера поставила - заработал, но только если добавить строку с аяксом, указанную в комментариях выше.
А сегодня почему-то с самого утра отказывается работать. В смысле названия тегов отображает, но одним некликабельным текстом и без пробелов. Связываю с тем, что утром поменяла теги во всех записях, сократила их количество, так как многие дублировали одни и те же сообщения.
Других скриптов в блог не ставила.
Код не исправляла (за исключением закрытия тега style).
ad-write.blogspot.com/p/blog-page_23.html
Четвертый вариант самый неадекватный) попробуйте переустановить, может из-за нижнего тире в ярлыках такое отображения.
ОтветитьАвтору респект и уважуха. Скачиваю пользуюсь, буду читать! Молодец! Спасибо!
ОтветитьПятый вариант самое-то. Спасибо автору статьи.
ОтветитьИз всех вариантов получилось установить только первый.
ОтветитьОх уж эти старые шаблоны...
ОтветитьЖаль Седьмой вариант не пашет когда-то года 4 назад когда для сайта только шаблон искал хотелось поставить динамический, но минусов нашел много - сейчас даже обрадовался когда увидел динамическую карту - да очень жаль уже и скрипт весь копировал кстати чет не нашел в настройках где можно Включить динамические представления?
Ответитьразобрался - не катит идея визуально хорошая, но совсем не практичная в качестве именно карты а динамические пару сайтов еще тестируются на отображение хлебных крошек и превьюшки видео в поиске гугла - кое что проясняется
ОтветитьЗдравствуйте! После перехода на новый 2020 blogger перестали видны картинки новых сообщений в карте сайта "с картинками и нумерованной навигацией". Не подскажете как исправить это?
ОтветитьПривет. Загружайте превью картинки в HTML редакторе.
Ответитьна компе работает, а в мобильном не работает вариант с айфрэйм src="/view/flipcard">пишет ошибка 404
ОтветитьОчень интересная информация, но у меня не сообщения, а страницы с темами. Кроме этого темы разбиты на 6 рубрик. Совсем не понятно, как действовать в таком случае. Заранее спасибо за ответ!
ОтветитьНикак не подействуете, у страниц нет таких свойств, как у сообщений поэтому их нельзя выводить в подобные плагины.
Ответитьспс! работает!
Ответить