Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Ajouter un diaporama automatique des articles récents à Blogger

Depuis le temps que vous me demandez ce tutoriel, j'ai enfin pris mon courage à deux mains pour vous l'écrire !

Pourquoi tant d'attente ? Simplement parce que ce n'est pas si simple que ça. J'ai préparé le terrain en vous écrivant d'autres tutoriels dont nous allons nous servir ;)

Vous êtes prêts à ajouter un diaporama automatique de vos articles les plus récents à votre blog ? C'est parti pour les explications !

Sommaire

  1. Que fait ce gadget ?
  2. Faire une sauvegarde de son blog
  3. Pré-requis
    1. Code Jquery
    2. Autres codes
  4. Créer une nouvelle zone de gadget
  5. Ajouter les codes de personnalisation du diaporama
    1. Définir les éléments à afficher
    2. Le code qui génère les articles du diaporama
    3. Paramètres du diaporama
  6. Les codes CSS pour définir l'apparence du diaporama
    1. Contenant du diaporama
    2. Hauteur du diaporama
    3. Contenant du texte
    4. Le libellé
    5. Le titre de l'article
    6. La date
    7. L'extrait
    8. Le lien lire la suite
    9. Les liens de navigation
  7. Astuces
    1. Afficher les articles récents d'un libellé
    2. Mettre le diaporama à 100% de la largeur de la page
    3. Cacher le diaporama sur certaines pages du blog
    4. Afficher le diaporama sur mobile
    5. Créer un effet bouton pour les liens
    6. Remplacer le lien Lire la suite par une image
    7. Afficher le contenant du texte seulement au survol du diaporama avec la souris
    8. Changer l'opacité du fond du contenant
  8. Bonus
    1. Apparence 1
    2. Apparence 2
    3. Apparence 3

Que fait ce gadget ?


Ajouter un diaporama automatique des articles récents à Blogger

Ce gadget va afficher sous forme d'un diaporama, vos derniers articles publiés avec :
  • la première image de l'article
  • le titre
  • la date de publication
  • le 1er libellé
  • un lien Lire la suite
  • un extrait de l'article : les premières lignes de l'article
  • des liens de navigation

J'ai essayé de rendre ce "gadget" au maximum accessible et personnalisable pour vous. Vous pouvez choisir d'afficher les différents éléments de texte, ou non, changer les couleurs, les tailles, les textes des liens de navigation et lien lire la suite, et j'ai même préparé des bonus en fin d'article.

J'espère qu'il vous plaira car cela ma bien prit une bonne journée de travail finalement ! ^^

Faire une sauvegarde de son blog

Comme d'habitude faites une sauvegarde de votre thème avant d'y apporter une modification ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Ajouter un diaporama automatique des articles récents à Blogger

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Pré-requis

Pour que le diaporama fonctionne, il faut ajouter des lignes de code à votre thème.

Code Jquery

Attention, ce code est à ajouter seulement si vous ne le possédez pas. Pour savoir si vous possédez déjà le code, cliquez sur Modifier le code HTML pour accéder au code de votre thème :

Ajouter un diaporama automatique des articles récents à Blogger

Cliquez à l'intérieur de la boîte de code, puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac). Un champ de recherche doit apparaître en haut à droite de la boîte de code.

Si le champ apparaît en haut de la page, cliquez bien à l'intérieur de la boîte de code et recommencez.

Dans le champ de recherche collez :
jquery.js
Et appuyez sur Entrer. Si vous ne trouvez rien, cherchez :
jquery.min.js
Si vous trouvez l'un des 2 textes ci-dessus, alors c'est bon, vous pouvez passer à la prochaine étape du tutoriel ;)

Si vous ne trouvez rien, c'est que vous n'avez pas le code jquery.  Il faut donc l'ajouter en collant :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Avant la ligne suivante de votre thème :
</head>


Autres codes

Pour générer le diaporama nous allons utiliser un code gratuit : Owl Carousel. Collez les codes suivants :
<link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js'/>
Avant la ligne suivante de votre thème :
</head>
Comme ceci :

Ajouter un diaporama automatique des articles récents à Blogger

