Comment ajouter un plan de site HTML dans Blogger (4 nouveaux styles)
Publié: 2024-10-21Souhaitez-vous ajouter une page de plan de site HTML sur votre site Web Blogger. Eh bien, vous pouvez le faire en suivant cet article. Ici, je partagerai 4 nouveaux styles de plan de site HTML pour Blogger.
Mais avant cela, comprenons ce qu'est un plan de site HTML ?
Un plan de site HTML est une page Web qui fournit une liste de liens vers les pages ou sections les plus importantes d'un site Web, organisées de manière structurée. Il aide les visiteurs et les moteurs de recherche à trouver et à parcourir facilement le contenu du site.
Quand utiliser un plan de site HTML :
- Pour les sites Web avec des structures complexes ou de nombreuses pages.
- Si vous souhaitez améliorer l'expérience utilisateur en fournissant un moyen simple de trouver du contenu.
- À des fins de référencement , comme aide supplémentaire pour aider les moteurs de recherche à naviguer sur votre site Web.
En utilisant des plans de site HTML et XML, vous améliorez la convivialité de votre site pour les utilisateurs et garantissez une indexation appropriée par les moteurs de recherche.
Comment ajouter le plan du site HTML dans Blogger ?
Pour ajouter le plan du site HTML au site Web Blogger, vous devez vous connecter à votre tableau de bord Blogger et accéder à la section Pages.
Créez maintenant une nouvelle page et définissez le titre du plan du site HTML ou vous pouvez le conserver comme plan du site.
Vous devez maintenant copier n’importe quel style de plan de site HTML et le coller dans la section HTML de la page.
Vous devez maintenant remplacer l'URL de démonstration par l'URL de votre site Web et publier la page. Vous avez maintenant ajouté avec succès le plan du site HTML à votre site Web Blogger.
Style -01 (SItemap HTML simple)
<ul></ul>
<script type="text/javascript">
var numposts = 100 ; // Modifiez cette valeur si vous avez plus de 100 posts
fonction showrecentposts(json) {
var sitemap = document.getElementById("sitemap");
pour (var i = 0; i < json.feed.entry.length; i++) {
var entrée = json.feed.entry[i];
var posttitle = entrée.titre.$t;
var posturl;
pour (var k = 0; k <entry.link.length; k++) {
if (entry.link[k].rel == 'alternative') {
posturl = entrée.link[k].href;
casser;
}
}
var listItem = document.createElement("li");
listItem.innerHTML = `<a href="${posturl}">${posttitle}</a>`;
sitemap.appendChild(listItem);
}
}
var script = document.createElement("script");
script.src = " https://exemple.com /feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
document.body.appendChild(script);
</script>
<style>
#plan du site {
type de style de liste : aucun ;
remplissage : 0 ;
marge : 0 ;
marge : auto ;
couleur d'arrière-plan : #f8f9fa ;
rayon de bordure : 5 px ;
box-shadow : 0 2px 5px rgba(0, 0, 0, 0.1);
hauteur minimale : 800 px ;
transition : toutes les 0,3 s sont faciles ;
}
#sitemap li {
remplissage : 8px 15px ;
bordure inférieure : 1px solide #e0e0e0 ;
transition : arrière-plan 0,2 s, transformation 0,2 s ;
transition : arrière-plan 0,2 s ;
bordure gauche : 4px noir uni ;
marge inférieure : 4 px ;
}
#sitemap li:hover{
bordure gauche : 4 px, bleu uni ; transformer : traduireY(-2px);}
#sitemap li:dernier-enfant {
bordure inférieure : aucune ;
}
#plan du site a {
décoration de texte : aucune ;
couleur : noir ;
taille de police : 19 px ;
affichage : bloc ;
transition : couleur 0,2 s ;
}
#sitemap a:hover {
couleur : bleu ;
}
</style>Style -02 (SItemap HTML avec étiquettes)
<ul></ul>
<script type="text/javascript">
var numposts = 100 ; // Modifiez cette valeur si vous avez plus de 100 posts
fonction showrecentposts(json) {
var sitemap = document.getElementById("sitemap");
pour (var i = 0; i < json.feed.entry.length; i++) {
var entrée = json.feed.entry[i];
var posttitle = entrée.titre.$t;
var posturl;
// Extraire les étiquettes (si disponibles) et créer des liens
var postlabels = '';
si (entrée.catégorie) {
postlabels = entrée.category.map(cat => {
var label = cat.term;
var labelurl = `/search/label/${encodeURIComponent(label)}`;
return `<a href="${labelurl}" class="label-button">${label}</a>` ;
}).rejoindre(' ');
} autre {
postlabels = '<span class="no-label">Aucune étiquette</span>';
}
pour (var k = 0; k <entry.link.length; k++) {
if (entry.link[k].rel == 'alternative') {
posturl = entrée.link[k].href;
casser;
}
}
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(script);
</script>
<style>
#plan du site {
type de style de liste : aucun ;
remplissage : 0 ;
marge : 0 ;
marge : auto ;
couleur d'arrière-plan : #f8f9fa ;
rayon de bordure : 5 px ;
box-shadow : 0 2px 5px rgba(0, 0, 0, 0.1);
hauteur minimale : 800 px ;
transition : toutes les 0,3 s sont faciles ;
}
#sitemap li {
remplissage : 8px 15px ;
bordure inférieure : 1px solide #e0e0e0 ;
transition : arrière-plan 0,2 s, transformation 0,2 s ;
bordure gauche : 4px noir uni ;
marge inférieure : 4 px ;
}
#sitemap li:hover {
bordure gauche : 4 px, bleu uni ;
transformer: traduireY(-2px);
}
#sitemap li:dernier-enfant {
bordure inférieure : aucune ;
}
.post-article {
affichage : flexible ;
justifier-contenu : espace entre les deux ;
aligner les éléments : centre ;
}
.post-titre {
décoration de texte : aucune ;
couleur : noir ;
taille de police : 19 px ;
affichage : bloc ;
transition : couleur 0,2 s ;
}
.post-title: survoler {
couleur : bleu ;
}
.post-étiquettes {
affichage : flexible ;
écart : 5 px ;
}
.bouton-étiquette {
couleur d'arrière-plan : #48525c ;
couleur : #ffffff ;
remplissage : 0px 20px ;
rayon de bordure : 5 px ;
décoration de texte : aucune ;
taille de police : 14 px ;
hauteur de ligne : 25 px ;
transition : facilité de couleur d'arrière-plan de 0,2 s ;
}
.label-button: survoler {
couleur d'arrière-plan : #0056b3 ;
}
.no-label {
couleur : #555 ;
taille de police : 14 px ;
}
/* Réactif */
@media (largeur maximale : 768 px) {
.post-article {
direction flexible : colonne ;
aligner les éléments : flex-start ;
}
.post-étiquettes {
marge supérieure : 5 px ;
}
}
</style>Style -03 (SItemap HTML avec filtres déroulants)
<div class="filter-container">
<label for="labelFilter">Filtrer par étiquette : </label>
<select onchange="filterByLabel()">
<option value="all">Tous</option>
</sélectionner>
</div>
<ul></ul>
<script type="text/javascript">
var tous les messages = []; // Stocke tous les messages ici
var uniqueLabels = new Set(); // Pour stocker des étiquettes uniques
// Récupère et affiche les publications récentes
fonction showrecentposts(json) {
var sitemap = document.getElementById("sitemap");
allPosts = json.feed.entry; // Stocke tous les messages pour les filtrer
// Génère des étiquettes uniques pour le filtre
allPosts.forEach(fonction(entrée) {
si (entrée.catégorie) {
entrée.category.forEach(function(cat) {
uniqueLabels.add(cat.term);
});
}
});
// Remplit la liste déroulante du filtre avec des étiquettes
var labelFilter = document.getElementById("labelFilter");
uniqueLabels.forEach(fonction(étiquette) {
var option = document.createElement("option");
option.value = étiquette ;
option.textContent = étiquette ;
labelFilter.appendChild(option);
});
displayPosts(allPosts); // Afficher initialement tous les messages
}
// Fonction pour afficher les publications filtrées
fonction displayPosts(posts) {
var sitemap = document.getElementById("sitemap");
plan du site.innerHTML = ''; // Effacer les messages actuels
posts.forEach(fonction(entrée) {
var posttitle = entrée.titre.$t;
var posturl;
var postlabels = '';
si (entrée.catégorie) {
postlabels = entrée.category.map(cat => {
var label = cat.term;
var labelurl = `/search/label/${encodeURIComponent(label)}`;
return `<a href="${labelurl}" class="label-button">${label}</a>` ;
}).rejoindre(' ');
} autre {
postlabels = '<span class="no-label">Aucune étiquette</span>';
}
pour (var k = 0; k <entry.link.length; k++) {
if (entry.link[k].rel == 'alternative') {
posturl = entrée.link[k].href;
casser;
}
}
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);
});
}
// Fonction pour filtrer les publications par étiquette sélectionnée
fonction filtreByLabel() {
var selectedLabel = document.getElementById("labelFilter").value;
if (selectedLabel === "tous") {
displayPosts(allPosts); // Afficher tous les messages si "Tous" est sélectionné
} autre {
var filteredPosts = allPosts.filter(function(entry) {
return Entry.category && Entry.category.some(cat => cat.term === selectedLabel);
});
displayPosts(filteredPosts); // Afficher uniquement les publications filtrées
}
}
// Charge les publications récentes avec le script
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(script);
</script>
<style>
/* Style pour la liste déroulante des filtres */
.filter-conteneur {
marge : 20px 0 ;
alignement du texte : centre ;
}
#labelFilter {
remplissage : 5px 10px ;
taille de police : 16 px ;
}
/* Styles du plan du site et des éléments de publication */
#plan du site {
type de style de liste : aucun ;
remplissage : 0 ;
marge : 0 ;
marge : auto ;
couleur d'arrière-plan : #f8f9fa ;
rayon de bordure : 5 px ;
box-shadow : 0 2px 5px rgba(0, 0, 0, 0.1);
hauteur minimale : 800 px ;
transition : toutes les 0,3 s sont faciles ;
}
#sitemap li {
remplissage : 8px 15px ;
bordure inférieure : 1px solide #e0e0e0 ;
transition : arrière-plan 0,2 s, transformation 0,2 s ;
bordure gauche : 4px noir uni ;
marge inférieure : 4 px ;
}
#sitemap li:hover {
bordure gauche : 4 px, bleu uni ;
transformer: traduireY(-2px);
}
#sitemap li:dernier-enfant {
bordure inférieure : aucune ;
}
.post-article {
affichage : flexible ;
justifier-contenu : espace entre les deux ;
aligner les éléments : centre ;
}
.post-titre {
décoration de texte : aucune ;
couleur : noir ;
taille de police : 19 px ;
affichage : bloc ;
transition : couleur 0,2 s ;
}
.post-title: survoler {
couleur : bleu ;
}
.post-étiquettes {
affichage : flexible ;
écart : 5 px ;
}
.bouton-étiquette {
couleur d'arrière-plan : #48525c ;
couleur : #ffffff ;
remplissage : 0px 20px ;
rayon de bordure : 5 px ;
décoration de texte : aucune ;
taille de police : 14 px ;
hauteur de ligne : 25 px ;
transition : facilité de couleur d'arrière-plan de 0,2 s ;
}
.label-button: survoler {
couleur d'arrière-plan : #0056b3 ;
}
.no-label {
couleur : #555 ;
taille de police : 14 px ;
}
/* Réactif */
@media (largeur maximale : 768 px) {
.post-article {
direction flexible : colonne ;
aligner les éléments : flex-start ;
}
.post-étiquettes {
marge supérieure : 5 px ;
}
}
</style>Style -04 (SItemap HTML avec filtres en forme de pilule)
<div class="filter-container">
<button class="filter-button">Tous</button>
<!--Les boutons d'étiquette seront insérés dynamiquement ici-->
</div>
<ul></ul>
<script type="text/javascript">
var tous les messages = []; // Stocke tous les messages ici
var uniqueLabels = new Set(); // Pour stocker des étiquettes uniques
fonction showrecentposts(json) {
var sitemap = document.getElementById("sitemap");
allPosts = json.feed.entry; // Stocke tous les messages pour les filtrer
allPosts.forEach(fonction(entrée) {
si (entrée.catégorie) {
entrée.category.forEach(function(cat) {
uniqueLabels.add(cat.term);
});
}
});
var filterContainer = document.querySelector('.filter-container');
uniqueLabels.forEach(fonction(étiquette) {
var bouton = document.createElement("bouton");
bouton.className = "bouton-filtre" ;
bouton.textContent = étiquette ;
bouton.onclick = function() { filterByLabel(label); } ;
filterContainer.appendChild(bouton);
});
displayPosts(allPosts); // Afficher tous les messages initialement
}
fonction displayPosts(posts) {
var sitemap = document.getElementById("sitemap");
plan du site.innerHTML = ''; // Efface la liste du plan du site
posts.forEach(fonction(entrée) {
var posttitle = entrée.titre.$t;
var posturl;
var postlabels = '';
si (entrée.catégorie) {
postlabels = entrée.category.map(cat => {
var label = cat.term;
var labelurl = `/search/label/${encodeURIComponent(label)}`;
return `<a href="${labelurl}" class="label-button">${label}</a>` ;
}).rejoindre(' ');
} autre {
postlabels = '<span class="no-label">Aucune étiquette</span>';
}
pour (var k = 0; k <entry.link.length; k++) {
if (entry.link[k].rel == 'alternative') {
posturl = entrée.link[k].href;
casser;
}
}
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);
});
}
fonction filterByLabel(étiquette) {
if (étiquette === 'tout') {
displayPosts(allPosts);
} autre {
var filteredPosts = allPosts.filter(function(entry) {
return Entry.category && Entry.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(script);
</script>
<style>
/* Style du conteneur de filtre */
.filter-conteneur {
alignement du texte : centre ;
marge : 20px 0 ;
}
/* Boutons de filtre en forme de pilule */
.bouton-filtre {
couleur d'arrière-plan : #007bff ;
bordure : aucune ;
couleur : blanc ;
remplissage : 10px 20px ;
marge : 5px ;
rayon de bordure : 5 px ;
taille de police : 16 px ;
curseur : pointeur ;
transition : facilité de couleur d'arrière-plan de 0,3 s ;
}
.filter-bouton : survoler {
couleur d'arrière-plan : #0056b3 ;
}
/* Style pour le plan du site et les éléments de publication */
#plan du site {
type de style de liste : aucun ;
remplissage : 0 ;
marge : 0 ;
marge : auto ;
couleur d'arrière-plan : #f8f9fa ;
rayon de bordure : 5 px ;
box-shadow : 0 2px 5px rgba(0, 0, 0, 0.1);
hauteur minimale : 800 px ;
transition : toutes les 0,3 s sont faciles ;
}
#sitemap li {
remplissage : 8px 15px ;
bordure inférieure : 1px solide #e0e0e0 ;
transition : arrière-plan 0,2 s, transformation 0,2 s ;
bordure gauche : 4px noir uni ;
marge inférieure : 4 px ;
}
#sitemap li:hover {
bordure gauche : 4 px, bleu uni ;
transformer: traduireY(-2px);
}
#sitemap li:dernier-enfant {
bordure inférieure : aucune ;
}
.post-article {
affichage : flexible ;
justifier-contenu : espace entre les deux ;
aligner les éléments : centre ;
}
.post-titre {
décoration de texte : aucune ;
couleur : noir ;
taille de police : 19 px ;
affichage : bloc ;
transition : couleur 0,2 s ;
}
.post-title: survoler {
couleur : bleu ;
}
.post-étiquettes {
affichage : flexible ;
écart : 5 px ;
}
.bouton-étiquette {
couleur d'arrière-plan : #48525c ;
couleur : #ffffff ;
remplissage : 0px 20px ;
rayon de bordure : 5 px ;
décoration de texte : aucune ;
taille de police : 14 px ;
hauteur de ligne : 25 px ;
transition : facilité de couleur d'arrière-plan de 0,2 s ;
}
.label-button: survoler {
couleur d'arrière-plan : #0056b3 ;
}
.no-label {
couleur : #555 ;
taille de police : 14 px ;
}
/* Réactif */
@media (largeur maximale : 768 px) {
.post-article {
direction flexible : colonne ;
aligner les éléments : flex-start ;
}
.post-étiquettes {
marge supérieure : 5 px ;
}
}
</style>Vous pouvez utiliser n’importe quel code indiqué ci-dessus et assurez-vous de modifier l’URL du site Web sur le code. Pour que cela fonctionne sur votre site Web Blogger.
Si vous souhaitez plus de code de plan de site HTML pour Blogger, consultez notre ancien article de blog sur Techyleaf .
Si vous avez encore des doutes, n'hésitez pas à demander dans la section commentaires. Je serai heureux de vous aider à cet égard.