L'ajout de quelques éléments tels que des images, des documents ou des vidéos aux articles de blog est très utile, notamment pour illustrer vos propos et créer un contenu plus complet. Mais s'il y a trop d'images, cela influencera le temps de chargement de la page et prendra certainement beaucoup d'espace, ce qui peut gêner les lecteurs.
En créant un diaporama sur un article de blog, les médias insérés tels que les images et les fichiers auront un aspect plus net et participeront dans l'amélioration de l'expérience utilisateur sur votre blog.Si vous souhaitez plutôt installer un diaporama à la page d'accueil de votre blog, lisez ce tutoriel sur ce sujet.
Qu'est-ce qu'un diaporama ?
Un diaporama est un affichage de plusieurs images qui s'exécute automatiquement et les slides défileront à un intervalle de temps prédéfini. Je pense que vous rencontrez souvent des diaporamas sur de nombreux sites web qui les utilisent pour afficher le contenu de documents ou encore des images comme celles qui font partie d'une recette de cuisine.
Quand avons-nous besoin d'un diaporama sur un article de blog ?
Lorsque vous estimez que les images à inclure sont trop nombreuses et prennent beaucoup de place dans un article, pensez à les mettre sous forme de slideshow pour que la lecture de votre article soit plus agréable. Si vous ne le faites pas, votre article risque d'être trop long non pas à cause du contenu, mais à cause des images. Et c'est assez désagréable pour les lecteurs.
Ce diaporama serait parfait pour les tutoriels, les recettes ou les contenus qui doivent intégrer des documents. Mais en fin de compte, tout dépend du contenu que vous allez créer.
Comment créer un diaporama d'images à l'intérieur de votre article
- Veuillez entrer dans le tableau de bord de Blogger
- Accédez à l'article ou la page dans laquelle vous souhaitez insérer un diaporama.
- Changez le mode en HTML
- Copiez le script ci-dessous et collez-le dans la zone souhaitée.
<style>
.slide { height:200px; width:100%; padding:1em; margin:1em auto; display:table; }
.slide img { margin:0 1em 0 1em; width:400px; height:400px; }
#slideshow1, #slideshow2, #slideshow3, #slideshow4 {
background:transparent;
}
</style>
<script type=”text/javascript”>
function startSlides(start, end, delay) {
setTimeout(slideshow(start,start,end, delay), delay);
}
function slideshow(frame, start, end, delay) {
return (function() {
$(‘#slideshow’ + frame).fadeOut();
if (frame == end) { frame = start; } else { frame += 1; }
setTimeout(function(){$(‘#slideshow’ + frame ).fadeIn();}, 850);
setTimeout(slideshow(frame, start, end, delay), delay + 850);
})
}
// usage: startSlides(first frame, end frame, delay time);
startSlides(1, 4, 5000);
</script>
<div class=”slide”>
<div id=”slideshow1″> <img src=”URL Image 1“/> </div>
<div id=”slideshow2″ style=”display: none”> <img src=”URL Image 2“/> </div>
<div id=”slideshow3″ style=”display: none”> <img src=”URL Image 3“/> </div>
<div id=”slideshow4″ style=”display: none”> <img src=”URL Image 4“/> </div>
</div>
Modifier le code pour l'adapter à vos besoins
#slideshow1, #slideshow2, #slideshow3,…,….: veuillez ajuster le nombre d'images à insérer. Si vous souhaitez en ajouter d'autres, ajoutez #slideshow5.startSlides(1, 4, 5000): Le chiffre 1 correspond à l'affichage initial de la diapositive, à savoir la première image de la séquence. Le chiffre 4 indique la dernière diapositive, c'est-à-dire la quatrième image (si vous souhaitez insérer 3, 5 ou 10 images, il vous suffit de modifier le chiffre 4 en fonction du nombre d'images à insérer). 5000 est le temps nécessaire pour passer d'une diapositive à l'autre, 5000 indique 5 secondes.URL Image 1: Enfin, veuillez modifier l'URL de l'image avec le lien de l'image qui sera insérée.
La création de votre diaporama est maintenant terminée. Vous avez la possibilité de déplacer chaque diapositive à l'aide des effets FadeIn et FadeOut.
Il est très facile de créer un diaporama dans les articles Blogger. Si vous avez des questions sur les diaporamas de blog, n'hésitez pas à me contacter.