Maintenant, collez le code suivant qui va créer le contenu du diaporama à partir de votre flux d'articles :
<script type='text/javascript'>//<![CDATA[
function diaporecents(a){var b=a.feed.entry||[];var c=['<div class="owl-carousel">'];for(var i=0;i<b.length;++i){var d=b[i];var e=d.title.$t;var f=d.category[0].term;var g="/search/label/"+f;var h=d.media$thumbnail?d.media$thumbnail.url:'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';var k=h.replace(/\/s72\-c/,"/s"+960);var l=d.link||[];for(var j=0;j<l.length;++j){if(l[j].rel=='alternate')break}
var m=l[j].href;var n='<div class="img"><a href="'+m+'" title="'+e+'"><img src="'+k+'" /></a></div>';var o=diapo_Titre?'<h3 class="rptitle"><a href="'+m+'" title="'+e+'">'+e+'</a></h3>':'';var p=d.published.$t;var q=new Date(p);var r=["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];var s=q.getDate()+' '+r[q.getMonth()]+' '+q.getFullYear();var t=diapo_Date?'<div class="date">'+s+'</div>':'';var u=diapo_Libelle?'<div class="cat"><a href="'+g+'">'+f+'</a></div>':'';var v=d.summary.$t;var w=v.substring(0,diapo_Extrait_Longueur);var x=w.lastIndexOf(" ");var y=w.substring(0,x)+'...';var z=diapo_Extrait?'<div class="sum">'+y+'</div>':'';var A=diapo_LienPlus?'<div class="link"><a href="'+m+'">'+diapo_LirePlus_Texte+'</a></div>':'';var B='<div class="info">'+u+o+t+z+A+'</div>';var C=n+B;c.push('<div class="item">',C,'</div>')}
c.push('</div>');document.write(c.join(""))}
//]]></script>
Après la ligne commençant par :
<body
Comme ceci :

Ajouter un diaporama automatique des articles récents à Blogger

Cliquez sur Enregistrer le thème en haut de la page pour sauvegarder les changements.

Créer une nouvelle zone de gadget

Tout d'abord nous allons créer une nouvelle zone de gadgets, pour séparer le diaporama des zones de gadgets existantes.
Dans ce tutoriel nous allons ajouter la nouvelle zone de gadgets entre l'en-tête et le reste du blog, mais vous pouvez l'ajouter où bon vous semble ! Allez voir le tutoriel sur les zones de gadget pour trouver le code qu'il vous faut ;)

Cherchez la ligne :
<div class='main-outer'>
Attention, si vous voulez placer le diaporama à un autre endroit de votre blog, cherchez le code correspondant donné dans ce tutoriel !

Avant cette ligne collez :
<b:section id='diaporama' name='Diaporama' showaddelement='yes'></b:section>
Comme ceci :

Ajouter un diaporama automatique des articles récents à Blogger

Cliquez sur Enregistrer le thème en haut de la page, puis allez dans Mise en page :

Ajouter un diaporama automatique des articles récents à Blogger

Si vous ne voyez pas votre nouvelle zone de gadgets, rafraîchissez la page en appuyant sur F5 ou en cliquant sur le bouton pour actualiser la page de votre navigateur internet.

Vous devriez maintenant voir votre nouvelle zone de gadgets avec le nom que vous lui avez donné, qui n'attend plus que votre diaporama !

Ajouter un diaporama automatique des articles récents à Blogger


Ajouter les codes de personnalisation du diaporama

Par soucis de simplicité, nous allons coller les codes de personnalisation du diaporama dans un gadget HTML/JavaScript.

Cliquez sur Ajouter un gadget dans la nouvelle zone de gadgets :

Ajouter un diaporama automatique des articles récents à Blogger

Dans la liste de gadgets cliquez sur HTML/JavaScript :

Ajouter un diaporama automatique des articles récents à Blogger

N'ajoutez pas de titre à votre gadget si vous ne souhaitez pas en afficher.

Dans Contenu collez les codes que je vais vous décrire ci-dessous.

Définir les éléments à afficher

Collez dans un premier temps le code suivant dans Contenu :
<script>
// --
// Affichage des différents éléments du diaporama
// true = activé | false = désactivé
// --
var diapo_Libelle = true;// Libellés
var diapo_Titre = true; // Titre
var diapo_Date = true; // Date
var diapo_Extrait = true; // Extrait
var diapo_Extrait_Longueur = 300; // Longueur de l'extrait en caractères
var diapo_LienPlus = true; // Lien "Lire la suite"
var diapo_LirePlus_Texte = 'Lire la suite'; // Texte du lien "Lire la suite"
</script>
Ici vous trouverez les paramètres d'affichage des différemment éléments. Si vous souhaitez qu'un élément soit affiché, définissez la valeur true. Si vous souhaitez pas qu'un élément soit caché, changez true pour false.

Par exemple, si je souhaites afficher tous les éléments, mais enlever le libellé, je remplace :
var diapo_Libelle = true; // Libellés
Par :
var diapo_Libelle = false; // Libellés
Vous pouvez également changer la longueur de l'extrait de l'article qui correspond aux première lignes de l'article. Remplacez 300 de la ligne :
var diapo_Extrait_Longueur = 300; // Longueur de l'extrait en caractères
Par le nombre de caractères à afficher. Attention, cela ne coupera pas les mots, donc votre extrait peut varier autour des 300 caractères de long.

Vous pouvez changer le texte du lien Lire la suite par le terme de votre choix. Remplacez Lire la suite de la ligne :
var diapo_LirePlus_Texte = 'Lire la suite'; // Texte du lien "Lire la suite"
Par le texte de votre choix.

Le code qui génère les articles du diaporama

Juste après le code qui définit les éléments à afficher pour collez ceci :
<script src='http://votreblog.blogspot.fr/feeds/posts/summary?max-results=3&amp;alt=json-in-script&amp;callback=diaporecents'></script>
Ce code va aller chercher les articles de votre blog pour les ajouter au diaporama.

Remplacez http://votreblog.blogspot.fr par le nom de votre blog.

Vous pouvez modifier le nombre d'articles affichés dans le diaporama en changeant la valeur 3 de la partie max-results=3 par celle de votre choix. Pour afficher 5 articles remplacez 3 par 5 comme ceci :
max-results=5

Paramètres du diaporama

Après le code ci-dessus, collez maintenant le code suivant :
<script>
// --
// Paramètres du diaporama
// true = activé | false = désactivé
// valeurs de temps en milliseconds
// --
$(".owl-carousel").owlCarousel({
items: 1, // Nombre d'éléments affichés
loop: true, // Lecture en boucle
rewind: false, // Retour au début
margin: 0,
nav: true, // Flèches de navigation
navText: ['< prev','next >'], // Texte des liens de navigation
autoplay: true, // Lecture automatique
autoplayTimeout: 5500, // Délai de défilement
autoplayHoverPause: true, // Pause de la lecture au survol de la souris
smartSpeed: 1200 // Vitesse de défilement
})
</script>
Dans ce code vous trouverez les paramètres du diaporama :
  • lecture en boucle
  • retour au début
  • vitesse de défilement

Comme pour les paramètres des éléments à afficher, la valeur true correspond à un oui et la valeur false correspond à un non.
Si par exemple je souhaites que le diaporama s'arrête au dernier article et retournes au début, il faut désactiver le défilement en boucle et activer le retour au début. On écrit donc :
loop: false, // Lecture en boucle
rewind: true, // Retour au début
Vous pouvez changer le texte des liens de navigation en remplaçant les valeurs de la ligne :
navText: ['< prev','next >'], // Texte des liens de navigation
Si vous souhaitez n'afficher que des flèches, par exemple, remplacez les valeurs par < et > comme ceci :
navText: ['<','>'], // Texte des liens de navigation
Vous pouvez définir la vitesse de défilement des articles en modifiant la valeur de la ligne (en millisecondes) :
smartSpeed: 1200 // Vitesse de défilement
Et modifier le délai entre le défilement des articles en modifiant la valeur de la ligne (en millisecondes) :
autoplayTimeout: 5500, // Délai de défilement
Vous obtenez ceci :

Ajouter un diaporama automatique des articles récents à Blogger


Les codes CSS pour définir l'apparence du diaporama

Maintenant passons au plus intéressant : la personnalisation de la mise en page et de l'apparence du diaporama !

A la suite des codes de personnalisation ci-dessus, collez ceci :
<style type='text/css'>

</style>
C'est dans ce code que nous allons ajouter tous les codes CSS pour définir l'apparence de notre diaporama.

Commencez par coller les codes suivants qui vont simplement assurer une mis en page correcte du diaporama :
.owl-carousel {
    overflow: hidden;
    width: 100% !important;
    margin: 0;
}

.owl-item .item {
    position: relative;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
Avant la ligne :
</style>
Comme ceci :
<style type='text/css'>
.owl-carousel {
    overflow: hidden;
    width: 100% !important;
    margin: 0;
}

.owl-item .item {
    position: relative;
}

.owl-carousel .owl-item .img img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
</style>
Collez chaque code CSS expliqué ci-dessous avant la ligne </style>.
Chaque code CSS contient des commentaires (en orange) pour vous aider à modifier l'apparence du diaporama. Je ne vais pas expliquer tous les commentaires car certains sont explicites, et expliquer chaque commentaire prendrait beaucoup trop de temps ! ^^

Contenant du diaporama

Collez le code suivant :
/* -- Contenant du diaporama -- */

#diaporama {
    margin-top: 0;   /* Espace au-dessus de la zone de gadgets */
    margin-bottom: 0;   /* Espace en-dessous la zone de gadgets */
    margin-left: 0;   /* Espace à gauche de la zone de gadgets */
    margin-right: 0;   /* Espace à droite de la zone de gadgets */
}
Ce code va permettre de modifier l'espace au-dessus, en-dessous, à gauche et à droite de la nouvelle zone de gadgets que nous avons nommé diaporama.

Remplacez les valeurs 0 par une taille en pixels si vous souhaitez ajouter de l'espace autour de votre diaporama.

Hauteur du diaporama

Pour que le diaporama ait la même hauteur quelque soit le type d'image utilisé (paysage ou portrait) collez ce code qui va définir une hauteur à votre diaporama, à la suite du précédent.
/* --- Hauteur du diaporama --- */

.owl-carousel, .owl-item .img {
    height: 500px;   /* Hauteur du diaporama */
    position: relative;
}
Changez la valeur de 500px par celle qui vous plait.

Contenant du texte

Pour définir le contenant du texte qui contient le libellé, le titre, la date, etc., collez le code suivant à la suite du précédent :
/* --- Contenant du texte --- */

.owl-item .item .info {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;   /* Largeur de la zone de texte */
    padding: 40px 40px 40px 40px;   /* Espace entre les bords la zonde texte et son contenu, dans l'ordre : haut droite bas gauche */
    background: #ffffff;   /* Couleur de fond de la zone de texte */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
Vous pouvez modifier la largeur du contenant en changeant la valeur en pourcentage de la ligne :
width: 80%;   /* Largeur de la zone de texte */
Utiliser un pourcentage permet d'obtenir une largeur par rapport à la largeur du diaporama. En utilisant 100%, le contenant prendra 100% de la largeur du diaporama.

Vous pouvez modifier l'espace autour du texte, entre le texte et les bords de son contenant en changeant les valeurs de la ligne :
padding: 40px 40px 40px 40px;   /* Espace entre les bords la zone de texte et son contenu, dans l'ordre : haut droite bas gauche */
Les valeurs sont écrits dans l'ordre suivant : haut droite bas gauche.

Le libellé

Collez le code suivant à la suite du précédent.
Il y a 3 codes pour définir l'apparence du libellé :
  • un code pour l'alignement et l'espace autour du libellé
  • un code pour l'apparence du texte du libellé
  • un code pour l'apparence du libellé au survol par la souris (car c'est aussi un lien)

/* --- Libellé --- */

.owl-item .cat {
    text-align: center;  /* Alignement : left = à gauche | center = centré | right = à droite */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
}

.owl-item .cat a {
    font-family: 'Trébuchet', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 2px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
}

/* Apparence du lien du libellé au survol de la souris */
.owl-item .cat a:hover {
}
Comme pour le contenant du diaporama vous pouvez modifier l'espace autour du libellé avec les lignes :
margin-top: 0;   /* Espace au-dessus */
margin-bottom: 0;   /* Espace en-dessous */
Comme tout texte, vous pouvez modifier la police, sa taille, sa couleur, etc., avec les codes :
font-family: 'Trébuchet', sans-serif;  /* Police */
font-size: 11px;  /* Taille de la police */
color: #000000;  /* Couleur */
text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
letter-spacing: 2px;  /* Espace entre les caractères */
text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
Dans le code suivant :
/* Apparence du lien du libellé au survol de la souris */
.owl-item .cat a:hover {
}
Ajoutez les paramètres qui vont changer quand on survol le lien avec la souris. Par exemple si vous souhaitez changer la couleur du texte ajouter la nouvelle couleur ici, comme ceci :
/* Apparence du lien du libellé au survol de la souris */
.owl-item .cat a:hover {
    color: #e41627;
}

Le titre de l'article

Collez le code suivant à la suite du précédent.
Comme pour le libellé, il y a 3 codes pour définir l'apparence du titre car c'est également un lien.
/* --- Titre --- */

.owl-item h3.rptitle {
    text-align: center;  /* Alignement */
    margin-top: 10px;   /* Espace au-dessus */
    margin-bottom: 10px;   /* Espace en-dessous */
}

.owl-item h3.rptitle a {
    font-family: 'Trébuchet', sans-serif;  /* Police */
    font-size: 16px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 2px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
}

/* Apparence du lien du titre au survol de la souris */
.owl-item h3.rptitle a:hover {
}
Vous pouvez modifier l'apparence du titre de la même manière que le libellé, en suivant les commentaires en orange.

La date

Collez le code suivant à la suite du précédent.
La date n'étant pas un lien, il n'y a qu'un seul code :
/* --- Date --- */

.owl-item .date {
    text-align: center;  /* Alignement */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
    font-family: 'Trébuchet', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 2px;  /* Espace entre les caractères */
}
On retrouve les mêmes éléments que pour le libellé et le titre.

L'extrait

Collez le code suivant à la suite du précédent.
Comme la date, l'extrait n'étant pas un lien il n'y a qu'un seul code :
/* --- Extrait --- */

.owl-item .sum {
    text-align: left;  /* Alignement */
    margin-top: 20px;   /* Espace au-dessus */
    margin-bottom: 20px;   /* Espace en-dessous */
    font-family: 'Trébuchet', sans-serif;  /* Police */
    font-size: 12px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    line-height: 1.7;   /* Hauteur de ligne */
}
Modifiez le code en suivant les commentaires ;)

Le lien lire la suite

Collez le code suivant à la suite du précédent.
Comme pour le libellé et le titre, il y a 3 codes pour définir l'apparence du titre car c'est un lien.
/* --- Lien Lire la suite --- */

.owl-item .link {
    text-align: center;  /* Alignement */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
}

.owl-item .link a {
    font-family: 'Trébuchet', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 2px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
}

/* Apparence du lien du libellé au survol de la souris */
.owl-item .link a:hover {
}
On retrouve les mêmes éléments à personnaliser que pour le libellé et le titre ;)

