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 !
Mise à jour ! Ajout d'une partie pour vous aider à régler des problèmes de fonctionnalité : Help ! Le diaporama ne marche pas !

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. Help ! Le diaporama ne marche pas !
  9. 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, vérifiez la version que vous possédez et sa position :
  • Vous devriez trouver des chiffres dans le code Jquery. Si les chiffres commencent par 1 ou 2, supprimez votre ligne de code, nous allons ajouter une version plus récente et à jour
  • Si votre code Jquery ne se trouve pas avant la ligne </head>, supprimez-le, il ne se trouve pas au bon endroit, nous allons l'ajouter au bon endroit

Si vous ne trouvez rien, c'est que vous n'avez pas le code jquery, il faut donc l'ajouter.

Collez le code Jquery suivant :
<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 ;)

Help ! Le diaporama ne marche pas !

Les erreurs d'inattention et les fautes de frappe arrivent à tout le monde ;)
Si en suivant à la lettre toutes les explications votre diaporama ne fonctionne pas, alors vérifiez bien les points suivants :
  1. Que vous avez bien collé tous les codes pré-requis au bon endroit
  2. Que vous n'avez pas 2 fois le code Jquery. Ce code est à ajouter seulement si vous ne le possédez pas. Si vous en avez plusieurs gardez-en 1 seul et vérifiez qu'il se trouve bien avant </head>
  3. Que vous avez bien changé l'adresse url pour celle de votre blog à cette étape, et qu'il n'y a pas d'erreur dans votre url (www en trop ou manquant, https en trop ou manquant, un signe / en trop ou manquant, etc.)
  4. Que tous les articles qui doivent s'afficher dans votre diaporama contiennent bien tous les éléments que vous souhaitez afficher (titre, image, libellé, texte pour l'extrait, etc.)
  5. Que votre blog est en mode public. Le diaporama va chercher les articles du flux de votre blog. Il n'est accessible que si votre blog est public.
  6. Que vous avez bien activé le flux d'articles RSS pour ton blog. Allez dans Paramètres > Autre. Sous Flux de site à la ligne Autoriser les flux de blog vérifiez que vous avez bien Complet. Sinon changez ce paramètre et sauvegardez

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

