Comment inclure un bouton spoiler dans vos articles sur Blogger ?
Hello tout le monde,
On se retrouve aujourd'hui pour un article d'un nouveau genre sur le blog. Vous n'êtes pas sans savoir que j'aime vous détailler les compositions de chacun des produits qui passent entre mes mains grâce à mes compétences en biologie. Mais comme parfois je vous décris trois à quatre produits dans un seul article, cela les "alourdit". J'ai donc recherché comment pouvoir masquer un bout de texte dans n'importe quels articles de votre blog. Et bien entendu je vous le partage !
- Première étape : Ajout de la librairie jQuerry
Attention ! N'oubliez, pas de sauvegarder votre blog avant de faire quoi que ce soit.
- Commencez par aller dans "Thème" sur le menu de gauche de la page d'administration de votre blog. Puis cliquez sur "Modifier le code HTML".
- À cette étape vous pouvez visualiser votre code. Faites alors "Ctrl+F" sur Windows ou "Cmd+F" si vous êtes sur Mac. Tapez dans la barre de recherche qui vient d'apparaître "</head>".
- Une fois ce mot clé trouvé, que l'on nomme aussi balise HTML, vous devez copier sur la ligne du dessus la ligne de code qui suit. Elle vous permettra d'ajouter ce que l'on appelle une librairie jQuerry. Librairie dans laquelle nous allons piocher d'autres lignes de codes :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
- Deuxième étape : Ajout du code Javascript
Le code JavaScript, qui va suivre, va permettre à votre blog de créer le bouton et surtout l'action de masquer ou d'afficher une partie de texte.
- Toujours dans le code HTML de votre Template Blogger, recherchez comme à l'étape n°2 de la section précédente un mot clé. Mais cette fois-ci "</body>".
- Vous devez ensuite copier le code suivant au-dessus de cette balise :
<script type='text/javascript'>$(document).ready(function(){ $(".sh-section-btn").on("click",function(){ $(this).parent().children(".h-section-cont").slideToggle(200); });});</script>
- Troisième étape : Ajout du code CSS
Le CSS, c'est simple, c'est le code qui va rendre votre bouton de la forme et la couleur de votre choix. C'est en somme le code qui permet à votre site de comprendre de quelle façon l'utilisateur va visualiser votre bouton.
- Jamais deux sans trois, recherchez cette fois-ci "]]></b:skin>"
- Copiez ensuite au-dessus de cette balise le code suivant :
.hidden-section-container { background-color:rgba(187, 187, 187, 0.93); box-shadow:0 2px 10px rgba(0,0,0,0.2);}.sh-section-btn { font-size:18px; color:#fff; text-shadow:1px 1px 0px rgba(0,0,0,0.2); padding:5px 10px; cursor:pointer;}.h-section-cont { padding:10px 10px; background-color:#eee; display:none;}
Vous pouvez bien entendu paramétrer le design de votre bouton. Pour cela rien de bien sorcier, avec un niveau d'anglais basique, vous vous y retrouverez sans soucis pour changer les couleurs. Les couleurs en informatique s’expriment en hexadécimale, c'est a dire avec une suite de trois lettres (des fois six). Par exemple, la couleur blanche s'exprime "#FFF". Je vous ai donc trouvé un site pour que vous puissiez sélectionner une couleur et que ce dernier vous donne l'équivalence en hexadécimal : http://www.code-couleur.com/
- La dernière étape : Ajout dans chacun de vos articles
Désormais, vous pouvez enregistrer le code de votre Template et repartir sur la page d'administration de votre blog, l'édition de votre Template est finie. Vous n'aurez plus jamais à y toucher.
Cette dernière étape, va être la plus fastidieuse car elle va dépendre de se que vous voulez cacher. Et vous devrez le faire pour chacun de vos articles où vous voudrez masquer un bout de texte. Ici je vais donc vous faire la démonstration sur un de mes articles avec une composition de produits : Palmer's, un lait pour le corps à base de Cacao !
Ici j'ai choisi de masquer la composition à partir de [...] anti-infectieuse)... jusqu'au dernier mot de la composition. Pour se faire :
- Ouvrez un article de votre choix, puis cliquez sur le bouton HTML.
- Rechercher ensuite dans ce code la partie qui correspond à votre texte à masquer. Pour cela vous pouvez utiliser les techniques de recherche des étapes 1, 2 ou 3.
- Vous devrez alors inclure le code suivant au-dessus et en dessous de votre partie à masquer:
<div class='hidden-section-container'> <div class='sh-section-btn'><span>Afficher/Cacher la composition</span></div> <div class='h-section-cont shw-box'> <!-- Inserez votre code en dessous de cela --> VOTRE PARTIE A CACHER ICI <!-- Inserez votre code au dessus de cela --> </div></div>
Vous pouvez désormais publier votre article et le bouton sera alors effectif. Voilà, ce petit tuto est terminé. Vous n'avez plus qu'à reproduire cette dernière étape dans chacun de vos articles.
Afficher/Cacher mon texte
Super, vous avez réussi !
Et vous, vous y connaissez-vous en code ? Avez-vous tenté ma méthode, en avez vous une autre ?
A bientôt,
Julie Rose
6 commentaires
Coucou,
RépondreSupprimerCet article est top et bien expliqué, après j'avoue que le code, je ne suis pas fan, je demande à Chéri quand j'ai un souci^^
Des bisous :)
Ahaha tu fais comme Julie alors :)
SupprimerCoucou Anthony et Julie
RépondreSupprimerTrafiquer les codes, ça me fait pas peur. Il faut dire que je teste tout avant sur un blog de ... test! Et comme tu le dis, l'important est de faire une sauvegarde de son blog avant de tout toucher! En tout cas, je retiens! Cela pourrait m'aider aussi pour les compositions qui prennent de la place et "pollue" un peu l'article. ^^
Salut Anthony et Julie,
RépondreSupprimerJe viens de tester pour un des articles que je suis en train d'écrire et ça fonctionne à merveille. Merci beaucoup pour le coup de main ;)
Bises. Elodie.
Salut, merci beaucoup pour cet article, très bien écrit !
RépondreSupprimerUne petite question cela dit: La version mobile de mon blog n'affiche pas le spoiler correctement, saurais tu y remédier ?
Autre question, en changeant le CSS, peut on afficher un spoiler un poil moin voyant ? Genre juste un triangle à cliquer ou un cadre plus fin peut etre ?
Merci d'avance !
c'est nickel. c'est clair précis. Pour un novice comme moi , si on suit à la lettre la procédure ça marche même du 1er coup . merci me reste à customiser le bouton à ma façon
RépondreSupprimer