Les liens de navigation

Collez le code suivant à la suite du précédent.
/* --- Liens de navigation --- */

.owl-prev, .owl-next {
    font-family: 'Trébuchet', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #ffffff;   /* Couleur */
    letter-spacing: 2px;  /* Espace entre les caractères */
    position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.owl-prev {
    left: 10px;   /* Distance du lien précédent par rapport au bord gauche du diaporama */
}

.owl-next {
    right: 10px;   /* Distance du lien suivant par rapport au bord droite du diaporama */
}
Les liens de navigation sont du texte, on peut donc définir une police, une taille de texte et une couleur comme pour du texte classique.

De plus, vous pouvez définir la distance par rapport aux bords du diaporama avec les codes :
.owl-prev {
    left: 10px;   /* Distance du lien précédent par rapport au bord gauche du diaporama */
}

.owl-next {
    right: 10px;   /* Distance du lien suivant par rapport au bord droite du diaporama */
}
Voilà pour l'essentiel. Visuellement on obtient :

Ajouter un diaporama automatique des articles récents à Blogger

A vous de jouer avec tous les paramètres comportant des commentaires pour obtenir le diaporama qui vous plait !

Maintenant, je vous vois déjà venir avec quelques questions. Alors j'ai préparé quelques astuces ci-dessous pour aller encore plus loin ;)
<

Astuces


Afficher les articles récents d'un libellé

Si vous souhaitez n'afficher que les articles récents d'un libellé, alors retrouvez cette ligne :
<script src='http://votreblog.blogspot.fr/feeds/posts/summary?max-results=3&amp;alt=json-in-script&amp;callback=diaporecents'>
Rajoutez /-/Libellé entre summary et ?max-results comme ceci :
<script src='http://votreblog.blogspot.fr/feeds/posts/summary/-/Libellé?max-results=3&amp;alt=json-in-script&amp;callback=diaporecents'>
Remplacez Libellé par le nom exacte de votre libellé : mêmes majuscules, accents et espaces !

Mettre le diaporama à 100% de la largeur de la page

Pour obtenir ce résultat il faut dans un premier temps déplacer le contenant de l'en-tête (et du menu si celui-ci doit se trouver avant le diaporama) en dehors du contenant du blog. Vous pouvez suivre ce tutoriel pour déplacer l'en-tête.

Ensuite, déplacez la zone de gadget du diaporama (coupez et collez-le) juste avant cette ligne :
<div class='content-outer'>
Si votre thème possède une marge autour de votre blog, alors ajoutez le code CSS suivant :
body {
padding: 0 !important;
}
Avant la ligne suivante des codes CSS de votre diaporama :
</style>

Cacher le diaporama sur certaines pages du blog

Pour cacher le diaporama sur certaines pages du blog il faut utiliser les codes conditionnels.

Utilisez le code conditionnel de votre choix (que vous pouvez trouver dans le tutoriel suivant) et ajoutez le code CSS suivant pour cacher le diaporama :
#diaporama {
  display: none;
}

