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
- Que fait ce gadget ?
- Faire une sauvegarde de son blog
- Pré-requis
- Créer une nouvelle zone de gadget
- Ajouter les codes de personnalisation du diaporama
- Définir les éléments à afficher
- Le code qui génère les articles du diaporama
- Paramètres du diaporama
- Les codes CSS pour définir l'apparence du diaporama
- Contenant du diaporama
- Hauteur du diaporama
- Contenant du texte
- Le libellé
- Le titre de l'article
- La date
- L'extrait
- Le lien lire la suite
- Les liens de navigation
- Astuces
- Afficher les articles récents d'un libellé
- Mettre le diaporama à 100% de la largeur de la page
- Cacher le diaporama sur certaines pages du blog
- Afficher le diaporama sur mobile
- Créer un effet bouton pour les liens
- Remplacer le lien Lire la suite par une image
- Afficher le contenant du texte seulement au survol du diaporama avec la souris
- Changer l'opacité du fond du contenant
- Help ! Le diaporama ne marche pas !
- Bonus
Que fait ce gadget ?
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.
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 :
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.jsjquery.min.js- 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></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'/></head>
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:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmM0vCv8kc9a59urQe_dNWrUEYPbKFZ20W7x5LdlMan1zHjtw3J5es8IjIESquZN3Q9iKB-7qOwGu0-cwiLsLxGg1PBkeT5UClzoXNbN_4LaIKEq6CMCSfe4OHn6GYEDgiJpdqfta_RDb/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><body
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'>Avant cette ligne collez :
<b:section id='diaporama' name='Diaporama' showaddelement='yes'></b:section>
Cliquez sur Enregistrer le thème en haut de la page, puis allez dans Mise en page :
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 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 :
Dans la liste de gadgets cliquez sur HTML/JavaScript :
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>Par exemple, si je souhaites afficher tous les éléments, mais enlever le libellé, je remplace :
var diapo_Libelle = true; // Libellésvar diapo_Libelle = false; // Libellés300 de la ligne :var diapo_Extrait_Longueur = 300; // Longueur de l'extrait en caractèresVous 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"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&alt=json-in-script&callback=diaporecents'></script>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=5Paramè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>- 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ébutnavText: ['< prev','next >'], // Texte des liens de navigationnavText: ['<','>'], // Texte des liens de navigationsmartSpeed: 1200 // Vitesse de défilementautoplayTimeout: 5500, // Délai de défilement
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>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%);
}</style><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></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 */
}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;
}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%);
}width: 80%; /* Largeur de la zone de texte */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 */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 {
}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 */
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 {
}/* 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 {
}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 */
}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 */
}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 {
}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 */
}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 */
}
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&alt=json-in-script&callback=diaporecents'>/-/Libellé entre summary et ?max-results comme ceci :<script src='http://votreblog.blogspot.fr/feeds/posts/summary/-/Libellé?max-results=3&alt=json-in-script&callback=diaporecents'>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'>body {
padding: 0 !important;
}</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'<b:widget id='HTML3' locked='false' title='' type='HTML'><b:widget id='HTML3' locked='false' title='' type='HTML'>...</b:widget>Collez ceci :
mobile='yes'<b:widget<b:widget mobile='yes' id='HTML3' locked='false' title='' type='HTML'>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 */.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 */
}
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 */.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 */
}
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"/>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 */
}/* --- Hauteur du diaporama --- */margin: 0 auto !important; /* Alignement de l'image : 0 auto = centré | 0 auto 0 0 = à gauche | 0 auto 0 0 = à droite */
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;
}-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;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;background: rgba(255, 255, 255, 0.7);
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 :
- Que vous avez bien collé tous les codes pré-requis au bon endroit
- 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> - 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.)
- 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.)
- 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.
- 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
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 !! ;)
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&alt=json-in-script&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
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&alt=json-in-script&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
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&alt=json-in-script&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>