Как создать карту сайта на blogger

 Карта сайта для blogger

   Карта сайта Аккордеон - это очень важный элемент любого web ресурса, в первую очередь она важна для посетителей, которые перешли через поиск или по ссылке  для того чтобы получить информацию или скачать интересующий файл. Именно для того чтобы найти ту или иную информацию как можно быстрее поможет содержание. Пример карты сайта на этом блоге можно посмотреть по этой ссылке.

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

Как создать карту сайта для blogger

   Для начала нужно создать статическую страницу в блоггере:

 

 Далее нужно нажать по вкладке создать страницу:

Здесь понадобится вкладка HTML, сюда в дальнейшем будет вставлен заготовленный код.

 Пока нужно просто сохранить и опубликовать страницу:

   После того как сохранили страницу в панели управления нужно перейти в категорию дизайн и найти поперечный столбец:

 В гаджете страницы нужно нажать на изменить :

В открывшемся окошке Настроек "списка страниц" нужно выставить галочку, которую указал на скриншоте:

   На этом этапе нужно нажать на кнопку сохранить. Теперь остаётся только обновить главную страницу и нужная вкладка должна отобразиться:

 

 Страница будет пустая.

Создание гугл сайта

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

   После перехода по URL нужно нажать по кнопке Главное меню и выбрать классический интерфейс:

   Далее нужно кликнуть на кнопку оранжевого цвета "Создать" и повторно нажать по УРЛ (на изображении указано стрелкой и подчёркнуто линией):

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

   Очередной шаг требует создать страницу на гугл сайте, для этого нужно нажать на значок который выделен красным кружочком:  

1.Нужно задать название страницы гугл

2.Нажать на стрелочки и выбирать файловый менеджер
3.Последний пункт разместить под главной страницей.
Когда все три шага проделаны нужно кликнуть кнопку "создать":

   Страничка создана, теперь на ней нужно нажать по кнопке "Добавить файл"(показано синей стрелочкой), а далее поочерёдно добавить три файла, их можно будет скачать в самом низу статьи, также будет краткая инструкция.

Так будут выглядеть загруженные файлы:

    Теперь, через правую кнопку мыши нужно нажать по ссылке "Скачать", скопировать адреса ссылок на каждый файл и сократить(удалить) её до расширения, включая вопросительный знак:

1.  Так будет выглядеть моя первая, полностью скопированная ссылка аккордеон пак(accordion-pack.js):

https://sites.google.com/site/2fileblogger/home/2file/accordion-pack.js?attredirects=0&d=1

 Ту часть, которую отметил красным цветом нужно удалить.
И вот таким образом будет выглядеть уже нужный сокращенный URL:

https://sites.google.com/site/2fileblogger/home/2file/accordion-pack.js

 У каждого владельца сайта будут свои ссылки, но неизменны останутся расширения и названия - это то что отмечено жёлтым цветом.
2.  Второй полностью скопированный УРЛ с названием (acc-toc.css) выглядит так:

https://sites.google.com/site/2fileblogger/home/2file/acc-toc.css?attredirects=0&d=1

 После удаления окончания:

https://sites.google.com/site/2fileblogger/home/2file/acc-toc.css

3.  Третья последняя ссылка(daftarisiv2-pack.js), цельная выглядит так:

https://sites.google.com/site/2fileblogger/home/2file/daftarisiv2-pack.js?attredirects=0&d=1

 Укороченная:

https://sites.google.com/site/2fileblogger/home/2file/daftarisiv2-pack.js

    Берюзовым цветом выделено название сайта гугл, которое я писал, фиолетовым выделено цветом название страницы, куда загружены файлы.
   Сокращенные ссылки нужно будет скопировать и заменить в заготовленном скрипте на свои, а это исходный код скрипта который нужно будет немного подредактировать:

<link href="https://sites.google.com/site/2fileblogger/home/2file/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="https://sites.google.com/site/2fileblogger/home/2file/daftarisiv2-pack.js "></script>
<script src="https://1impopo.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">var accToc=true;</script>
<script src="https://sites.google.com/site/2fileblogger/home/2file/accordion-pack.js" type="text/javascript"></script>

Каждый ищет свою ссылку и заменяет её на свою, обращая внимание на название и расширение (в коде выделено фиолетовым цветом).
Жёлтым цветом выделена ещё одна, четвёртая по счёту ссылка  - это вымышленное название блога, Вы её удаляете и вставляете адрес своего блога.

Вставка и сохранение скрипта на странице блога

После того как код будет отредактирован, останется зайти в панель управления блогом: страницы>>>Карта блога>>>Изменить:

Опять выбрать вкладку HTML и вставить туда отредактированный скрипт с Вашими ссылками:

Ниже показана строка кода которая на изображении  подчёркнута красной линией, если её добавить перед всем скриптом, то карта сайта будет раздвижной в в виде с анимации:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Так будет выглядеть полный код для анимированной карты сайта:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link href="https://sites.google.com/site/2fileblogger/home/2file/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="https://sites.google.com/site/2fileblogger/home/2file/daftarisiv2-pack.js "></script>
<script src="https://limpopo.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">var accToc=true;</script>
<script src="https://sites.google.com/site/2fileblogger/home/2file/accordion-pack.js" type="text/javascript"></script>

Карта сайта без анимации:

<link href="https://sites.google.com/site/2fileblogger/home/2file/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="https://sites.google.com/site/2fileblogger/home/2file/daftarisiv2-pack.js "></script>
<script src="https://limpopo.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">var accToc=true;</script>
<script src="https://sites.google.com/site/2fileblogger/home/2file/accordion-pack.js" type="text/javascript"></script> 

   Ссылки будут у каждого свои. Для тех кому лень создавать сайт на платформе гугла есть другой вариант, можно просто заменить ссылку которая выделена в скрипте фиолетовым цветом на свою и карта сайта будет также работать.
Вид анимированной динамической карты сайта Аккордеон на blogger:

Так будет выглядеть неанимированная статическая карта сайта:

Видеоролик по данной статье:

 
Исходный код и файлы для загрузки на гугл сайт:  Скачать

Читать другие статьи на главной странице