Afficher le diaporama sur mobile

Pour afficher le diaporama sur mobile il faut activer le gadget HTML de votre diaporama sur mobile. En effet, les gadgets sont désactivés par défaut sur mobile.

Retrouvez le code de la zone de gadget contenant votre diaporama. Si vous l'avez bien nommé diaporama cherchez :
id='diaporama'
Juste en-dessous de la ligne contenant ce morceau de code vous trouverez la ligne suivante si votre le code de votre gadget est "fermé" :
<b:widget id='HTML3' locked='false' title='' type='HTML'>
Ou le code suivant si le code de votr gadget est "ouvert" :
<b:widget id='HTML3' locked='false' title='' type='HTML'>...</b:widget>
Cela n'a aucune incidence si votre gadget est ouvert ou fermé. Le nombre à droite du nom de votre gadget (HTML3) sera différent selon votre gadget.

Collez ceci :
mobile='yes'
Après le morceau de code suivant :
<b:widget
Comme ceci :
<b:widget mobile='yes' id='HTML3' locked='false' title='' type='HTML'>
Et voilà ;)

Créer un effet bouton pour les liens

Si vous souhaitez créer un effet de bouton pour les liens comme le libellé ou le lien lire la suite, rien de plus simple !
Ajoutez les lignes de code suivantes au code CSS de votre lien (celui qui comporte les paramètres de la police) :
padding: 5px 10px 5px 10px;   /* Espace autour du lien entre le bord et le texte, dans l'ordre : haut droite bas gauche */
background: #f1f1f1;   /* Couleur de fond */
Par exemple, pour créer un effet bouton sur le lien Lire la suite j'ajoute ces lignes avant le signe } du code qui contient les paramètres de la police de ce lien, comme ceci :
.owl-item .link a {
    font-family: 'Trébuchet', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 2px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
    padding: 5px 10px 5px 10px;   /* Espace autour du lien entre le bord et le texte, dans l'ordre : haut droite bas gauche */
    background: #c6e5d9;   /* Couleur de fond */
}
Visuellement on obtient :

Ajouter un diaporama automatique des articles récents à Blogger

Si vous voulez ajouter une bordure à votre "bouton" alors ajoutez dans le même code ceci :
border: 1px solid #c6e5d9;   /* Bordure, dans l'ordre : épaisseur style couleur */
Comme ceci par exemple :
.owl-item .link a {
    font-family: 'Trébuchet', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 2px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
    padding: 5px 10px 5px 10px;   /* Espace autour du lien entre le bord et le texte, dans l'ordre : haut droite bas gauche */
    background: #ffffff;   /* Couleur de fond */
    border: 1px solid #000000;   /* Bordure, dans l'ordre : épaisseur style couleur */
}
Ce qui donne :

Ajouter un diaporama automatique des articles récents à Blogger

Cette méthode marche avec n'importe quel lien ! ;)

Remplacer le lien Lire la suite par une image

Vous pouvez remplacer le lien Lire la suite par une image si vous le souhaitez. Il suffit de remplacer le texte du lien dans les paramètres du diaporama, par le code suivant :
<img alt="Lire la suite" src="Url-image.png"/>
Remplacez Url-image.png par l'adresse URL de votre image.
Vous pouvez créer une adresse URL pour votre image en suivant ces instructions ;)

Ensuite, ajoutez le code CSS suivant :
.owl-item .link img {
    width: initial !important;
    margin: 0 auto !important;   /* Alignement de l'image : 0 auto = centré | 0 auto 0 0 = à gauche | 0 auto 0 0 = à droite */
}
Avant la ligne suivante des codes CSS de votre diaporama :
/* --- Hauteur du diaporama --- */
Vous pouvez changer l'alignement de l'image et modifiant les valeur de la ligne suivante en suivant le commentaire en orange :
margin: 0 auto !important;   /* Alignement de l'image : 0 auto = centré | 0 auto 0 0 = à gauche | 0 auto 0 0 = à droite */
Ce qui donne :

Ajouter un diaporama automatique des articles récents à Blogger


Afficher le contenant du texte seulement au survol du diaporama avec la souris

Si vous voulez cacher le contenant du diaporama par défaut, et ne l'afficher que quand la souris passe sur l'image, alors ajoutez les codes CSS suivants à la suite des codes CSS de votre diaporama (avant la ligne </style>) :
/* Apparition en fondu du texte */
.owl-item .info {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.owl-item:hover .info {
    opacity: 1;
    visibility: visible;
}
Les lignes :
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
Servent à définir une apparition en "fondu". Vous pouvez modifier la valeur 0.4s pour celle qui vous plait. En augmentant cette valeur le texte mettra plus de temps à apparaître, le fondu sera plus lent.

Changer l'opacité du fond du contenant

Si vous souhaitez modifier l'opacité du fond du contenant pour pouvoir voir l'image en-dessous, remplacez le code couleur du fond du contenant par un code couleur rgba.

Pour trouver le code rgbas d'un couleur vous pouvez utiliser cet outil en ligne.
Entrez le code de votre couleur dans HEX value, et modifiez l'opacité qui se trouve sous le champ HEX. Cliquez sur le bouton HEX 2 RGB(A). Le code RGBA de votre couleur s'afficher à droite de ce bouton. Il ressemblera à ceci : rgba(241, 241, 241, 0.66)

Par exemple, je souhaites un fond transparent à 70% pour le cnotenant de mon texte. A la place de :
background: #ffffff;
J'écris :
background: rgba(255, 255, 255, 0.7);
Ce qui donne :

Ajouter un diaporama automatique des articles récents à Blogger

Et voilà ! N'hésitez pas à expérimenter avec tous les paramètres !

Je serai ravie de voir ce que vous avez fait de votre diaporama, laissez un petit commentaire si vous le souhaitez ;)


Bonus

Pour terminer, voici 3 apparences que j'ai créé pour vous.
N'oubliez surtout pas de modifier l'url de votre blog sinon ça ne fonctionnera pas  !! ;)

Apparence 1

Ajouter un diaporama automatique des articles récents à Blogger


Code

Dans cet exemple j'utilise les police suivantes : Quicksand 300, Montserrat 500, Lato 300. N'oubliez pas de les installer pour pouvoir les utiliser ;)

N'oubliez surtout pas de modifier l'url de votre blog sinon ça ne fonctionnera pas  !! ;)
<script>
// --
// Affichage des différents éléments du diaporama
// true = activé | false = désactivé
// --
var diapo_Libelle = false; // Libellés
var diapo_Titre = true; // Titre
var diapo_Date = true; // Date
var diapo_Extrait = false; // Extrait
var diapo_Extrait_Longueur = 300; // Longueur de l'extrait en caractères
var diapo_LienPlus = true; // Lien "Lire la suite"
var diapo_LirePlus_Texte = 'Lire la suite'; // Texte du lien "Lire la suite"
</script>

<script src='http://votreblog.blogspot.fr/feeds/posts/summary?max-results=3&amp;alt=json-in-script&amp;callback=diaporecents'></script>

<script>
// --
// Paramètres du diaporama
// true = activé | false = désactivé
// valeurs de temps en milliseconds
// --
$(".owl-carousel").owlCarousel({
items: 1, // Nombre d'éléments affichés
loop: true, // Lecture en boucle
rewind: false, // Retour au début
margin: 0,
nav: true, // Flèches de navigation
navText: ['<','>'], // Texte des flèches de navigation
autoplay: true, // Lecture automatique
autoplayTimeout: 5500, // Délai de défilement
autoplayHoverPause: true, // Pause de la lecture au survol de la souris
smartSpeed: 1200 // Vitesse de défilement
})
</script>

<style type='text/css'>
#diaporama {
    margin-top: 0;   /* Espace au-dessus de la zone de gadgets */
    margin-bottom: 0;   /* Espace en-dessous la zone de gadgets */
}

.owl-carousel {
    overflow: hidden;
    width: 100% !important;
    margin: 0;
}

.owl-item .item {
    position: relative;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.owl-item .link img {
    width: initial !important;
    margin: 0 auto !important;
}

/* --- Hauteur du diaporama --- */

.owl-carousel, .owl-item .img {
    height: 500px;   /* Hauteur du diaporama */
    position: relative;
}


/* --- Contenant du texte --- */

.owl-item .item .info {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;   /* Largeur de la zone de texte */
    padding: 40px 40px 40px 40px;   /* Espace entre les bords la zonde texte et son contenu, dans l'ordre : haut droite bas gauche */
    background: rgba(255, 255, 255, 0.8);   /* Couleur de fond de la zone de texte */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}


/* --- Libellé --- */

.owl-item .cat {
    text-align: center;  /* Alignement */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
}

.owl-item .cat a {
    font-family: 'Trébuchet', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 2px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
}

/* Apparence du lien du libellé au survol de la souris */
.owl-item .cat a:hover {
}


/* --- Titre --- */

.owl-item h3.rptitle {
    text-align: center;  /* Alignement */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 10px;   /* Espace en-dessous */
}

.owl-item h3.rptitle a {
    font-family: 'Montserrat', sans-serif;  /* Police */
    font-size: 24px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 3px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
}

/* Apparence du lien du titre au survol de la souris */
.owl-item h3.rptitle a:hover {
}



/* --- Date --- */

.owl-item .date {
    text-align: center;  /* Alignement */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
    font-family: 'Lato', sans-serif;  /* Police */
    font-size: 12px;  /* Taille de la police */
    font-style: italic;
    color: #000000;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 3px;  /* Espace entre les caractères */
}


/* --- Extrait --- */

.owl-item .sum {
    text-align: left;  /* Alignement */
    margin-top: 20px;   /* Espace au-dessus */
    margin-bottom: 20px;   /* Espace en-dessous */
    font-family: 'Trébuchet', sans-serif;  /* Police */
    font-size: 12px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    line-height: 1.7;   /* Hauteur de ligne */
}


/* --- Lien Lire la suite --- */

.owl-item .link {
    text-align: center;  /* Alignement */
    margin-top: 30px;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
}

.owl-item .link a {
    font-family: 'Montserrat', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #ffffff;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 3px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
    padding: 5px 15px 5px 15px;   /* Espace autour du lien entre le bord et le texte, dans l'ordre : haut droite bas gauche */
    background: #000000;   /* Couleur de fond */
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Apparence du lien du libellé au survol de la souris */
.owl-item .link a:hover {
    color: #000000;  /* Couleur */
    background: #ffffff;   /* Couleur de fond */
}


/* --- Liens de navigation --- */

.owl-prev, .owl-next {
    font-family: 'Quicksand', sans-serif;  /* Police */
    font-weight: 300;
    font-size: 52px;  /* Taille de la police */
    color: #ffffff;   /* Couleur */
    letter-spacing: 0;  /* Espace entre les caractères */
    position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.owl-prev {
    left: 20px;   /* Distance du lien précédent par rapport au bord gauche du diaporama */
}

.owl-next {
    right: 20px;   /* Distance du lien suivant par rapport au bord droite du diaporama */
}

</style>

Apparence 2

Ajouter un diaporama automatique des articles récents à Blogger


Code

Dans cet exemple j'utilise les police suivantes : Quicksand 300, Playfair Display, Lato 300. N'oubliez pas de les installer pour pouvoir les utiliser ;)

N'oubliez surtout pas de modifier l'url de votre blog sinon ça ne fonctionnera pas  !! ;)
<script>
// --
// Affichage des différents éléments du diaporama
// true = activé | false = désactivé
// --
var diapo_Libelle = true; // Libellés
var diapo_Titre = true; // Titre
var diapo_Date = true; // Date
var diapo_Extrait = true; // Extrait
var diapo_Extrait_Longueur = 200; // Longueur de l'extrait en caractères
var diapo_LienPlus = false; // Lien "Lire la suite"
var diapo_LirePlus_Texte = 'Lire la suite'; // Texte du lien "Lire la suite"
</script>

<script src='http://votreblog.blogspot.fr/feeds/posts/summary?max-results=3&amp;alt=json-in-script&amp;callback=diaporecents'></script>

<script>
// --
// Paramètres du diaporama
// true = activé | false = désactivé
// valeurs de temps en milliseconds
// --
$(".owl-carousel").owlCarousel({
items: 1, // Nombre d'éléments affichés
loop: true, // Lecture en boucle
rewind: false, // Retour au début
margin: 0,
nav: true, // Flèches de navigation
navText: ['<','>'], // Texte des flèches de navigation
autoplay: true, // Lecture automatique
autoplayTimeout: 5500, // Délai de défilement
autoplayHoverPause: true, // Pause de la lecture au survol de la souris
smartSpeed: 1200 // Vitesse de défilement
})
</script>

<style type='text/css'>
#diaporama {
    margin-top: 0;   /* Espace au-dessus de la zone de gadgets */
    margin-bottom: 0;   /* Espace en-dessous la zone de gadgets */
}

.owl-carousel {
    overflow: hidden;
    width: 100% !important;
    margin: 0;
}