223 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. http://lequotidiendunenantaise.com
      Je trouve pas les codes qu'il faut avant même d'insérer ceux que tu donnes dans l'article !

      Supprimer
    3. 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
    4. Bonjour,
      Si tu as installé un thème tiers sur Blogger, c'est normal que tu ne trouves pas les mêmes codes. Pour les pré-requis cherches ceci :

      <body

      Au lieu du code qui était inscrit.

      Pour le code qu'il faut chercher pour ajouter la nouvelle zone de gadgets, cela va dépendre de ton thème car sont code est différent des thèmes Blogger de base.
      Où souhaites-tu l'ajouter ?

      Supprimer
    5. Bonjour Cathérine, je suis dans le même cas, j'ai un template gratuit et je ne retrouve pas le code class='main-outer'> du coup je me demandais comment faire pour le retrouver. J'ai quand même copier l'apparence n°3 dans un gadget html, mais rien ne s'affiche, je souhaiterais insérer le diapo juste avant ma bannière.
      Merci infiniment pour tes tutos et tout le boulot dérriere,tu n'imagine même pas à quel point tu nous sauve la vie, nous les nuls en informatique
      mon blog: www.leschroniquesdesapitou.com

      Supprimer
    6. Bonjour Sapitou,
      C'est vraiment bizarre :/
      Essayes de supprimer ton code Jquery (un peu vieux et au mauvais endroit) :

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

      Et rajoutes la nouvelle version du tutoriel avant la ligne :

      </head>

      Supprimer
    7. Bonjour Sapitou et Le quotidien d'une Nantaise,
      Pour le diaporama, vérifiez que vous n'avez pas oublié d'ajouter le www à l'adresse url de votre bog dans le code qui génère les articles. Je fais suite à un autre commentaire d'une personne qui avait également un nom de domaine qui commence par www et qui avait oublié le www. Son code marchait correctement mais n'affichait rien à cause de cet oubli.

      Retrouvez cette ligne dans votre gadget diaporama :

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

      Remplacez http://votreblog.blogspot.fr/ par l'adresse url de votre blog avec le www ;)

      Supprimer
    8. Pareil pour moi rien à faire il n’apparaît pas :(
      http://meolan.blogspot.fr

      Supprimer
    9. Bonjour Vanessa,
      Je ne vois pas les codes à placer dans ton thème qui génèrent le diaporama dans ton code :/
      Les as-tu bien ajouté ?
      De plus, la nouvelle zone de gadgets est vide. As-tu bien ajouté le gadget avec les codes qu'il doit contenir ?

      Supprimer
    10. J'avais supprimé la je viens de réésayer et ça ne fonctionne toujours pas! je ne comprends pas d'ou viens mon erreur

      Supprimer
    11. Bonjour Vanessa,
      Effectivement, même en testant sur mon blog test je n'arrive pas à afficher ton flux d'articles. As-tu déjà utilisé le gadget Suivre les mises à jour par e-mail ? Si non, ajoutes-le à ton blog en sauvegardant. Puis supprimes-le.
      Ensuite vérifies tes paramètres. Vas dans Paramètres > Autre. A Flux de site, à la ligne
      Autoriser les flux de blog vérifie que tu as Complet. Si ce n'est pas le cas, change ce paramètres pour complet et sauvegardes.

      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
    2. Super, merci mille fois pour ton aide !!! :D
      Désolée, je n'avais pas vu que tu m'avais répondu sur l'autre article (honte à moi), mais encore un grand merci pour ta patience et l'aide que tu apportes aux novices en html !

      Ton blog est vraiment une mine d'or, j'ai hâte de voir ton prochain tutoriel ;)
      Bye !

      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. Bonjour,
    Je voulais savoir quel code il faut mettre pour mettre des articles sélectionnés au hasard pour un libellé dans le diapo (et non pas que les articles les plus récents du libellé) ?
    Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour Ed,
      Malheureusement avec ce code ce n'est pas possible. Désolée :/

      Supprimer
    2. C'est pas grave, merci quand même :)
      Sinon, j'ai un problème avec les photos de mes articles : je les centre à chaque fois mais elles n'apparaissent jamais centrées, elles sont toujours collées à gauche ... Qu'est-ce que je peux faire pour y remédier ?

      Supprimer
    3. Bonjour Ed,
      Actuellement tes articles sont décalés sur la droite. Il y a un espace à gauche de tes articles correspondant à une barre latérale à gauche. Du coup cela laisse un vide.
      Si tu souhaites supprimer cet espace, il faut supprimer la barre latérale de gauche dans les paramètres de ton thème. Vas dans Thème > Personnaliser. Cliques sur Mise en page dans la liste de liens à gauche de l'écran, et sélectionnes la mise en page sans barre latérale à gauche.
      Si tu souhaites que la zone de tes articles soit centrée par rapport au contenant du blog, alors il faut supprimer les 2 barres latérales. C'est le seul moyen.

      Supprimer
    4. Merci, mais c'est pour centrer les photos dans les articles ou centrer les articles par rapport au blog ? Je n'ai pas bien compris désolé ^^

      Supprimer
    5. Bonjour Ed,
      Pardon j'ai dû lire trop vite ^^ je parlais des articles mais ta question posait sur les images.
      Si tu veux forcer le centrage de tes images dans tes articles, tu peux ajouter ceci :

      .post-body img {
      margin: 0 auto !important;
      }

      Avant la ligne :

      ]]></b:skin>

      Supprimer
    6. Ok, c'est super, merci beaucoup ! :)

      Supprimer
  19. J'attendais cet article avec impatience ! Tout fonctionne parfaitement ! Merci !

    RépondreSupprimer
  20. 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
  21. Bonjour !
    Cela fait un moment que je cherche comment insérer un diaporama sur mon blog mais malheureusement il ne s'affiche pas sur mon blog ! Pourriez-vous me dire où est-ce-que j'ai fait une erreur ? Je vous remercie d'avance pour votre réponse et pour toutes vos astuces ! Merci infiniment.

    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 :
      1. Que tu as bien collé tous les codes pré-requis au bon endroit
      2. Que tu n'as pas 2 fois le code Jquery. Ce code est à ajouter seulement si tu ne le possèdes pas.
      3. Que tu as bien changé l'adresse url pour celle de ton blog à cette étape
      4. Que tu bon est en mode public. Le diaporama va cherches les articles du flux de ton blog. Il n'est accessible que si ton blog est public.

      Supprimer
  22. 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
  23. 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
    2. Coucou, dsl encore ^^ j'ai réussi a modifié comme cela me plaisais ♥ cependant le rendu sur le site est complètement aléatoire en fonction du zoom ou du logiciel. Je comprend pas du tout et je suis coincé total. je te donne l'adresse au cas ou tu est 5 min (http://honey-b-books.blogspot.fr/). C'est un bémol, mais j'adore le rendu, et sa me fait gagné un temps fou ^^ j'adore !!! merci encore !!!!

      Supprimer
    3. Bonjour,
      Le problème bien des marges que tu as ajouté autour de ton diaporama.
      Je te conseil de définir une largeur pour ton diaporama (actuellement ton diaporama fait 900px de large). Ensuite il faut le centrer en définissant des marges auto.
      Retrouves ton code :

      #diaporama {
      margin-right: 300px; /* Espace au-dessus de la zone de gadgets */
      margin-left: 300px; /* Espace en-dessous la zone de gadgets */
      }

      Remplaces-le par :

      #diaporama {
      margin-right: auto;
      margin-left: auto;
      width: 900px;
      }

      Supprimer
    4. Bonjour ^^
      J'ai réussi a faire un diapo qui correspondait a peu près a se que je souhaité, cependant j'ai un diapo qui n'est pas centré et qui bouge en fonction du logiciel internet ou du zoom que j'utilise c'est vraiment bizarre ^^
      Si tu veux jeter un coup d'œil : http://honey-b-books.blogspot.com/
      Merci encore pour se tuto ^^

      Supprimer
    5. Bonjour,
      Le positionnement du diaporama qui change selon le navigateur vient des marges, as-tu changé les codes que je t'ai donné plus haut ?

      Supprimer
  24. Coucou, merci beaucoup beaucoup beaucoup pour cet article, on ne pourrait trouver mieux, franchement j'adore ton blog, il m'aide énormément et tu mériterais limite de faire partie des blog awards haha ! merci encore et encore ! passe une bonne semaine, Xx

    RépondreSupprimer
  25. Coucou ma belle ! Encore un article au top !

    Pour moi, le diapo s'affiche pas, pourrais-tu m'éclairer ? :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Vérifies bien les points suivants :
      1. Que tu as bien collé tous les codes pré-requis au bon endroit
      2. Que tu n'as pas 2 fois le code Jquery. Ce code est à ajouter seulement si tu ne le possèdes pas.
      3. Que tu as bien changé l'adresse url pour celle de ton blog à cette étape
      4. Que tu bon est en mode public. Le diaporama va cherches les articles du flux de ton blog. Il n'est accessible que si ton blog est public.

      Si tu as déjà un code Jquery, vérifies qu'il est bien avant la ligne </head>

      Supprimer
  26. Coucou Catherine! Merci pour ce tuto que j'ai appliqué à la lettre! J'ai tenté d'afficher plus que 3 articles dans mon diapo, mais le pb, c'est que du coup, les images qui suivent ne sont pas toutes à la même taille dans le diapo, et ça fait moche ;-) As-tu une solution? Merci beaucoup!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le seul moyen d'y remédier c'est d'utiliser des images qui ont une taille similaire.
      Ton diaporama est très petit en hauteur, donc toutes les images en mode portrait seront coupées c'est normal. Soit tu peux changer la première image des articles affichés pour une image en mode paysage, soit augmenter la hauteur de ton diaporama. Ou bien les 2 :)

      Supprimer
  27. Bonsoir !

    Merci beaucoup Catherine pour ce pour ce nouveau tuto ! Moi qui cherchait depuis longtemps comment faire pour insérer un widget de ce genre sur mon blog !
    J'ai bien suivit tes indications, et dans l'ensemble tout s'est bien déroulé, jusqu'à ce que je tente de le mettre à 100% de la page. Cela ne me plaisait pas, du coup j'ai voulu revenir en arrière, sauf que maintenant, mon diaporama n'apparait plus du tout :/. De plus, ma bannière de blog est décalée sur la gauche, au lieu d'être centrée...

    As-tu quelques astuces pour résoudre ces problèmes ? Je te laisse le lien de mon blog ici pour que tu vois mieux de quoi je parle : www.cannothelpbutdream.com

    Bonne journée, bisous !

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Pour ton image d'en-tête, rajoutes ce code CSS pour le centrer :

      img#Header1_headerimg {
      margin: 0 auto;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Pour le diaporama, vérifies bien les points suivants :
      1. Que tu as bien collé tous les codes pré-requis au bon endroit
      2. Que tu n'as pas 2 fois le code Jquery. Ce code est à ajouter seulement si tu ne le possèdes pas.
      3. Que tu as bien changé l'adresse url pour celle de ton blog à cette étape
      4. Que tu bon est en mode public. Le diaporama va cherches les articles du flux de ton blog. Il n'est accessible que si ton blog est public.

      Supprimer
  28. Merci mille fois pour ce tutoriel !!
    Alors tout se passait très bien j'étais très contente de la disposition et tout, j'ai testé plusieurs fois mais au bout d'un moment le diaporama ne s'est plus affiché sur le blog. Et quand je publie des articles ensuite eux non plus ne s'affichent pas.
    Je n'ai pas réussi à ne pas l'afficher sur les articles en suivant l'autre tutoriel. Donc je me suis demandée si je n'avais pas mal copier/coller le code. En enlevant ça ne marchait toujours pas : plus de diaporama et quand je publie les articles ils ne s'affichent pas non plus ... ( bordelutopique.blogspot.com )

    RépondreSupprimer
    Réponses
    1. Bonjour Romane,
      As-tu réglé le problème ? Car je vois bien ton diaporama et tes articles :)

      Pour le code qui cache le diaporama sur les pages des articles, vérifies bien que tu as ceci :

      <!-- Affichage sur page des articles -->
      <b:if cond='data:blog.pageType == "item"'>
      <style type="text">
      #diaporama {
      display: none;
      }
      </style>
      </b:if>

      Supprimer
    2. Merci pour ta réponse je ne pensais pas que tu répondrais aussi rapidement ! alors oui ça fonctionne c'était mon ordinateur qui avait un petit soucis. Pour le code ce n'était pas le bon visiblement mais même en copiant celui que tu m'as donné ça ne fonctionne toujours pas. Peut être que je l'ai collé au mauvais endroit et que je n'ai pas compris le tutoriel précédent !.. il est au niveau 2670 ...merci encore pour ta disponibilité c'est vraiment cool !

      Supprimer
    3. J'ai oublié une partie du code. Retrouves cette ligne :

      <style type="text">

      Et remplaces-la par :

      <style type="text/css">

      Essaies aussi de remplacer le code CSS par :

      #diaporama {
      display: none !important;
      }

      Normalement si tout ce code est avant la ligne </body> alors ça devrait fonctionner.

      Supprimer
  29. Bonjour Catherine,

    Je reviens demander conseil pour un nouveau problème. Cependant, il concerne un autre sujet que le diaporama (le menu déroulant) mais malheureusement la publication de nouveaux commentaires n'est plus autorisée. Est-il possible que je la pose ici? Ou y a-t-il un autre moyen de vous contacter?

    Bien à vous :)

    Florence

    N.B.: j'ai lu les 200 et quelques messages de l'article concerné et rien n'y fait.

    RépondreSupprimer
    Réponses
    1. Bonjour Florence,
      Il y a un lien vers un article consacré aux nouveau commentaires pour cet article ici : https://ladybirdr.blogspot.fr/2014/09/commentaires-creer-un-menu-deroulant_12.html
      Tu peux laisser ton commentaire sur cet article ;)

      Supprimer
  30. le diaporama n'apparait pas sur le blog et j'arrive pas à trouver ou est le problème . peux-tu m'aider s'il te plait?
    merci beaucoup

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tout d'abord il semblerait que tu ais 2 fois le code jquery, et les 2 version que tu as sont vieilles. Je te conseil d'ajouter un code à jour. Retrouves donc tes 2 codes comportant :

      jquery.min.js

      Ajoutes ensuite :

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

      Avant la ligne :

      </head>

      En regardant ton blog le diaporama est bien généré mais reste invisible. Je pense que le problème vient de ton thème.
      Peut-être que c'est son emplacement qui entre en conflit. Essaye de le déplacer à un autre endroit sur ton blog pour voir s'il s'affiche ou non. Essaye de le déplacer avant la ligne suivante par exemple :

      <div id="widget-area">

      Supprimer
  31. Hello :D
    Un grand merci à toi pour le temps que tu passes à créer tous ces tutos. Cela m'aide énormément car j'étais bien plus habituée à wordpress avant de revenir sur blogger. Je viens tout juste d'installer ce slider et le rendu est top, alors encore merci.

    Bonne soirée,
    Shannon.

    RépondreSupprimer
    Réponses
    1. Bonjour Catherine,

      Je me permets de te laisser un nouveau commentaire tout en te remerciant une nouvelle fois pour le travail fourni et toutes les astuces que tu nous partages.

      Voilà j'ai installé le slider et tout se passe à merveilles mais connais-tu (à tout hasard) une astuce qui permet d'ajouter un effet parallax aux images de mon slider lorsque l'on scroll sur la page afin d'ajouter du dynamisme à l'ensemble de mon design. Si tu as une astuce pour faire ça, ça serait génial! Je continue néanmoins de chercher.
      Je te remercie d'avance et j'espère avoir été suffisamment claire dans mes explications.

      Passe un bon week-end de Pâques.
      Shannon.

      Supprimer
    2. Bonjour Shannon,
      Tu peux essayer en ajoutant ce code :

      <script type='text/javascript'>
      $(window).scroll(function(){
      var wScroll = $(this).scrollTop();
      $('.owl-item img').css('transform', 'translate(0px, ' + wScroll /<b>10</b> + '%)');
      });
      </script>

      Avant la ligne :

      </body>

      Tu peux modifier la "vitesse" de décalage des images en augmentant ou en diminuant la valeur 10 en gras. Si tu augmentes la valeur 10, la "vitesse" sera plus lente, si tu réduit la valeur 10 la "vitesse" sera plus rapide.
      Tu peux également changer la direction de défilement en rajoutant un signe - avant :

      ' + wScroll /10 +

      Comme ceci :

      -' + wScroll /10 +

      Ce qui donne :

      <script type='text/javascript'>
      $(window).scroll(function(){
      var wScroll = $(this).scrollTop();
      $('.owl-item img').css('transform', 'translate(0px, -' + wScroll /<b>10</b> + '%)');
      });
      </script>

      Supprimer
    3. Ohh c'est top, un grand merci à toi :D Je galérais à trouver comment faire. Franchement merci! Passe un bon week-end.

      Supprimer
  32. Salut :) J'ai un petit problème je n'arrive pas a entrer le code jqury et merci de passer du temps pour nous aidez a rendre notre blog a notre goût j'adore tes tutos tu m'aides beaucoup Merci merci merci merci merci merci merci merci

    RépondreSupprimer
    Réponses
    1. Bonjour Adele,
      Que veux-tu dire pas n'arrives pas à l'ajouter ?
      Trouves la ligne suivante dans ton thème :

      </head>

      Colles le code suivant :

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

      Juste avant :

      </head>

      Supprimer
  33. Bonjour, j'attendais ce tuto depuis un bon moment et je te remercie!! Mais malheureusement il ne fonctionne pas sur mon blog, j'ai beau faire tout ce qui est écrit, je l'ai même fait plusieurs fois, rien ne s'affiche, la zone reste vide :/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Essaye de mettre à jour ton code Jquery avec celui donné dans le tutoriel. Tu as la version 1.6.3 or celui du tutoriel est la version 3.1.1 (beaucoup plus récent) :

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

      Supprimes ce code et ajoutes celui donné dans mon tutoriel avant la ligne :

      </head>

      Supprimer
    2. Tu peux aussi essayer de remplacer ton code :

      <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>

      Par :

      <script>
      $(document).ready(function(){
      // --
      // 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>

      Supprimer
    3. Bonjour, j'ai tout refait du début et ça fonctionne !! Merci beaucoup !!
      Par contre je me demandais, j'aimerai remplacer l'emplacement "Libellé" juste par un seul libellé et pas forcément le premier de l'article, dans mon cas j'aimerai qu'il y ait uniquement le libellé "Chronique" pour chaque diapo, et pouvoir en changer le texte pour l'appeler "Dernières chroniques", est-ce que c'est possible? J'espère que c'est compréhensible :/

      J'ai aussi une barre qui s'est crée tout en haut de mon blog au dessus de ma barre de recherche depuis que j'ai trafiqué dans le code et je ne sais pas comment l'enlever :/

      Merci beaucoup pour toute cette aide ^^

      Supprimer
    4. Bonjour,
      Sans modifier le code qui génère le diaporama, tu peux simplement ajouter le nouveau libellé Dernières chroniques à tes articles au début de la liste de libellés actuels.

      Supprimer
  34. Salut Catherine,
    Je te remercie déjà pour ce tutoriel que j'attendais avec impatience ! Comme d'habitude, quelque chose cloche sur mon blog, et comme je ne connais pas trop le code html et tout les trucs comme ça, j'applique à la lettre tout ce que tu dis. Enfin bref, tout ça pour dire que je n'arrive pas à trouver une solution moi-même et c'est pour cela que je me tourne vers toi. L'apparence du diaporama est parfaite, je n'ai rien à redire, mais lorsque je descends sur la page, le diaporama descend aussi et prend toute la largeur de la page...
    De plus, j'aimerais le faire apparaître seulement sur les pages "index" mais même en suivant tes conseils et les codes conditionnels, cela ne veut pas marcher...
    Voici le lien de mon blog : http://readeuse.blogspot.fr/

    Merci beaucoup d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Ambre,
      Le problème vient de ton thème :)
      Tu as placé le code de la nouvelle zone de gadgets dans ton en-tête, or l'en-tête de ton thème reste fixe en haut du blog quand on descend la page. Je te conseil donc de déplacer le code de ta nouvelle zone de gadgets après l'en-tête, avant la ligne suivante, par exemple :

      <main class='centered-bottom' id='main' role='main' tabindex='-1'>

      Je n'ai pas encore testé les codes conditionnels sur les nouveaux thèmes. Mais essaye de cacher le diaporama sur les pages d'articles avec le code CSS suivant :

      .post-view #diaporama {
      display: none;
      }

      A coller avant la ligne :

      ]]></b:skin>

      Supprimer
    2. Je te remercie beaucoup pour ta réponse mais comme je n'arrivais même pas à retrouver où j'avais mis le diaporama dans le code html et que je ne retrouvais rien j'ai décidé de remettre le thème précédent qui ne me causait pas autant de soucis :/

      Supprimer
  35. Bonsoir Cathérine, merci pour ce tutoriel, il tombe a pic, je me demandais comment intégrer une diapo à mon template actuel. Du coup je ne sais plus où installer la nouvelle zone de gadget sur mon template merci d'avance pour ton aide, je te mets le lien de mon blog www.leschroniquesdesapitou.com

    RépondreSupprimer
    Réponses
    1. Bonjour Sapitou,
      En regardant ton blog, je vois bien la nouvelle zone de gadgets sous ton en-tête. Je pense que le diaporama ne s'affiche pas car ton code Jquery n'est pas à jour. Supprimes ton code Jquery et ajoutes celui donné dans mon tutoriel avant la ligne :

      </head>

      Ensuite essaies de remplacer ton code :

      <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>

      Par :

      <script>
      // --
      // Paramètres du diaporama
      // true = activé | false = désactivé
      // valeurs de temps en milliseconds
      // --
      $(document).ready(function(){
      $(".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>

      Supprimer
    2. Bonjour Cathérine, merci bcp pour ta réponse et pour ton aide, j'ai bien appliqué les modifications mais le diaporama, ne s'affiche toujours, désolé de t’embêter ainsi

      Supprimer
    3. Bonjour Sapitou,
      Tu as un vieux code Jquery placé au mauvais endroit. Supprimes ce code :

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

      Ensuite ajoutes le nouveau code Jquery donné dans mon tutoriel avant cette ligne :

      </head>

      Supprimer
  36. Bonjour,

    Tout d'abord, merci beaucoup pour votre travail, c'est une vraie mine d'or pour la noob que je suis !

    Après avoir relu le tutoriel et vos réponses dans les commentaires, mon diaporama ne s'affiche toujours pas :/
    Pourriez-vous me dire ce qui cloche ?

    Bonne fin de journée,
    Mathilde

    RépondreSupprimer
    Réponses
    1. Bonjour Mathilde,
      Si tu avais déjà un code Jquery, essaies de le mettre à jour avec celui donné dans le tutoriel. Supprimes celui que tu avais déjà, et ajoutes celui du tutoriel avant la ligne :

      </head>

      Ensuite essaies de rajouter 2 lignes de code dans 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>

      Rajoutes :

      $(document).ready(function(){

      Juste avant la ligne :

      $(".owl-carousel").owlCarousel({

      Et ajoutes :

      });

      Juste avant la ligne :

      </script>

      Supprimer
    2. Bonjour,

      Merci pour votre réponse !
      Je n'avais pas de code jquery à la base, donc j'avais déjà mis celui du tuto. Et quand j'ajoute les deux lignes de code, blogger me signale une erreur lors de l'enregistrement :/

      Supprimer
    3. (Si cela peut aider, voici le lien de mon blog en construction : http://www.dandydog.fr)

      Supprimer
    4. Bonjour,
      Ton diaporama fonctionne, tu as juste oublié d'ajouter le www dans l'adresse url de ton blog. Vas sur le gadget de ton diaporama et retrouves ce code :

      <script src="http://dandydog.fr/feeds/posts/summary?max-results=3&alt=json-in-script&callback=diaporecents"></script>

      Rajoutes www à ton adresse web comme ceci :

      <script src="http://www.dandydog.fr/feeds/posts/summary?max-results=3&alt=json-in-script&callback=diaporecents"></script>

      Supprimer
    5. Bonsoir,
      Oups... c'était vraiment stupide haha
      Merci de ton aide, ce auto est super et grâce à toi, tout fonctionne !
      Mathilde

      Supprimer
  37. Bonjour et merci pour ce énième et fabuleux tutoriel !
    J'ai installé le modèle 3 mais mais mes images débordent de mon blog, il fait 820 par 260 px. As-tu une solution ?
    J'ai tenté plusieurs fois de suivre ton tutoriel pour l'entête et le pied de page à 100% de la page. Il me manque un code. Et idem pour déplacer la barre de navigation tout au dessus du blog, j'ai l'espace mais la barre ne s'affiche pas. Je te donne le lien de mon blog "brouillon" : teest2016.blogspot.com
    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Vanessa,
      Le diaporama "déborde" car ton en-tête et ton menu sont bien à 100% de largeur de la page. Certains codes de ton thème donnent l'impression qu'il n'est pas à 100%.
      Si tu souhaites que le diaporama entre dans le cadre de ton blog ajoutes :

      max-width: 698px;
      margin: 0 auto;
      width: 698px;

      Avant le signe } de ce code :

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

      Supprimer
  38. Bonjour Catherine,
    Encore merci pour cet article c'est top!
    mais j'ai un petit problèmes j'ai suivis tout ton tutoriel à la lettre néanmoins le diaporama ne veut pas s'afficher et quand je vais sur mon blog sur le coté il y a une image avec un tournevis et une clé pour modifier les différents gadget et celui du diaporama est la alors que je n'arrive pas à le voir.
    Je sais pas si tu a bien compris mon probleme et si tu pourra le résoudre,

    merci encore,

    Elisabeth du blog OhCZazou

    RépondreSupprimer
    Réponses
    1. Bonjour Elisabeth,
      Effectivement, même en testant sur mon blog test je n'arrive pas à afficher ton flux d'articles. As-tu déjà utilisé le gadget Suivre les mises à jour par e-mail ? Si non, ajoutes-le à ton blog en sauvegardant. Puis supprimes-le.
      Ensuite vérifies tes paramètres. Vas dans Paramètres > Autre. A Flux de site, à la ligne
      Autoriser les flux de blog vérifie que tu as Complet. Si ce n'est pas le cas, change ce paramètres pour complet et sauvegardes.

      Supprimer
    2. Bonjour Elisabeth,
      Voici une autre piste qui peut expliquer pourquoi le diaporama ne s'affiche pas. Vérifie que tous tes articles ont bien les éléments que tu souhaites afficher. Par exemple, si un article n'a pas d'image, n'a pas de titre, de texte, ou de libellé, alors le code risque de ne pas marcher.

      Supprimer
    3. Bonjour Catherine,

      merci pour ta réponse.
      j'ai fait la première étape et j'avais bien cocher la cases Complet.
      Et oui mes articles on tous un titre, des photos et des libellés....
      Je ne comprends pourquoi ca ne fonctionne toujours pas :(

      Supprimer
    4. Bonjour Elisabeth,
      Il y a une erreur dans l'adresse url de ton blog dans le code qui génère les articles du diaporama. Tu as ceci :

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

      Il y a un signe / en trop entre blogspot.fr et feeds. Tu devrais avoir ceci :

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

      Supprimer
    5. Bonjour,

      je viens de le faire, merci beaucoup.
      Je suis désolé mais ca ne marche toujours pas... je sens que je vais jamais m'en sortir :(

      Supprimer
    6. Bonjour Elisabeth,
      C'est bizarre :/
      Le problème vient peut-être de tes articles. Vérifies que tous tes articles ont bien les éléments que tu souhaites afficher. Par exemple, que tous tes articles ont bien un libellé, un titre, une date, une image, du texte pour l'extrait, et plus du nombre de caractères défini pour l'extrait.

      Supprimer
    7. J'ai reussiiiiiiii!!!!!
      enfaite j'avais oublié d'ajouter mes libellé...
      Merci beaucoup!! en encore désolé de t'avoir fais batailler...
      Je suis trop contente

      Supprimer
  39. Bonjour, j'ai essayé de créer un diaporama en suivant vos indications mais je rencontre un problème, quand je clique sur enregistrer pour enregistrer le code CSS dans la zone de gadget diaporama, la balise style à la fin du code ne s'enregistre pas, j'ai beau le réécrire à chaque fois, il se supprime tout le temps et je ne comprends pas pourquoi. Cela me donne comme résultat un gros bloque avec des chiffres et des lettres entre mon menu et mes articles. Donc si vous pouviez trouver une solution à ce problème, je vous en serais très reconnaissante.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si le </style> disparaît et un signe / apparaît à la fin du code qui le précède, ce n'est pas grave, c'est même normal.
      Peux-tu me donner le lien de ton blog pour que je puisses voir le problème ?

      Supprimer
    2. Bonsoir, il n'y a rien qui s'affiche à la place du style justement, si vous voulez aller voir, voilà le lien de mon blog https://lolfrenchgirl.blogspot.fr/

      Supprimer
    3. Bonjour,
      Le code CSS qui définit le style de ton diaporama se trouve après </style> or il devrait être placé avant la ligne </style>.
      Supprime la ligne </style> qui se trouve avant ton code CSS, et rajoute-la après ton code CSS.
      De plus, il y a une erreur dans l'adresse url de ton blog dans le code qui génère les articles du diaporama. Tu as ceci :

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

      Tu as // devant http qui est en trop, et un / avant /feeds en trop. Tu devrais avoir ceci :

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

      Supprimer
  40. Bonjour Catherine,

    Comment vas tu ?

    Merci pour ton Tuto, j'ai le même problème qu'Elisabeth,
    mon gadget ne s'affiche pas.

    Serais tu d'où ça peut venir ?

    Merci à toi,

    Bonne soirée.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as une erreur dans l'adresse url de ton blog dans le code qui génère les articles pour le diaporama. Tu as ceci :

      <script src="http://http://www.watercolorcake.fr/feeds/posts/summary?max-results=3&alt=json-in-script&callback=diaporecents"></script>

      Tu as 2 fois http:// tu devrais avoir ceci :

      <script src="http://www.watercolorcake.fr/feeds/posts/summary?max-results=3&alt=json-in-script&callback=diaporecents"></script>

      Supprimer
    2. Si cela ne fonctionne pas, vérifie que tous tes articles ont bien les éléments que tu souhaites afficher. Par exemple, si un article n'a pas d'image ou n'a pas de titre, ou de libellé, alors le code risque de ne pas marcher.

      Supprimer
    3. Super, c'était ça, je suis vraiment quiche :)
      Merci à toi,
      Bonne journée !

      Supprimer
  41. D'abord un grand merci pour la clarté des explications fournies, c'est vraiment très agréable. J'ai cependant un soucis comme d'autres, une fois le code renseigné et l'adresse de mon blog ajouté, le diaporama ne s'affiche pas. Pire, cela enlève l'affichage de tous mes articles, je suis obligé d'entre un nouveau pour que tout revienne dans l'ordre, mais toujours pas de diaporama.
    J'ai dû rater une étape ?
    voici l'adresse de mon blog : http://matthieumonseyron.blogspot.fr/
    Merci par avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je vois bien le diaporama sur ton blog, tu as dû régler le problème :)

      Supprimer
    2. Oui tout à fait, merci beaucoup ! J'avais apparemment pas assez d'articles récents publiés !!
      Par contre j'ai un autre problème lié sans doute à mon thème blogger de départ : tous mes espaces (en-tête, menu, pied de page) sont dans un encart arrondi que je n'arrive pas à enlever, aurais-tu une astuce ?

      Supprimer
    3. Bonjour,
      Effectivement cela vient de ton thème. Mais tu peux modifier ton code CSS pour supprimer ces arrondis.

      Retrouve ton code CSS qui commence par :

      .tabs-inner .widget ul {

      Trouve toutes les lignes de ce code comportant border-radius et remplace la valeur de ces lignes par 0, comme par exemple :

      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      -goog-ms-border-radius: 0;
      border-radius: 0;

      Fait de même avec les codes CSS qui commencent par :

      .tabs-inner .widget li:first-child a {

      .content-outer {

      .post-outer {

      .footer-outer {

      Ça devrait régler le problème ;)

      Supprimer
  42. Bonjour,
    Est-ce qu'il est possible de mettre le diaporama sous forme de gadget dans la barre latérale ?
    Merci d'avance pour votre réponse, Alissia

    RépondreSupprimer
    Réponses
    1. Bonjour Alissia,
      Oui c'est tout à fait possible. IL faudra peut-être modifier un peu le code CSS pour ajuster la hauteur du diaporama, ou la taille du texte par exemple, car la largeur de la barre latérale est bien plus petite. Mais c'est faisable :)

      Supprimer
    2. Super ! Alors je fais ça dans un gadget HTML/JavaScript ??

      Supprimer
    3. Au lieu de créer une nouvelle zone de gadgets et d'utiliser un gadget HTML/JavaScript dans cette zone de gadgets, tu peux simplement ajouter un gadget HTML/JavaScript dans ta barre latérale.
      Le seul code CSS à modifier sera celui-ci :

      /* -- 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 */
      }

      Il faudra remplacer #diaporama par le nom de ton gadget.

      Tout le reste du tutoriel reste le même.

      Supprimer
    4. Je vais essayer ça merci beaucoup !!

      Supprimer
  43. Bonsoir, excusez-moi d'encore vous déranger, mais j'ai essayé de mettre mon diaporama à 100% de la largeur de ma page, mais lorsque je copie le code du diaporama au-dessus du code du contenant du blog, il y a ce message qui s'affiche : Erreur d'analyse XML, ligne 2615, colonne 14 : XML document structures must start and end within the same entity.. La soit disant erreur est due à des balises html, pourtant elles s'affichent en vert et non en rouge donc je ne comprends pas pourquoi c'est considéré comme un erreur.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as dû supprimer ou oublier un morceau de code en déplaçant le code du diaporama.
      Essaye de recommencer en faisant bien attention à ne pas oublier de code ou à ne pas sélectionner une ligne en trop.

      Supprimer
  44. J'ai bien couper/coller le code du diaporama là où il faut mais le même message apparaît. Je ne peux ni enregistrer ni afficher l'aperçu de mon blog. Tant que ce problème ne sera pas réglé je je pourrai plus modifier mon blog. Ce message concerne la dernière ligne du blog. J'ai essayé de modifier certaines balises mais rien n'y fait. Je ne sais vraiment plus quoi faire.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je vois que tu as dû régler le problème car je vois bien ton diaporama. Je vois aussi que tu as réussi à bien le modifier en affichant 3 articles au lieu d'un seul ^^

      Supprimer
    2. Oui mais je ne peux plus modifier le code html de mon blog et donc mettre mon diapo a 100% de la page pour les raisons que j'ai' évoquées précédemment. Vous pourriez m'aider svp.

      Supprimer
    3. Si tu vois ce genre d'erreur c'est que tu as supprimé, oublié ou ajouté un morceau de code en déplaçant le code du diaporama.
      Il faut recommencer en faisant bien attention à ne pas oublier de code ou à ne pas sélectionner une ligne en trop, et à ne pas supprimer un morceau de code quand tu colles le code de ta nouvelle section.

      Supprimer
  45. Bonjour,

    Merci infiniment pour tes tutos et tes conseils.
    J'ai bien installé le diaporama sur mon blog : https://mirasfashionworld.blogspot.fr/
    J'aimerais savoir s'il était possible d'y ajouter un effet fondu entre chaque page qui défile.

    Par ailleurs, sur la version mobile, les titres de chaque article du diaporama ne s'adapte pas vraiment à l'écran. Saurais-tu pourquoi ?

    Merci d'avance pour tes réponses !

    RépondreSupprimer
    Réponses
    1. Bonjour Mira,
      Tu peux remplacer le défilement des images par un fondu si tu préfères. Ajoute cette ligne :

      animateOut: 'fadeOut', // Effet de Fondu

      Juste après cette ligne :

      $(".owl-carousel").owlCarousel({

      Dans le code suivant qui se trouve dans le gadget HTML de ton diaporama :

      $(".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
      })

      Supprimer
  46. Bonjour Katherine !

    Aujourd'hui, en me rendant sur mon blog, j'ai constaté que mon diaporama n'y apparaissait plus, alors qu'il y était encore il y a quelques jours (mardi dernier pour être exacte). Je n'ai pourtant rien modifié dans le code de mon blog ou du widget entre temps.
    J'ai donc supprimé puis recommencé ce dernier, mais mon Diaporama n'apparait toujours pas... J'ai pourtant bien veillé à mettre l'adresse de mon blog, vérifié que je n'avais pas deux fois le code jquery., que j'avais bien collé tous les codes pré-requis au bon endroit, que mon blog est en mode public etc, mais rien à faire... aurais-tu une idée d'où pourrait provenir ce bug ?

    Voici l'adresse de mon blog : www.cannothelpbutdream.com

    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Si le diaporama à disparu sans que tu ais touché au code, alors cela vient peut-être de tes articles. Vérifies que tous tes articles ont bien les éléments que tu souhaites afficher. Par exemple, que tous tes articles ont bien un libellé, un titre, une date, une image, du texte pour l'extrait, et plus du nombre de caractères défini pour l'extrait.

      Supprimer
  47. Salut Catherine,
    J'ai essayé de mettre en place le diapo mais rien ne s'affiche. Tu as une idée d'où peut venir ce problème ?

    Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour Amandine,
      Tout d'abord je ne trouve pas les codes donné dans le début du tutoriel à la partie Prérequis.
      Ensuite, tu as 2 gadgets HTML avec les codes pour le diaporama. Or il ne faut en ajouter qu'un seul.
      Supprimes celui qui possède l'adresse url de ton blog au format blogspot.fr.
      Gardes celui qui utilise l'url de ton blog comme amandineandco.fr/.

      Ensuite, il faut corriger l'url de ton blog car il manque le www. Tu devrais avoir ceci :
      <script src="http://www.amandineandco.fr/feeds/posts/summary?max-results=3&alt=json-in-script&callback=diaporecents"></script>

      Supprimer
    2. J'ai tout refais et ça ne change rien du tout..

      Supprimer
    3. Bonjour Amandine,
      J'ai ajouté une nouvelle partie avec des indications si le diaporama ne fonctionne pas ;)

      Supprimer
  48. Bonjour Catherine,

    J'ai réussi à installer depuis un petit moment le diaporama comme je le veux sauf qu'il y a un problème que je n'ai toujours pas réussit à régler même en lisant les commentaires... Le diaporama est à 100% de la page & du côté gauche tout est nickel, par contre du côté droit une partie de l'image suivante s'affiche jusqu'au lien de navigation "suivant" (qui lui est bien placé). Sachant que je ne veux pas qu'il y ai de bordure ou de marge autour de mon diapo & qu'il prenne bien toute la largeur de la page, as-tu une solution ?

    Merci encore pour toutes ces infos & ces tutos bien trop géniaux !

    www.leelouetaddictions.fr/ (si besoin)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est très étrange :/
      Essaye d'ajouter :

      width: 100%;

      Au code suivant :

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

      Et à ce code :

      .owl-carousel, .owl-item .img {
      height: 450px;
      position: relative;
      }

      Supprimer
  49. Hello,
    Effectivement c'est étrange ... surtout qu'en rajoutant
    width: 100%;
    au niveau des deux petits morceaux de code que tu viens de me dire, ça ne fonctionne pas non plus ...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient peut-être de ton code CSS. Essaye de remplacer tout le code CSS de ton gadget par celui-ci (j'ai repris l'apparence de ton diapo) :

      #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%);
      }


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

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


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

      .owl-item .item .info {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%; /* Largeur de la zone de texte */
      padding: 200px 40px 200px 40px; /* Espace entre les bords la zone texte et son contenu, dans l'ordre : haut droite bas gauche */
      background: rgba(0, 0, 0, 0.5); /* 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%);
      }


      /* --- 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 SC', serif; /* Police */
      font-size: 20px; /* Taille de la police */
      color: #ffffff; /* 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é */
      }



      /* --- Date --- */

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

      Supprimer
    2. (la suite du code CSS)

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

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

      .owl-item .link a {
      font-family: 'Playfair Display SC', serif; /* Police */
      font-size: 14px; /* Taille de la police */
      color: #ffffff; /* 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: 15px 50px 15px 50px; /* Espace autour du lien entre le bord et le texte, dans l'ordre : haut droite bas gauche */
      border: 1px solid #FFFFFF; /* Bordure, dans l'ordre : épaisseur style couleur */
      }

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


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

      .owl-prev, .owl-next {
      font-family: 'Quicksand', sans-serif; /* Police */
      font-size: 30px; /* 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 */
      }

      /* Apparition en fondu du texte */
      .owl-item .info {
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.0s ease;
      -moz-transition: all 0.0s ease;
      -ms-transition: all 0.0s ease;
      -o-transition: all 0.0s ease;
      transition: all 0.0s ease;
      }

      .owl-item:hover .info {
      opacity: 1;
      visibility: visible;
      }

      Supprimer
    3. Merci beaucoup !! Surtout que ça a du te prendre un peu de temps !
      Il n'y a plus cet histoire de décalage sur la droite avec un morceaux de la photo suivante qui apparaît mais le diapo n'est pas à 100% de la page. C'est comme si il y avait des bordures autour ... C'est à n'y rien comprendre...

      Supprimer
    4. Bonjour Leelou,
      Essaye ceci. Retrouve ce code dans tes codes pour l'apparence du diaporama :

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

      Rajoute les lignes suivantes :

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

      Avant le signe } de ce code.

      Supprimer
  50. Salut Catherine ! Tout d'abord merci infiniment, car avant de découvrir ton blog je n'aurais jamais cru pouvoir customiser mon blog de cette manière en comprenant quelque chose aux codes html haha :) Malheureusement pour moi il semble toutefois que ce diaporama me résiste ! Ca va faire 3 jours que j'essaye d'installer le diapo automatique entre la barre du menu et le corps de mon blog mais je n'y arrive pas, rien ne s'affiche. J'ai réussi à créer la nouvelle zone de gadget, mais lorsque j'ouvre un gadget html et que j'insère le codes pour modifier le style le diapo ne s'affiche toujours pas, il n'y a pas même pas un nouvel espace qui se crée sur la page de mon blog. Peut être que mon code Owl Carousel est défaillant ? Je ne sais pas, en tout cas je désespère car ton tuto est super et j'adorerais pouvoir l'appliquer à mon blog !

    RépondreSupprimer
    Réponses
    1. Bonjour Déborah,
      Avant tout vérifies bien les points suivants :
      1. Que tu as bien collé tous les codes pré-requis au bon endroit
      2. Que tu n'as pas 2 fois le code Jquery. Ce code est à ajouter seulement si tu ne le possèdes pas. Si tu en as plusieurs gardes-en 1 seul et vérifie qu'il se trouve bien avant </head>
      3. Que tu as bien changé l'adresse url pour celle de ton blog à cette étape, et qu'il n'y a pas d'erreur dans ton url (www en trop ou manquant, https en trop ou manquant, un signe / en trop ou manquant, etc.)
      4. Que ton blog est en mode public. Le diaporama va chercher les articles du flux de ton blog. Il n'est accessible que si ton blog est public.
      5. Que tous les articles qui doivent s'afficher dans ton diaporama contiennent bien tous les éléments que tu souhaites afficher (titre, image, libellé, texte pour l'extrait, etc.)
      6. Que tu as bien activé le flux d'articles RSS pour ton blog. Va dans Paramètres > Autre. Sous Flux de site à la ligne Autoriser les flux de blog vérifie que tu as bien Complet. Sinon change ce paramètre et sauvegardes.

      Supprimer
    2. Bonjour Catherine, je viens de tout refaire en suivant attentivement tes consignes mais le diapo ne s'affiche toujours pas...étrange

      Supprimer
    3. Bonjour Déborah,
      Il y a une erreur dans ton code qui génère le flux d'articles à afficher dans le diaporama.
      Tu as ceci :

      <script><src="https://fashionanarkist.blogspot.fr/feeds/posts/summary?max-results=20;alt=json-in-script&callback=diaporecents"></script>

      Or tu devrais avoir :

      <script src="http://fashionanarkist.blogspot.fr/feeds/posts/summary?max-results=20;alt=json-in-script&callback=diaporecents"></script>

      N'ajoutes pas https car ton blog est en http quand on le visite ;)

      Supprimer
    4. J'ai fais le changement, et toujours pas.. mais quelque chose doit m'échapper, car j'ai même créé un blog test pour essayer de mettre un diapo dessus et ça ne marchait pas non plus ! Je ne comprends pas pourtant j'ai du répété au moins dix fois les étapes pour ne rien louper mais rien n'y fait.. Je ne désespère pas, je finirai bien par y arriver un jour haha ! En tout cas merci énormément pour ta patience et tes réponses !!

      Supprimer
    5. OMG ça fonctionne !! J'étais en train de faire quelques arrangements (toujours grâce à tes tutos au top) j'ai voulu ajouter et modifier l'onglet des libéllés dans ma barre latérale puis je regarde ce que ça donne et là un diapo apparaît haha. Donc c'est super merci milles fois !

      Supprimer
  51. Merci mille fois pour ce tuto, et pour tous tes tutoriels d'ailleurs, ils sont géniaux !!

    RépondreSupprimer
  52. Bonjour,
    J'ai suivit toutes les étapes pour faire le diapo mais malheureusement il ne s'affiche pas, rien à faire...
    Mon blog est : https://fairysfox.blogspot.fr/ !
    Merci mille fois d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Stéphanie,
      J'ai ajouté une nouvelle partie avec des indications si le diaporama ne fonctionne pas ;)

      Supprimer
    2. Bonjour Catherine,
      Malheureusement après avoir tout reprit à zéro en suivant toutes les indications ça ne marche toujours pas, je ne comprends pas...

      Supprimer
    3. Bonjour Stéphanie,
      Tu as une erreur dans le code du gadget HTML. Tu as ceci :

      <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 = 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> <src='http://votreblog.blogspot.fr/feeds/posts/summary?max-results=3&alt=json-in-script&callback=diaporecents'></script>

      Remplace ceci :

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

      Par ceci :

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

      Ensuite remplace http://votreblog.blogspot.fr par l'URL de ton blog comme ceci :

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

      Ensuite, est-ce normal que ce gadget se trouve dans ta barre latérale et non dans la nouvelle zone de gadgets ?

      Supprimer
  53. Bonjour, j'ai une dernière petite question à vous poser et promis après j'arrête de vous importuner. En fait j'ai mis 3 articles sur mon diaporama mais l'article de gauche déborde à chaque fois sur celui situé à droite. Je ne sais pas si je suis claire mais je vous laisse l'adresse de mon blog pour aller voir : https://lolfrenchgirl.blogspot.fr/
    De plus, il y a l'image d'un de mes articles qui ne s'affiche pas sur mon diaporama, elle est représentée par un appareil photo barré d'une croix, et je ne comprends pas pourquoi.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tout d'abord pour la photo qui ne s'affiche pas c'est parce que tu ne l'as pas ajouté à ton article depuis ton ordinateur. Tu l'as sûrement copié d'un autre site. Je te conseil de toujours sauvegarder les images sur ton ordinateur et de les ajouter à ton article à partir de ton ordinateur.

      Pour les images qui débordent apparemment cela vient de ce code :

      #diaporama {
      margin-top: 3px; /* Espace au-dessus de la zone de gadgets */
      margin-bottom: 3px; /* 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 */
      }

      Remplace les 2 lignes :

      margin-top: 3px; /* Espace au-dessus de la zone de gadgets */
      margin-bottom: 3px; /* Espace en-dessous la zone de gadgets */

      Par :

      margin-top: 0; /* Espace au-dessus de la zone de gadgets */
      margin-bottom: 0; /* Espace en-dessous la zone de gadgets */

      Et laisse à 0. Dis-moi ce que ça donne ;)

      Supprimer
  54. Bonjour, merci pour ce tuto mais j'ai quelques problèmes :

    J'ai déjà un diaporama sur mon blog (mais le code jquery.min.js ne se trouve pas au bon endroit par rapport à ton tuto), est ce que je dois seulement enlever la 1ere ligne du code de mon diapo ou le code en entier pour faire le tien (si oui, j'efface jusqu'à où ?) ?

    Je cherche à insérer le code après la ligne qui commence par < body mais cette ligne ne se trouve pas après , elle se trouve très très loin après. Est ce que je dois quand même mettre le code après cette ligne ? Même si je le fais, dans ton tuto il faut trouver : < div class='main-outer'> et il n'existe pas malgré le fait que j'ai déjà un diaporama. J'ai cherché ou est-ce que mon diapo est mais je n'ai pas trouvé de nom. Comment je peux faire ?

    Merci d'avance. (mon blog si nécessaire : http://charlynesdiary.blogspot.fr/ )
    PS: j'ai du espacer les balises sinon je ne pouvais pas publier le commentaire.

    RépondreSupprimer
    Réponses
    1. Bonjour Charlyne,

      Souhaites-tu remplacer complètement ton diaporama actuel par le mien ? Ou ajouter un 2e diaporama sur ton blog ?

      Si tu trouves un code jquery.min.js dans ton blog mais qu'il ne se trouve pas avant </head> alors vérifies tout d'abord la version du code. Si la version de ton code est inférieur à celle de celui que je propose, alors tu peux supprimer cette ligne de code, et ajouter mon code avant la ligne </head>. Si ta version est la même, alors déplace ton code avant la ligne </head>.

      C'est normal que tu ne trouves pas <div class='main-outer'>, cela vient de ton thème dont le code HTML est différent des thèmes classiques de Blogger.

      Supprimer
    2. Merci pour ta réponse, je souhaite remplacer mon diaporama actuel par le tien.

      Voici les 2 lignes du code Jquery :
      < script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
      < script src='http://code.jquery.com/jquery-migrate-1.2.1.js' type='text/javascript'/>

      Ce n'est donc pas le même que le tien, j'ai déjà essayé de supprimer seulement la 1ere ligne du code et ça donne un espace blanc seulement à l'endroit de mon diapo actuel (et après on a le blog normal)

      Vu que je n'ai pas la ligne main-outer comment je peux faire pour continuer ton tuto ?

      Si je voudrais supprimer totalement mon diaporama et ne rien mettre à la place (mais ne pas avoir un espace blanc à la place), comment je pourrais faire car enlever la 1ere ligne du code Jquery me donne un espace blanc qu j'ai déjà parlé ?

      Merci d'avance (je ne sais pas si j'ai été totalement compréhensible, désolé si ce n'est pas le cas)

      Supprimer
    3. Bonjour Charlyne,
      Du coup j'ai répondu à ton précédent commentaire ^^
      Supprimes cette ligne :

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

      Conserve ton 2e code. Et ajoutes le code Jquery donné dans mon tutoriel avant </head>.

      Tu trouveras les réponses à tes autres questions dans ton précédent commentaire ici ;)

      Supprimer
  55. Bonjour,

    Merci pour ta réponse ! J'ai appliqué ton conseil :
    "Si tu souhaites que le diaporama entre dans le cadre de ton blog ajoutes :

    max-width: 698px;
    margin: 0 auto;
    width: 698px;

    Avant le signe } de ce code :

    #diaporama {
    margin-top: 0; /* Espace au-dessus de la zone de gadgets */
    margin-bottom: 0; /* Espace en-dessous la zone de gadgets */
    }"

    Cela a marché mais cela donne un diaporama carré, je souhaiterais que la photo du diaporama soit rectangulaire, c'est possible ? Merci encore.

    Voici mon blog : http://illicopesto.blogspot.be/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui il suffit de diminuer la hauteur de ton diaporama dans les codes CSS de son apparence, pour avoir un diaporama rectangulaire ;)

      Supprimer
    2. Super, c'est nickel maintenant ! Merci pour ta disponibilité et tout ce temps investi pour nous réaliser des tutoriels accessibles.

      Supprimer
  56. Bonjour Catherine,
    Encore une fois, merci pour tout le temps que tu passes pour nous faire des tutos de qualités, bien supérieurs à ceux que l'on peut trouver ailleurs.
    Ensuite, je suis désolée, je t'avais posé une question, mais j'ai trouvé la réponse: il faut que je fasse un diaporama^^, sauf que ça ne marche pas et je ne comprends pas :-( .
    Est-ce que tu peux jeter un petit coup d’œil s'il te plait? Merci beaucoup.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai rajouté une nouvelle partie dans le tutoriel qui donne des instructions quand le diaporama ne s'affiche pas. Tu pourras peut-être y trouver la réponse que tu cherches ;)

      Supprimer
    2. Merci d'avoir pris le temps de lire :-) ! J'ai regardé cette nouvelle partie, mais ça ne marche pas mieux alors qu'il me semble avoir tout vérifié. J'ai peut être loupé une partie, je vais regarder encore.
      Merci pour ces tutos en tout cas et bonne continuation :-)

      Supprimer
  57. Bonjour,
    Je possède déjà un diaporama sur mon blog et donc un code Jquery sauf qu'il n'est pas au bon endroit. Est ce que je dois seulement enlever la première ligne de mon code Jquery ou tout le code en entier (si oui, de quelle ligne à quelle ligne?)

    En suivant tes indications, je ne trouve pas la ligne qui commence par body (celle après head), je la trouve très loin après et elle n'est pas du tout comme ça. Est ce que je dois quand même coller le code que tu donnes après la ligne qui commence par body ?

    Même si je le fais, quand je cherche la ligne avec main-outer, je ne la trouve pas, même en faisant Crtl F. J'ai cherché le nom de l'endroit où ce trouve mon diaporama actuel et je n'ai rien trouvé.

    Comment je peux faire pour régler ces problèmes ?
    Comment je peux faire pour enlever mon diaporama totalement (il n'est pas dans la mise en page mais dans le code html de mon blog) s'il n'y a pas de solution ?

    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Charlène,
      J'ai répondu à ton précédent commentaire ici.

      Ne déplace que le code Jquery donné dans le tutoriel. Rien d'autre.

      Les codes de la structure de base de ton thème sont différents sur ton blog à cause de ton thème. C'est pourquoi ton code commençant par <body est différent, mais ce n'est pas grave car il n'y en a qu'un seul par thème. Tu peux donc coller le code donné dans mon tutoriel après ton code commençant par <body.

      C'est normal que tu ne trouves pas la ligne avec main-outer car la structure de ton thème est différente des thèmes classiques de Blogger.
      Il faut trouver un autre endroit dans ton blog pour coller la nouvelle zone de gadgets, par exemple avant la ligne comportant : container sp_sidebar
      Cette ligne délimite le début de la zone de ton blog comportant les articles et la barre latérale.

      Tu peux supprimer ton diaporama actuel en supprimant son code HTML. Attention à bien faire une sauvegarde de ton thème avant toute manipulation au cas où tu ferais une erreur ! Si c'est le cas, tu peux alors charger ta sauvegarde et recommencer sans problème ;)
      Dans le code HTML de ton thème retrouve la ligne suivante :

      <div class="featured-area">

      S'il n'y a pas de triangle à gauche de cette ligne (à côté des nombres à gauche de la boîte de code) alors cliques sur le nombre à gauche de cette ligne pour la faire apparaître. Ceci va fermer le code. Tu devrais avoir quelque chose comme ceci :

      <div class="featured-area">...</div>

      Tu peux ensuite sélectionner tout ce code en partant de la droite. Si le code s'ouvre ce n'est pas grave, cliques à nouveau sur le nombre à gauche de la ligne contenant featured-area pour fermer à nouveau le code.
      Une fois sélectionné, supprimes ce code. Attention à ne rien supprimer de trop ni de moins que ce qui est montré ;)

      Supprimer
    2. Merci encore d'avoir pris le temps de me répondre ;)

      J'ai une dernière question (et promis j'arrête après) : tu as du remarquer que dans mon diaporama actuel, les photos sont "coupées". J'aimerais les voir en entier (ou plutôt, j'aimerais que la hauteur de mon diaporama soit la même que mes photos) J'ai cherché dans le code html de mon diapo et j'ai trouvé un << img [...] height "100" >>. J'ai essayé de changer le chiffre mais rien n'a bougé. Comment je peux faire pour que la hauteur de mon diapo soit celle de mes photos (ou plutôt que mes photos se voient entièrement) ? Je dois changer quoi, et ou ?

      Merci d'avance.

      Supprimer
    3. PS : et idem pour la longueur. Comment faire pour voir l'intégralité des photos du diapo dans n'importe quel(le) format/taille d'écran d'ordinateur (car sur un format d'écran on peut voir la photo avec la bonne longueur mais pas la bonne hauteur et sur un autre format on peut voir la photo avec la hauteur et la longueur qui ne correspondent pas, bizarre...) ?

      Supprimer
    4. Bonjour Charlyne,
      Le problème c'est que tes images n'ont pas toutes les mêmes dimensions. Ton diaporama est paramétré pour faire entrer l'image dans le contenant. Si l'image est trop haute ou trop large elle sera coupée pour ne pas laisser de bords sans image. C'est un paramétrage classique, et on ne peut pas le modifier :/

      Supprimer
    5. Merci pour ta réponse ;)
      Ce n'est pas grave, le diaporama est quand même bien comme ça.
      En tout cas, encore merci d'avoir pris le temps de me répondre.

      Supprimer
  58. J'ai enfin pris le temps de mettre en place le diporama...
    MERCI MERCI MERCI !!!!
    Ca marche du tonnerre, mieux que dans mes rêves ... Lady bird, tu déchires !

    RépondreSupprimer
  59. Bonjour Catherine,
    Connais-tu un moyen de faire un diaporama uniquement avec des images ?
    Je te serais vraiment reconnaissante si tu pouvais m'envoyer à mon adresse e-mail le code (justine_bianco@yahoo.fr)
    Merci par avance
    PS : tu fais toujours un très beau travail

    Justine

    RépondreSupprimer
    Réponses
    1. Bonjour Justine,
      Veux-tu parler d'un diaporama avec des images qui ne sont pas les images des derniers articles publiés ? Si oui, alors j'en ferai un tutoriel ;)

      Supprimer
  60. Je viens de créer mon blog, et vraiment ton site a été d'une réelle aide pour essayer d'améliorer un peu son design.. Je t'en remercie donc !
    Après plusieurs tentatives j'ai bien réussi à mettre mon diaporama OUF. Maintenant mon grand problème est que je n'arrive pas du tout à changer l'écriture des articles. Que je passe par un code CSS, ou en modifiant la partie post-body. Je sais plus quoi faire... Est-ce que tu peux m'aider ?

    Voici mon blog : http://www.zatouni.com

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ecris-tu tes articles directement sur l'éditeur de texte Blogger ou d'abord dans un programme de type Word ? Car les textes de tes articles ont un formatage dans l'article. Le code HTML de tes articles comporte des codes qui définissent l'apparence du texte dont la police en Courrier New.
      Si tu écris tes articles dans un programme de type Word, puis colle le texte dans l'éditeur de texte Blogger le problème peut venir de là. Il faut écrire les articles directement dans l'éditeur de texte Blogger.
      Tu peux supprimer le formatage des textes et allant sur la page d'édition de ton article. Sélectionnes tout le texte, puis clique sur l'outil pour supprimer la mise en forme dont l'icône représente un T sous-ligné avec un crois rouge (à droite de la barre d'outils).
      Si tu avais défini des titres, il faudra les redéfinir.
      N'oublie pas de mettre à jour ton article en cliquant sur le bouton Mettre à jour ;)

      Supprimer
    2. Bonjour,

      Alors non je n'écris pas mes articles sur Word mais directement sur blogger. Mais en cliquant sur le petit T, ça marche ça me met l'écriture que j'avais mis :) . Super Merci beaucoup je suis super contente !

      Supprimer
  61. Bonjour, désolée de vous répondre si tardivement, mais l'astuce que vous m'avez donnée pour éviter que l'article de droite déborde sur celui de gauche ne marche pas. De plus comment peut-on savoir si notre diaporama est bien à 100% de la largeur de la page ? Parce que j'ai fait la manipulation que vous avez indiquée mais quand je pose ma souris sur le diaporama, il arrive qu'il parte vers la gauche et un grand espace blanc apparaît sur la droite...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème semble venir de ce code :

      #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 */
      }

      Supprime les lignes :

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

      Le problème c'est que sans ces lignes, le diaporama ne sera pas à 100% de largeur.
      Je vais essayer de trouver un solution.

      Supprimer
  62. Bonjour Catherine, merci beaucoup de votre tutoriel. Cependant, j'aimerais qu'il y ait en fond du diapo une couleur, au lieu de l'image de l'article.
    Est-ce que cela serait possible ?

    Merci d'avance ^^.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Malheureusement avec le code de ce tutoriel ce n'est pas possible car il va chercher la première image de l'article, et s'il n'y a pas d'image le diaporama ne s'affiche pas.

      Supprimer
  63. Bonjour,
    Tout d'abord, merci beaucoup pour tous ces tutoriels!
    Quand je place le code

    avant div class='main-outer',
    J'ai ce message d'erreur
    "More than one section was found with id: diaporama. Section IDs should be unique."
    et le diaporama ne s'affiche pas.
    Merci d'avance pour votre aide! :-)

    RépondreSupprimer
    Réponses
    1. Bonjour Béa,
      Si tu reçois ce message d'erreur c'est que tu as déjà ajouté, ou possèdes déjà une section nommée diaporama dans ton code. Vérifies que tu ne l'as pas ajouté 2 fois par erreur. Tu peux trouver ce code en réalisant une recherche dans ton code pour le terme :

      id='diaporama'

      Supprimer
  64. Bonjour ou Bonsoir tout dépendra de l'heure MDR!
    Je vous remercie pour ce superbe tutos! Je n'ai pas de soucis au niveau du carrousel mais j'aimerai bien afficher l'ensemble de mes libellés au lieu d'un seul libellés, est ce que c'est possible? Merci d'avance pour votre réponse

    RépondreSupprimer
    Réponses
    1. Bonjour Hidès,
      Malheureusement c'est un inconvénient du flux des articles Blogger, on ne peut pas afficher tous les libellés. Désolée :/

      Supprimer
  65. Merci pour ce super tuto ! Je voudrais l'insérer dans mon blog mais ça ne fonctionne pas... Je n'ai pas le code Jquery requis donc je l'insère avec tous les autres qui suivent mais j'ai beau enregistrer le thème, quand je vais sur une autre page et que je retourne sur le thème, les codes n'ont pas été pris en compte ! Ils ont tous disparus, comme si je n'avais rien modifié. Qu'est-ce que je peux faire ?

    RépondreSupprimer
    Réponses
    1. Bonjour Eglantine,
      En regardant ton blog je vois que les codes sont bien présents et ont bien été ajoutés à ton thème. Par contre tu as 2 codes jquery dont un qui n'est pas à jour :

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'></script>

      Supprimes seulement ce code.

      Tu peux maintenant passer à l'étape suivante en ajoutant le gadget HTML/JavaScript dans Mise en Page. Si la zone de gadgets du diaporama ne s'affiche pas, recharge la page dans ton navigateur (bouton F5 de ton clavier sur PC).

      Supprimer
  66. Bonjour Catherine, j'ai finalement trouvé pourquoi ça ne prenait pas en compte mes modifications !
    Mais j'aurais une autre petite question. Je voudrais rendre ma barre latérale de la même couleur que mon fond et laisser seulement le fond des articles en blanc. Quand je change la couleur de l'arrière plan principal dans "Personnaliser", tout devient de cette couleur même le fond des articles... Aurais-tu une solution miracle ? Merci !

    Je te donne mon blog : http://lespetitsmotsdeglantine.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Eglantine,
      Pour modifier la couleur de fond mais laisser la couleur de fond des articles blanc, alors il faut ajouter les codes CSS suivants à ton thème :

      .content-inner {
      background-color: #f3f3f3 !important;
      }

      .date-outer {
      background: #fff !important;
      padding: 20px !important;
      margin-bottom: 20px !important;
      }

      .fauxcolumn-inner {
      border: none !important;
      }

      .tabs-outer {
      background: #fff !important;
      padding-top: 15px !important;
      padding-bottom: 15px !important;
      }

      ul.first-nav {
      margin-top: 0 !important;
      }

      Par contre, le fond de ton menu et de ton en-tête seront blancs également.
      Ajoutes ces codes avant la ligne :

      ]]></b:skin>

      Supprimer
  67. Bonjour,
    J'avais utilisé ce tutoriel qui était juste parfait pour mon blog :) Mais je viens de voir qu'il marchait plus.
    Entre temps j'ai changé l'adresse du blog, j'avais un nom de domaine avec blogspot.fr mais maintenant j'ai mon propre nom de domaine : wwww.lesmeandresdecyprienne.fr
    J'ai fait une redirection de mon blog vers cette adresse donc j'utilise toujours blogspot. Est-ce que cela peut venir de là ?
    Merci beaucoup pour l'aide apportée :)

    RépondreSupprimer
  68. Bonjour Catherine, déjà un graaaaaaand merci pour tes tutoriels qui sont tout simplement géniaux et ô combien utile !!!
    Malheureusement, il y a un ou deux soucis que je n'arrive pas à résoudre malgré mes recherches.. Je pense que ce sont deux choses plutôt simple mais je ne sais pas quoi modifier, donc je me tourne vers toi afin que (je l'espère) tu puisses m'aider..

    Sur la page d'accueil de mon blog (https://ici-et-maintenant-reiki.blogspot.fr/) je ne comprends pas pourquoi le texte du deuxième encart, celui en blanc, ne se mets pas en dessous du titre.. Quelle ligne de code me faudrait il rajouter s'il te plait ?

    Et comment puis-je aggrandir la largeur de mes articles aussi s'il te plait ? J'aimerai qu'ils touchent le bord gauche de l'écran mais je ne sais pas où rajouter le margin-left..

    Voilà, désolée de mettre ça là mais je ne savais pas vraiment où les poser, merci d'avance pour tes réponses et bonne soirée ! :D

    RépondreSupprimer
  69. Bonjour Catherine, et avant tout merci pour tous tes tutos sans lesquels mon blog ressemblerait à une épave. Voici mon problème concernant le diapo : tout marchait parfaitement (il s'affichait uniquement sur la page d'accueil, c'était voulu) jusqu'à ce que je remplace le code du gadget (depuis mise en page) par celui de la version 3. Depuis, mon diaporama a disparu... j'ai essayé de rajouter le "www." et de revenir au code départ (que j'avais copié à part par précaution) mais rien n'y fait...
    Voici l'adresse de mon blog si cela peut t'aider : http://serialreaderblog.blogspot.fr/
    Merci beaucoup par avance !

    RépondreSupprimer
  70. D'ailleurs (je ne sais pas si cela aurait peu avoir une incidence) j'ai un peu modifié le code de la version 3, mais je ne comprends pas pourquoi ça aurait pu poser problème. J'ai constaté en comparant ma version à la 3 qu'il y avait des codes en plus dans la 3 que je ne comprenais pas, mais là encore je ne vois pas pourquoi il pourraient être à l'origine de mes soucis...

    RépondreSupprimer
  71. Re-bonjour Catherine,
    Je continue à essayer de régler mon souci, voici ce que j'ai observé:
    J'ai tenté de créer un nouveau diaporama : maintenant les deux s'affichent. Mais si j'en enlève un, les deux disparaissent.
    J'ai donc essayé d'utiliser des conditional tags pour cacher l'un des deux, mais les deux disparaissent encore. Est-ce que je devrais essayer de les supprimer tous les deux puis d'en refaire un?
    Ou remettre ma dernière sauvegarde et repartir à zéro?
    Merci d'avance.

    RépondreSupprimer
  72. C'est encore moi!
    Il semblerait que mon problème se soit résolu tout seul... ce diaporama reste un mystère, mais au moins il est là!
    Désolée de t'avoir dérangée avec mes multiples messages !

    RépondreSupprimer
  73. Bonjour !

    Ce petit mot pour te dire que je t'ai laissé un commentaire il y a une dizaine de jours, j'ai vu que tu avais modéré depuis donc peut être qu'il est passé à la trappe :(

    Je te contactais car malgré ayant bien suivi ce tuto (comme beaucoup de ton site d'ailleurs pour lesquels je n'ai jamais eu de souci!) mon diapo ne s'affiche pas, j'ai beau tout scruter je ne trouve pas mon erreur... Mon gadget a bien été créé, cependant il semble s'être perdu dans l'espace^^
    Peux-tu m'aider ?

    Laetitia

    RépondreSupprimer
  74. Bonjour Catherine,

    Je viens de changer de template, avec un thème avec diaporama déjà inclus.
    J'ai du déplacer le code et tout recoller comme indiqué.
    Malheureusement , je n'ai pas pu aller jusqu'a " creer une zone de widget" car mon diapo est présent mais les images ne défilent plus.
    Quand je vais dans "Mise en Page" je retrouve l'onglet bt slider main mais mon gadget HTML est vide.
    Peux tu m'aider car il n'y a que dans le code HTML du thème que je retrouve le moyen de modifier le diapo et non pas depuis la mise en page.
    Merci Cat!

    RépondreSupprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

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

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger