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

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