.owl-item .item {
    position: relative;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.owl-item .link img {
    width: initial !important;
    margin: 0 auto !important;
}


/* --- Hauteur du diaporama --- */

.owl-carousel, .owl-item .img {
    height: 500px;   /* Hauteur du diaporama */
    position: relative;
}


/* --- Contenant du texte --- */

.owl-item .item .info {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;   /* Largeur de la zone de texte */
    padding: 40px 40px 40px 40px;   /* Espace entre les bords la zonde texte et son contenu, dans l'ordre : haut droite bas gauche */
    background: rgba(255, 255, 255, 0.8);   /* Couleur de fond de la zone de texte */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}


/* --- Libellé --- */

.owl-item .cat {
    text-align: center;  /* Alignement */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
}

.owl-item .cat a {
    font-family: 'Playfair Display', serif;  /* Police */
    font-size: 14px;  /* Taille de la police */
    font-style: italic;
    color: #000000;  /* Couleur */
    text-transform: lowercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 2px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
}

/* Apparence du lien du libellé au survol de la souris */
.owl-item .cat a:hover {
}


/* --- Titre --- */

.owl-item h3.rptitle {
    text-align: center;  /* Alignement */
    margin-top: 10px;   /* Espace au-dessus */
    margin-bottom: 10px;   /* Espace en-dessous */
}

.owl-item h3.rptitle a {
    font-family: 'Playfair Display', serif;  /* Police */
    font-size: 32px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 4px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
}

/* Apparence du lien du titre au survol de la souris */
.owl-item h3.rptitle a:hover {
}



/* --- Date --- */

.owl-item .date {
    text-align: center;  /* Alignement */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
    font-family: 'Playfair Display', serif;  /* Police */
    font-size: 14px;  /* Taille de la police */
    font-style: italic;
    color: #000000;  /* Couleur */
    text-transform: lowercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 2px;  /* Espace entre les caractères */
}


/* --- Extrait --- */

.owl-item .sum {
    text-align: justify;  /* Alignement */
    margin-top: 20px;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
    font-family: 'Lato', sans-serif;  /* Police */
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 12px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    line-height: 1.7;   /* Hauteur de ligne */
}


/* --- Lien Lire la suite --- */

.owl-item .link {
    text-align: center;  /* Alignement */
    margin-top: 30px;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
}

.owl-item .link a {
    font-family: 'Montserrat', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #ffffff;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 3px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
    padding: 5px 15px 5px 15px;   /* Espace autour du lien entre le bord et le texte, dans l'ordre : haut droite bas gauche */
    background: #000000;   /* Couleur de fond */
}

/* Apparence du lien du libellé au survol de la souris */
.owl-item .link a:hover {
}


/* --- Liens de navigation --- */

.owl-prev, .owl-next {
    font-family: 'Quicksand', sans-serif;  /* Police */
    font-weight: 300;
    font-size: 52px;  /* Taille de la police */
    color: #ffffff;   /* Couleur */
    letter-spacing: 0;  /* Espace entre les caractères */
    position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.owl-prev {
    left: 20px;   /* Distance du lien précédent par rapport au bord gauche du diaporama */
}

.owl-next {
    right: 20px;   /* Distance du lien suivant par rapport au bord droite du diaporama */
}

</style>

Apparence 3

Ajouter un diaporama automatique des articles récents à Blogger


Code

Dans cet exemple j'utilise les police suivantes : Quicksand 300, Playfair Display, Lato 300. N'oubliez pas de les installer pour pouvoir les utiliser ;)

N'oubliez surtout pas de modifier l'url de votre blog sinon ça ne fonctionnera pas  !! ;)
<script>
// --
// Affichage des différents éléments du diaporama
// true = activé | false = désactivé
// --
var diapo_Libelle = false; // Libellés
var diapo_Titre = true; // Titre
var diapo_Date = true; // Date
var diapo_Extrait = false; // Extrait
var diapo_Extrait_Longueur = 200; // Longueur de l'extrait en caractères
var diapo_LienPlus = false; // Lien "Lire la suite"
var diapo_LirePlus_Texte = 'Lire la suite'; // Texte du lien "Lire la suite"
</script>

<script src='http://votreblog.blogspot.fr/feeds/posts/summary?max-results=3&amp;alt=json-in-script&amp;callback=diaporecents'></script>

<script>
// --
// Paramètres du diaporama
// true = activé | false = désactivé
// valeurs de temps en milliseconds
// --
$(".owl-carousel").owlCarousel({
items: 1, // Nombre d'éléments affichés
loop: true, // Lecture en boucle
rewind: false, // Retour au début
margin: 0,
nav: true, // Flèches de navigation
navText: ['<','>'], // Texte des flèches de navigation
autoplay: true, // Lecture automatique
autoplayTimeout: 5500, // Délai de défilement
autoplayHoverPause: true, // Pause de la lecture au survol de la souris
smartSpeed: 1200 // Vitesse de défilement
})
</script>

<style type='text/css'>
#diaporama {
    margin-top: 0;   /* Espace au-dessus de la zone de gadgets */
    margin-bottom: 0;   /* Espace en-dessous la zone de gadgets */
}

.owl-carousel {
    overflow: hidden;
    width: 100% !important;
    margin: 0;
}

