Как добавить HTML-карту сайта в Blogger (4 новых стиля)
Опубликовано: 2024-10-21Хотите добавить страницу HTML-карты сайта на свой веб-сайт Blogger? Что ж, вы можете сделать это, следуя этой статье. Здесь я поделюсь четырьмя новыми стилями HTML-карты сайта для Blogger.
Но перед этим давайте разберемся , что такое HTML-карта сайта?
Карта сайта HTML — это веб-страница, которая содержит список ссылок на наиболее важные страницы или разделы веб-сайта, организованные в структурированном виде. Это помогает посетителям и поисковым системам легко находить и перемещаться по контенту на сайте.
Когда использовать HTML-карту сайта:
- Для веб-сайтов со сложной структурой или множеством страниц.
- Если вы хотите улучшить взаимодействие с пользователем , предоставив простой способ поиска контента.
- В целях SEO , в качестве дополнительной помощи поисковым системам в навигации по вашему сайту.
Используя карты сайта HTML и XML, вы повышаете удобство использования вашего сайта для пользователей и обеспечиваете правильную индексацию поисковыми системами.
Как добавить HTML-карту сайта в Blogger?
Чтобы добавить HTML-карту сайта на веб-сайт Blogger, вам необходимо войти в свою панель управления Blogger и перейти в раздел «Страницы».
Теперь создайте новую страницу и установите заголовок HTML-карты сайта или сохраните ее как карту сайта.
Теперь вам нужно скопировать любой стиль карты сайта HTML и вставить его в раздел HTML страницы.
Теперь вам нужно заменить URL-адрес демонстрации на URL-адрес вашего веб-сайта и опубликовать страницу. Теперь вы успешно добавили карту сайта в формате HTML на свой веб-сайт Blogger.
Стиль -01 (обычная HTML-карта сайта)
<ул></ул>
<тип сценария="текст/javascript">
вар numposts = 100; // Измените это значение, если у вас более 100 сообщений
функция showrecentposts(json) {
var карта сайта = document.getElementById("карта сайта");
for (var i = 0; i <json.feed.entry.length; i++) {
запись var = json.feed.entry[i];
вар posttitle = запись.title.$t;
вар постурл;
for (var k = 0; k <entry.link.length; k++) {
if (entry.link[k].rel == 'альтернативный') {
posturl = вход.ссылка[к].href;
перерыв;
}
}
var listItem = document.createElement("li");
listItem.innerHTML = `<a href="${posturl}">${posttitle}</a>`;
sitemap.appendChild(listItem);
}
}
var script = document.createElement("script");
скрипт.src = " https://example.com /feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
document.body.appendChild(скрипт);
</скрипт>
<стиль>
#sitemap {
тип стиля списка: нет;
заполнение: 0;
маржа: 0;
маржа: авто;
цвет фона: #f8f9fa;
радиус границы: 5 пикселей;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
минимальная высота: 800 пикселей;
переход: все 0,3 секунды легкости;
}
#sitemap ли {
отступы: 8 пикселей 15 пикселей;
нижняя граница: 1 пиксель сплошной #e0e0e0;
переход: фон 0,2 с, преобразование 0,2 с;
переход: фон 0,2 с;
левая граница: 4 пикселя, сплошной черный;
поле внизу: 4 пикселя;
}
#sitemap li:hover{
левая граница: 4 пикселя, сплошной синий; преобразование: TranslateY(-2px);}
#sitemap li:last-child {
нижняя граница: нет;
}
#sitemap а {
текстовое оформление: нет;
цвет: Черный;
размер шрифта: 19 пикселей;
дисплей: блок;
переход: цвет 0,2 с;
}
#sitemap a:hover {
цвет: синий;
}
</стиль>Стиль -02 (HTML-карта сайта с метками)
<ул></ул>
<тип сценария="текст/javascript">
вар numposts = 100; // Измените это значение, если у вас более 100 сообщений
функция showrecentposts(json) {
var карта сайта = document.getElementById("карта сайта");
for (var i = 0; i <json.feed.entry.length; i++) {
запись var = json.feed.entry[i];
вар posttitle = запись.title.$t;
вар постурл;
// Извлекаем метки (если есть) и создаем ссылки
вар postlabels = '';
если (запись.категория) {
postlabels = enter.category.map(cat => {
вар метка = cat.term;
var labelurl = `/search/label/${encodeURIComponent(label)}`;
return `<a href="${labelurl}" class="label-button">${label</a>`;
}).присоединиться(' ');
} еще {
postlabels = '<span class="no-label">Нет метки</span>';
}
for (var k = 0; k <entry.link.length; k++) {
if (entry.link[k].rel == 'альтернативный') {
posturl = вход.ссылка[к].href;
перерыв;
}
}
var listItem = document.createElement("li");
listItem.innerHTML = `
<div class="post-item">
<a href="${posturl}" class="post-title">${posttitle</a>
<div class="post-labels">${postlabels</div>
</div>`;
sitemap.appendChild(listItem);
}
}
var script = document.createElement("script");
script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
document.body.appendChild(скрипт);
</скрипт>
<стиль>
#sitemap {
тип стиля списка: нет;
заполнение: 0;
маржа: 0;
маржа: авто;
цвет фона: #f8f9fa;
радиус границы: 5 пикселей;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
минимальная высота: 800 пикселей;
переход: все 0,3 секунды легкости;
}
#sitemap ли {
отступы: 8 пикселей 15 пикселей;
нижняя граница: 1 пиксель сплошной #e0e0e0;
переход: фон 0,2 с, преобразование 0,2 с;
левая граница: 4 пикселя, сплошной черный;
поле внизу: 4 пикселя;
}
#sitemap li:hover {
левая граница: 4 пикселя, сплошной синий;
преобразование: TranslateY (-2px);
}
#sitemap li:last-child {
нижняя граница: нет;
}
.post-item {
дисплей: гибкий;
оправдание-содержание: пространство между;
выровнять-элементы: по центру;
}
.post-title {
текстовое оформление: нет;
цвет: Черный;
размер шрифта: 19 пикселей;
дисплей: блок;
переход: цвет 0,2 с;
}
.post-title:hover {
цвет: синий;
}
.post-метки {
дисплей: гибкий;
разрыв: 5 пикселей;
}
.label-кнопка {
цвет фона: #48525c;
цвет: #ffffff;
отступ: 0 пикселей 20 пикселей;
радиус границы: 5 пикселей;
текстовое оформление: нет;
размер шрифта: 14 пикселей;
высота строки: 25 пикселей;
переход: фоновый цвет, легкость 0,2 с;
}
.label-button:hover {
цвет фона: #0056b3;
}
.no-label {
цвет: #555;
размер шрифта: 14 пикселей;
}
/* Адаптивный */
@media (максимальная ширина: 768 пикселей) {
.post-item {
гибкое направление: столбец;
выровнять-элементы: гибкий старт;
}
.post-метки {
поле сверху: 5 пикселей;
}
}
</стиль>Стиль -03 (HTML-карта сайта с раскрывающимися фильтрами)
<div class="фильтр-контейнер">
<label for="labelFilter">Фильтр по метке: </label>
<select onchange="filterByLabel()">
<option value="all">Все</option>
</выбрать>
</div>
<ул></ул>
<тип сценария="текст/javascript">
вар allPosts = []; // Сохраняем все сообщения здесь
вар uniqueLabels = новый Set (); // Для хранения уникальных меток
// Получение и отображение последних сообщений
функция showrecentposts(json) {
var карта сайта = document.getElementById("карта сайта");
allPosts = json.feed.entry; // Сохраняем все сообщения для фильтрации
// Генерируем уникальные метки для фильтра
allPosts.forEach(функция(запись) {
если (запись.категория) {
запись.категория.forEach(функция(кот) {
uniqueLabels.add(cat.term);
});
}
});
// Заполняем раскрывающийся список фильтров метками
var labelFilter = document.getElementById("labelFilter");
uniqueLabels.forEach(функция(метка) {
var option = document.createElement("опция");
option.value = метка;
option.textContent = метка;
labelFilter.appendChild (опция);
});
displayPosts (все сообщения); // Изначально отображаем все сообщения
}
// Функция для отображения отфильтрованных сообщений
функция displayPosts(сообщения) {
var карта сайта = document.getElementById("карта сайта");
sitemap.innerHTML = ''; // Очистить текущие сообщения
сообщения.forEach(функция(запись) {
вар posttitle = запись.title.$t;
вар постурл;
вар postlabels = '';
если (запись.категория) {
postlabels = enter.category.map(cat => {
вар метка = cat.term;
var labelurl = `/search/label/${encodeURIComponent(label)}`;
return `<a href="${labelurl}" class="label-button">${label</a>`;
}).присоединиться(' ');
} еще {
postlabels = '<span class="no-label">Нет метки</span>';
}
for (var k = 0; k <entry.link.length; k++) {
if (entry.link[k].rel == 'альтернативный') {
posturl = вход.ссылка[к].href;
перерыв;
}
}
var listItem = document.createElement("li");
listItem.innerHTML = `
<div class="post-item">
<a href="${posturl}" class="post-title">${posttitle</a>
<div class="post-labels">${postlabels</div>
</div>`;
sitemap.appendChild(listItem);
});
}
// Функция для фильтрации сообщений по выбранному ярлыку
функция filterByLabel() {
var selectedLabel = document.getElementById("labelFilter").value;
if (selectedLabel === "все") {
displayPosts (все сообщения); // Показать все сообщения, если выбрано «Все»
} еще {
var filteredPosts = allPosts.filter(function(entry) {
return enter.category && enter.category.some(cat => cat.term === selectedLabel);
});
displayPosts (filteredPosts); // Отображать только отфильтрованные сообщения
}
}
// Загрузка последних сообщений с помощью скрипта
var script = document.createElement("script");
script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
document.body.appendChild(скрипт);
</скрипт>
<стиль>
/* Стилизация раскрывающегося списка фильтров */
.фильтр-контейнер {
поле: 20 пикселей 0;
выравнивание текста: по центру;
}
#labelFilter {
отступы: 5 пикселей 10 пикселей;
размер шрифта: 16 пикселей;
}
/* Карта сайта и стили записей */
#sitemap {
тип стиля списка: нет;
заполнение: 0;
маржа: 0;
маржа: авто;
цвет фона: #f8f9fa;
радиус границы: 5 пикселей;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
минимальная высота: 800 пикселей;
переход: все 0,3 секунды легкости;
}
#sitemap ли {
отступы: 8 пикселей 15 пикселей;
нижняя граница: 1 пиксель сплошной #e0e0e0;
переход: фон 0,2 с, преобразование 0,2 с;
левая граница: 4 пикселя, сплошной черный;
поле внизу: 4 пикселя;
}
#sitemap li:hover {
левая граница: 4 пикселя, сплошной синий;
преобразование: TranslateY (-2px);
}
#sitemap li:last-child {
нижняя граница: нет;
}
.post-item {
дисплей: гибкий;
оправдание-содержание: пространство между;
выровнять-элементы: по центру;
}
.post-title {
текстовое оформление: нет;
цвет: Черный;
размер шрифта: 19 пикселей;
дисплей: блок;
переход: цвет 0,2 с;
}
.post-title:hover {
цвет: синий;
}
.post-метки {
дисплей: гибкий;
разрыв: 5 пикселей;
}
.label-кнопка {
цвет фона: #48525c;
цвет: #ffffff;
отступ: 0 пикселей 20 пикселей;
радиус границы: 5 пикселей;
текстовое оформление: нет;
размер шрифта: 14 пикселей;
высота строки: 25 пикселей;
переход: фоновый цвет, легкость 0,2 с;
}
.label-button:hover {
цвет фона: #0056b3;
}
.no-label {
цвет: #555;
размер шрифта: 14 пикселей;
}
/* Адаптивный */
@media (максимальная ширина: 768 пикселей) {
.post-item {
гибкое направление: столбец;
выровнять-элементы: гибкий старт;
}
.post-метки {
поле сверху: 5 пикселей;
}
}
</стиль>Стиль -04 (HTML-карта сайта с фильтрами в форме таблеток)
<div class="фильтр-контейнер">
<button class="filter-button">Все</button>
<!--Здесь будут динамически вставлены кнопки-метки-->
</div>
<ул></ул>
<тип сценария="текст/javascript">
вар allPosts = []; // Сохраняем все сообщения здесь
вар uniqueLabels = новый Set (); // Для хранения уникальных меток
функция showrecentposts(json) {
var карта сайта = document.getElementById("карта сайта");
allPosts = json.feed.entry; // Сохраняем все сообщения для фильтрации
allPosts.forEach(функция(запись) {
если (запись.категория) {
запись.категория.forEach(функция(кот) {
uniqueLabels.add(cat.term);
});
}
});
var filterContainer = document.querySelector('.filter-container');
uniqueLabels.forEach(функция(метка) {
var button = document.createElement("кнопка");
button.className = "кнопка-фильтр";
button.textContent = метка;
button.onclick = function() { filterByLabel(label); };
filterContainer.appendChild (кнопка);
});
displayPosts (все сообщения); // Изначально отображаем все сообщения
}
функция displayPosts(сообщения) {
var карта сайта = document.getElementById("карта сайта");
sitemap.innerHTML = ''; // Очищаем список карт сайта
сообщения.forEach(функция(запись) {
вар posttitle = запись.title.$t;
вар постурл;
вар postlabels = '';
если (запись.категория) {
postlabels = enter.category.map(cat => {
вар метка = cat.term;
var labelurl = `/search/label/${encodeURIComponent(label)}`;
return `<a href="${labelurl}" class="label-button">${label</a>`;
}).присоединиться(' ');
} еще {
postlabels = '<span class="no-label">Нет метки</span>';
}
for (var k = 0; k <entry.link.length; k++) {
if (entry.link[k].rel == 'альтернативный') {
posturl = вход.ссылка[к].href;
перерыв;
}
}
var listItem = document.createElement("li");
listItem.innerHTML = `
<div class="post-item">
<a href="${posturl}" class="post-title">${posttitle</a>
<div class="post-labels">${postlabels</div>
</div>`;
sitemap.appendChild(listItem);
});
}
функция filterByLabel(метка) {
if (метка === 'все') {
displayPosts (все сообщения);
} еще {
var filteredPosts = allPosts.filter(function(entry) {
return enter.category && enter.category.some(cat => cat.term === label);
});
displayPosts (filteredPosts);
}
}
var script = document.createElement("script");
script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
document.body.appendChild(скрипт);
</скрипт>
<стиль>
/* Стиль контейнера фильтра */
.фильтр-контейнер {
выравнивание текста: по центру;
поле: 20 пикселей 0;
}
/* Кнопки фильтра в форме таблеток */
.filter-button {
цвет фона: #007bff;
граница: нет;
цвет: белый;
отступ: 10 пикселей 20 пикселей;
поле: 5 пикселей;
радиус границы: 5 пикселей;
размер шрифта: 16 пикселей;
курсор: указатель;
переход: фоновый цвет — легкость 0,3 с;
}
.filter-button:hover {
цвет фона: #0056b3;
}
/* Стиль карты сайта и элементов сообщений */
#sitemap {
тип стиля списка: нет;
заполнение: 0;
маржа: 0;
маржа: авто;
цвет фона: #f8f9fa;
радиус границы: 5 пикселей;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
минимальная высота: 800 пикселей;
переход: все 0,3 секунды легкости;
}
#sitemap ли {
отступы: 8 пикселей 15 пикселей;
нижняя граница: 1 пиксель сплошной #e0e0e0;
переход: фон 0,2 с, преобразование 0,2 с;
левая граница: 4 пикселя, сплошной черный;
поле внизу: 4 пикселя;
}
#sitemap li:hover {
левая граница: 4 пикселя, сплошной синий;
трансформировать: TranslateY (-2px);
}
#sitemap li:last-child {
нижняя граница: нет;
}
.post-item {
дисплей: гибкий;
оправдание-содержание: пространство между;
выровнять-элементы: по центру;
}
.post-title {
текстовое оформление: нет;
цвет: Черный;
размер шрифта: 19 пикселей;
дисплей: блок;
переход: цвет 0,2 с;
}
.post-title:hover {
цвет: синий;
}
.post-метки {
дисплей: гибкий;
разрыв: 5 пикселей;
}
.label-кнопка {
цвет фона: #48525c;
цвет: #ffffff;
отступ: 0 пикселей 20 пикселей;
радиус границы: 5 пикселей;
текстовое оформление: нет;
размер шрифта: 14 пикселей;
высота строки: 25 пикселей;
переход: фоновый цвет, легкость 0,2 с;
}
.label-button:hover {
цвет фона: #0056b3;
}
.no-label {
цвет: #555;
размер шрифта: 14 пикселей;
}
/* Адаптивный */
@media (максимальная ширина: 768 пикселей) {
.post-item {
гибкое направление: столбец;
выровнять-элементы: гибкий старт;
}
.post-метки {
поле сверху: 5 пикселей;
}
}
</стиль>Вы можете использовать любой код, указанный выше, и обязательно измените URL-адрес веб-сайта в коде. Чтобы он работал на вашем веб-сайте Blogger.
Если вам нужен дополнительный HTML-код карты сайта для Blogger, прочтите нашу старую публикацию в блоге на Techyleaf .
Если у вас все еще есть какие-либо сомнения, не стесняйтесь спрашивать в разделе комментариев. Я буду рад помочь вам в этом.