.owl-item .item {
    position: relative;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.owl-item .link img {
    width: initial !important;
    margin: 0 auto !important;
}

/* --- Hauteur du diaporama --- */

.owl-carousel, .owl-item .img {
    height: 500px;   /* Hauteur du diaporama */
    position: relative;
}


/* --- Contenant du texte --- */

.owl-item .item .info {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;   /* Largeur de la zone de texte */
    padding: 40px 40px 40px 40px;   /* Espace entre les bords la zonde texte et son contenu, dans l'ordre : haut droite bas gauche */
    background: rgba(0, 0, 0, 0.3);   /* Couleur de fond de la zone de texte */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}


/* --- Libellé --- */

.owl-item .cat {
    text-align: center;  /* Alignement */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
}

.owl-item .cat a {
    font-family: 'Playfair Display', serif;  /* Police */
    font-size: 14px;  /* Taille de la police */
    font-style: italic;
    color: #000000;  /* Couleur */
    text-transform: lowercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 2px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
}

/* Apparence du lien du libellé au survol de la souris */
.owl-item .cat a:hover {
}


/* --- Titre --- */

.owl-item h3.rptitle {
    text-align: center;  /* Alignement */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 20px;   /* Espace en-dessous */
}

.owl-item h3.rptitle a {
    font-family: 'Playfair Display', serif;  /* Police */
    font-size: 32px;  /* Taille de la police */
    color: #ffffff;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 4px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
}

/* Apparence du lien du titre au survol de la souris */
.owl-item h3.rptitle a:hover {
}



/* --- Date --- */

.owl-item .date {
    text-align: center;  /* Alignement */
    margin-top: 0;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
    font-family: 'Lato', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #ffffff;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 3px;  /* Espace entre les caractères */
}


/* --- Extrait --- */

.owl-item .sum {
    text-align: justify;  /* Alignement */
    margin-top: 20px;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
    font-family: 'Lato', sans-serif;  /* Police */
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: 12px;  /* Taille de la police */
    color: #000000;  /* Couleur */
    line-height: 1.7;   /* Hauteur de ligne */
}


/* --- Lien Lire la suite --- */

.owl-item .link {
    text-align: center;  /* Alignement */
    margin-top: 30px;   /* Espace au-dessus */
    margin-bottom: 0;   /* Espace en-dessous */
}

.owl-item .link a {
    font-family: 'Montserrat', sans-serif;  /* Police */
    font-size: 11px;  /* Taille de la police */
    color: #ffffff;  /* Couleur */
    text-transform: uppercase;  /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
    letter-spacing: 3px;  /* Espace entre les caractères */
    text-decoration: none;  /* Sous-lignement du lien désactivé : none = désactivé | underline = sous-ligné */
    padding: 5px 15px 5px 15px;   /* Espace autour du lien entre le bord et le texte, dans l'ordre : haut droite bas gauche */
    background: #000000;   /* Couleur de fond */
}

/* Apparence du lien du libellé au survol de la souris */
.owl-item .link a:hover {
}


/* --- Liens de navigation --- */

.owl-prev, .owl-next {
    font-family: 'Quicksand', sans-serif;  /* Police */
    font-weight: 300;
    font-size: 52px;  /* Taille de la police */
    color: #ffffff;   /* Couleur */
    letter-spacing: 0;  /* Espace entre les caractères */
    position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.owl-prev {
    left: 20px;   /* Distance du lien précédent par rapport au bord gauche du diaporama */
}

.owl-next {
    right: 20px;   /* Distance du lien suivant par rapport au bord droite du diaporama */
}

</style>

Autres articles

35 commentaires:

  1. Hou ! Je vais probablement me pencher là dessus , pour remplacer mon slider PowR ( qui a la faucheuse habitude d'afficher une grosse barre de pub en dessous du slider , chez ceux qui n'utilisent pas de bloqueur ) .

    Merci pour ce tuto !

    RépondreSupprimer
    Réponses
    1. Oui les gadgets viennent souvent avec de la pub, ça parasite, c'est assez moche, et ne s'accorde pas avec le blog.
      Là il n'y a pas de pub. Je pourrai en mettre mais c'est vraiment pas le but ^^
      Je veux simplement vous aider à avoir un blog qui vous plait :D

      Supprimer
  2. Un grand MERCI à toi pour tout le temps que tu consacres à la création de tutoriels pour nous aider à embellir nos sites. Cela faisait un sacré moment que je cherchais un moyen pour avoir un diaporama sur mon blog, c'est désormais chose faite grâce à toi :-) Alors MERCI du fond du cœur !

    RépondreSupprimer
    Réponses
    1. 😄 De rien ! Je suis contente de pouvoir aider !

      Supprimer
  3. Coucou Lady Bird !
    Merci pour tous tes conseils et astuces.
    Pour ma part, j'aimerai bien transformer ma page de blog en un diapo mais avec que des articles sélectionnés ! ( Je ne sais pas si je suis claire... ) Et donc, faire disparaître tous les articles récents. ( Le minimum est de 1, donc j'ai toujours un article, mais j'aimerai faire totalement disparaître ainsi que le " Articles plus ancien " )
    J'espère que tu sauras m'aider !
    Merci mille fois,
    Claire

    Mon blog : xoclaire.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Claire,
      Tu peux utiliser un nouveau libellé pour sélectionner les articles à afficher dans le diaporama. Par exemple, ajoutes le libellé En avant aux articles que tu souhaites afficher dans le diaporama. Ensuite, suit les instructions ici pour afficher les articles d'un libellé dans le diaporama, en remplaçant le libellé par le terme exacte de ton nouveau libellé (mêmes accents, majuscules, espaces, etc.).

      Tu peux ensuite cacher le contenant des articles et des liens de navigation avec ce code CSS :

      .widget.Blog {
      display: none;
      }

      Je suppose que tu souhaites faire ceci sur la page d'accueil seulement. Il faut donc utiliser le code conditionnel pour la page d'accueil et y ajouter le code CSS donné ci-dessus. Sinon, les articles seront cachés sur toutes les pages de ton blog ;)

      Supprimer
  4. Toujours au taquet, toujours pro et très bien expliqué, que dire de plus? Tu prends du temps pour tout nous servir sur un plateau en dehors de tes créations et c'est vraiment chouette. Un énorme merci, je te souhaite que de belles choses pour ton blog et ton entreprise ♥

    RépondreSupprimer
  5. On est d'accord qu'il faut bien mettre le code que tu nous donnes dans un widget HTML ? Parce que ça ne veux pas fonctionner moi :(

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien de ton blog pour voir d'où peut venir le problème ?
      Vérifies que tu as bien ajouté les codes pré-requis au bon endroit. Sans ces codes, le diaporama ne s'affichera même pas ;)

      Supprimer
    2. Bonjour,
      Il y avait une petite erreur dans le texte du tutoriel. A cette étape, vérifies bien que tu as collé le code qui génère le contenu du diaporama après et non avant la ligne qui commence par <body
      Si ça ne règle pas le problème, vérifies que tu as bien collé tous les codes pré-requis au bon endroit. Vérifies également que tu n'as pas 2 fois le code Jquery. Ce code est à ajouter seulement si tu ne le possèdes pas.

      Supprimer
  6. Super article comme d'habitude, merci beaucoup pour ce tutoriel !! ;)

    RépondreSupprimer
  7. Merci beaucoup pour ce tutoriel. Il est vraiment très très utile et très bien expliqué comme à chaque fois. Merci beaucoup !

    Concernant la largeur, je me pose une question. Les bords du diaporama ne collent pas à ceux de ma page principale dans le sens où à droite il a un léger décalade et idem à gauche. A gauche je l'ai corrigé en jouant sur le :
    .owl-carousel {
    overflow: hidden;
    width: 97.3% !important;
    margin: 0;
    }

    mais du coup l'intérieur n'est pas tout à fait centré. Le problème que je rencontre lorsque c'est à 100% est que j'ai une toute petite partie de la diapo suivante décalée sur le diapo en cours. Et je ne parviens à enlever l'image en réduisant la largeur.. Bon ce n'est pas très grave mais si jamais !

    Encore merci beaucoup pour ce tuto :)

    RépondreSupprimer
    Réponses
    1. Bonjour Cassandra,

      Peux-tu me donner le lien de ton blog pour que je puisses voir d'où peut venir le problème ?
      En attendant, laisses bien la largeur de ton code .owl-carousel à 100% car c'est ce qui cause le décalage de tes images.

      Par contre, tu peux ajouter une marge autour de ton contenant avec les codes CSS :

      #diaporama {
      margin-top: 0; /* Espace au-dessus de la zone de gadgets */
      margin-bottom: 0; /* Espace en-dessous la zone de gadgets */
      margin-left: 0; /* Espace à gauche de la zone de gadgets */
      margin-right: 0; /* Espace à droite de la zone de gadgets */
      }

      Ajoutes de l'espace à droite et à gauche du contenant avec les lignes :

      margin-left: 0; /* Espace à gauche de la zone de gadgets */
      margin-right: 0; /* Espace à droite de la zone de gadgets */

      Si cela ne fonctionne pas alors ajoutes ces lignes :

      padding-left: 0; /* Marge à gauche de la zone de gadgets */
      padding-right: 0; /* Marge à droite de la zone de gadgets */

      Avant le signe } de ce code comme ceci :

      #diaporama {
      margin-top: 0; /* Espace au-dessus de la zone de gadgets */
      margin-bottom: 0; /* Espace en-dessous la zone de gadgets */
      margin-left: 0; /* Espace à gauche de la zone de gadgets */
      margin-right: 0; /* Espace à droite de la zone de gadgets */
      padding-left: 0; /* Marge à gauche de la zone de gadgets */
      padding-right: 0; /* Marge à droite de la zone de gadgets */
      }

      Remplaces les valeurs de ces 2 lignes par un espace en pixels. Mets bien la même valeur à droite et à gauche pour que le diaporama soit centré. Par exemple, 20px à gauche et 20px à droite.

      Supprimer
    2. Merci beaucoup Catherine pour ta réponse et ton aide ! :)

      (Oui j'avais oublié de préciser le nom du blog, pardon ! c'est www.croquelesmots.fr mais je suis désormais mieux satisfaite du résultat. Merci beaucoup !)

      Supprimer
  8. Hello !! AH, super idée !! Par contre, j'ai l'impression de devenir folle.
    Impossible de trouver les codes qui devraient être dans la partie "autres codes". Et je ne peux même pas te citer les lignes manquantes car je ne suis pas autorisée à le faire en commentaire. Mais il me manque ce fameux "main outter" ...

    Comment est-ce possible ? ...

    RépondreSupprimer
    Réponses
    1. Bonjour Cha,
      Ton thème est un peu différent du code de base. Pour placer ton diaporama entre ton en-tête et le contenu de ton blog, colle-le avant cette ligne :

      <div id="content-wrapper">

      Supprimer
  9. Magnifique. Je vais me pencher sur ça dès que possible.
    Merci encore pour tes tutos.

    RépondreSupprimer
  10. encore de belles astuces - un grand merci car mon blog a pris une autre forme au fur et à mesure de tes données - amitiés Mamy Annick

    RépondreSupprimer
  11. Bonjour ! Merci pour cet article moi qui cherchais depuis longtemps de mettre un diapo !
    Par contre impossible de trouver :
    < d i v class='main-outer' >
    ET
    < b o d y expr:class='"loading" + data:blog.mobileClass'>

    Du coup çà ne marche pas car je ne sais pas du tout ou y mettre. Je te laisse mon blog si jamais ...
    http://alexandrarenoud.blogspot.fr

    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Alexandra,
      C'est à cause de ton thème que tu ne trouves pas les codes. Les codes des thèmes tiers sont différents.

      Pour ajouter le diaporama entre ton en-tête et le corps de ton blog ajoutes la nouvelle zone de gadgets avant la ligne :

      <div class="container sp_sidebar">

      Si tu ne souhaites pas que le diaporama prenne 100% de la largeur de ton blog, alors colles la nouvelle zone de gadgets avant la ligne :

      <div id="carousel">

      Pour coller le code qui génère le contenu du diaporama, cherches la ligne qui commence par :

      <body

      Colles le code après cette ligne ;)

      Supprimer
  12. Je n'ai pas encore lu l'article mais rien qu'en lisant l'intitulé de la news dans ma boite mail je voulais vous dire merciiiiiii!!! Depuis le temps que je voulais ajouter ça à mon blog!! C'est super, merci, merci et encore merci. Je vais regarder tout ça de plus près et prendre le temps de l'ajouter à mon blog. Merci encore pour tout le travail que vous partagez, c'est vraiment chouette!!!! Je suis en joie! ;-) Merci!

    RépondreSupprimer
  13. Coucou!
    Merci beaucoup pour ce tuto c'est génial :)
    Bon je n'est pas encore réussi à faire exactement ce que je veux mais je vais m'y remettre ce week-end :)
    Bises

    RépondreSupprimer
  14. Mercii beaucoup !! J'attendais justement ce tutoriel de ta part et il tombe au bon moment !! :D
    Pour ma part tout fonctionne super bien, mais j'ai toujours un problème avec ma barre de navigation qui est à droite du blog et un espace entre ma bannière et mon entête ... (J'avais posté un commentaire sur ton article "mettre le menu à 100% de la page", mais je ne sais pas si tu l'as vu ...). En tout cas si tu parvenais à trouver la solution tu m'enlèverais une sacré épine du pieds !

    Merci encore pou ces super tutos !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je t'avais répondu sur ton commentaire, mais tu peux l'ignorer car je viens de trouver le problème. Tu as une erreur dans ton code CSS : il manque un signe } dans un des codes qui supprime les espaces à gauche et à droite du menu. Tout ce qui suit un oubli de signe, ou un signe en trop n'est pas (ou mal) pris en compte. Retrouve ce code :

      .post-labels a:hover {
      color: #ffffff;
      background-color: #5882FA;
      text-decoration: none;
      header {
      background-color: #FFFFFF; /* Couleur de fond de l'en-tête */
      margin-top: -30px; /* Espace au-dessus de l'en-tête */
      }

      Il manque le signe } qui ferme le code .post-labels a:hover {
      Ajoute ce signe avant la ligne :

      header {

      Comme ceci :

      .post-labels a:hover {
      color: #ffffff;
      background-color: #5882FA;
      text-decoration: none;
      }
      header {
      background-color: #FFFFFF; /* Couleur de fond de l'en-tête */
      margin-top: -30px; /* Espace au-dessus de l'en-tête */
      }

      Supprimer
  15. Bonsoir Catherine
    Un grand merci pour ce tuto Catherine ! tu as fait un sacré travail de professionnel très interessant!
    Il n'y a plus qu'à le tester
    bye

    RépondreSupprimer
  16. Bonjour Catherine !
    Merci pour tout le temps et le travail que tu investis dans tes articles. Tes tutoriels m'ont énormément servi depuis que j'ai mon blog, j'ai pu faire en sorte qu'il me ressemble plus et c'est agréable d'y être arrivée par moi-même :).
    J'attendais d'ailleurs le diapo avec impatience, et j'ai trouvé ça hyper facile à intégrer !
    Je suis impatiente de voir ce que tu nous réserves encore.
    Bonne continuation et à bientôt ! :)

    RépondreSupprimer
  17. Super ! Merci beaucoup, j'attendais avec impatience de pouvoir faire ce type de widget un jour (je l'avais déjà fait en bidouillant un code mais il ne fonctionnait plus et surtout fallait mettre à jour si on voulait changer les articles, manuel quoi).
    Déjà en ligne sur mon blog :) (Qui a beaucoup de petites choses de chez vous !)

    RépondreSupprimer
  18. J'attendais cet article avec impatience ! Tout fonctionne parfaitement ! Merci !

    RépondreSupprimer
  19. Salut Catherine! Merci pour ce tutoriel qui j'attendais impatiemment, et pour tous les autres aussi!
    J'ai un soucis, le diaporama ne s'affiche pas. J'ai bien ajouté les codes jquery et Owl Carousel ainsi que celui qui commence par < script > … (il y a un soucis tu écris avant et sur la photo tu le colles après).
    J'ai donc essayer de laisser une marge assez importante en dessous du menu afin de voir si le diapo n'était pas caché par les articles mais non. J'utilise un code de la partie Bonus et j'ai bien mis mon nom de blog.
    Il est possible que j'ai mal compris le tutoriel, mais ce n'est pas le premier que je suis et j'ai réessayer à plusieurs reprises.
    L'adresse: http://colinesvibe.blogspot.fr
    Merci de ton aide!

    RépondreSupprimer
    Réponses
    1. Oh tu as raison j'ai fait une erreur dans le texte ! Il faut bien le coller après comme dans l'image ! Je vais tout de suite rectifier ça, merci !
      Colles bien le code après la ligne qui commence par <body
      Colle bien les autres codes pré-requis avant la ligne </head> même si tu as déjà le code Jquery.

      Supprimer
  20. Merci milles fois pour ce tutoriel ! Cependant je désespère, le diaporama ne veut pas s'afficher ... :(

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y avait une petite erreur dans le texte du tutoriel. A cette étape, vérifies bien que tu as collé le code qui génère le contenu du diaporama après et non avant la ligne qui commence par <body
      Si ça ne règle pas le problème, vérifies que tu as bien collé tous les codes pré-requis au bon endroit. Vérifies également que tu n'as pas 2 fois le code Jquery. Ce code est à ajouter seulement si tu ne le possèdes pas.

      Supprimer
  21. Coucou !!!! Super article depuis le temps que j'espèrais me plonger dans se genre de gadget !!!! Cependant je suis navrée en temps normal je tente de me débrouiller toute seule mais la je sèche complètement. J'utilise exclusivement dès photo en portrait et du coup sur le diapo sa rend vraiment mal on un zoom énorme sur l'image et je sais pas si y'a moyen de modifier cela ????
    Encore merci pour se titi et dsl d'être si mauvaise 😿 Des bisous 😻

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour éviter un décalage entre les images en paysage et en portrait, j'ai défini une hauteur pour le diaporama. Les images sont recadrés et centrés à l'intérieur du diaporama. Pour éviter que tes images soient coupés tu peux simplement augmenter la hauteur de ton diaporama pour lui donner une forme en portrait. Retrouves ce code CSS :

      /* --- Hauteur du diaporama --- */

      .owl-carousel, .owl-item .img {
      height: 500px; /* Hauteur du diaporama */
      position: relative;
      }

      Augmentes la valeur 500px pour la hauteur de ton choix ;)

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger