Comment ajouter une bannière de consentement aux cookies sur Blogger

Lors de votre navigation sur internet, vous êtes probablement tombé sur une bannière de consentement aux cookies qui vous demande d'accepter ou de refuser les cookies. Ces bannières sont devenues une fonctionnalité standard sur les sites Web en raison des préoccupations croissantes concernant la confidentialité des données et le suivi en ligne.

Si vous êtes un blogueur utilisant Blogger, il est essentiel d'ajouter une bannière de consentement aux cookies sur votre site pour garantir la conformité aux réglementations telles que le Règlement général sur la protection des données (RGPD) et le California Consumer Privacy Act (CCPA).

Qu'est-ce qu'un bandeau de consentement aux cookies ?

Une bannière de consentement aux cookies est une fenêtre contextuelle ou une bannière qui apparaît sur un site Web, informant les utilisateurs de l'utilisation de cookies et leur demandant leur consentement pour stocker ou accéder à leurs informations.

Les cookies sont de petits fichiers texte qui sont placés sur l'appareil d'un utilisateur lorsqu'il visite un site Web. Ils sont utilisés pour mémoriser les préférences des utilisateurs, suivre l'activité du site Web et offrir une expérience plus personnalisée. Cependant, les cookies peuvent également être utilisés à des fins de publicité ciblée ou de suivi, c'est pourquoi les utilisateurs doivent en être informés et avoir le choix de les accepter ou de les refuser.

L'ajout d'une bannière de consentement aux cookies sur votre site Blogger est un processus relativement simple qui peut être complété en quelques étapes. Dans les sections suivantes, nous décrirons les étapes pour ajouter une bannière de consentement aux cookies sur Blogger

Comment ajouter une bannière de consentement aux cookies sur Blogger

Pour ajouter une bannière ou une fenêtre contextuelle de consentement aux cookies dans Blogger, suivez les étapes ci-dessous.

1. Ouvrez votre tableau de bord Blogger et accédez à la section des thèmes.
2. Maintenant, cliquez sur la section Modifier HTML dans le menu déroulant juste à droite du bouton de personnalisation.
3. Recherchez maintenant la balise de fermeture Body (</body) qui est généralement la deuxième dernière ligne de votre code de thème.
4. Collez maintenant le code donné juste au-dessus et enregistrez-le pour ajouter la bannière de consentement aux cookies à votre site Web Blogger.

 <div class='cookie-box'> <div class='cookie-row'> <div class='cookie-img'><svg viewBox='0 0 97.93 97.93' xmlns='http://www.w3.org/2000/svg'><path d='M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z'></path><path d='M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z'></path><circle cx='32.08' cy='65.86' r='2.47'></circle><path d='M56.38,69.91a2.47,2.47,0,1,0,1.14,1.49A2.47,2.47,0,0,0,56.38,69.91Z'></path><path d='M72,52.68a2.47,2.47,0,0,0-2.38,1.83,2.44,2.44,0,0,0,.25,1.87,2.47,2.47,0,0,0,4.52-.59,2.44,2.44,0,0,0-.25-1.87A2.47,2.47,0,0,0,72,52.68Z'></path><path d='M89.51,52.86A14,14,0,0,1,81,47.2,14.09,14.09,0,0,1,61,35.68,14.09,14.09,0,0,1,49.49,15.73a14,14,0,0,1-5.66-8.55,44,44,0,0,0-21.09,6.15A44.26,44.26,0,0,0,71.46,87.08,44.24,44.24,0,0,0,89.51,52.86ZM28.28,43.42a2.47,2.47,0,0,1-2.38,1.83h0a2.47,2.47,0,1,1,2.38-1.83Zm3.8,24.9a2.47,2.47,0,1,1,2.47-2.47A2.47,2.47,0,0,1,32.08,68.32ZM44.92,27.13A2.47,2.47,0,1,1,44,23.76,2.47,2.47,0,0,1,44.92,27.13ZM57.28,73.27a2.47,2.47,0,1,1-.9-3.36,2.47,2.47,0,0,1,.9,3.36ZM74.42,55.79a2.47,2.47,0,1,1-.25-1.87A2.45,2.45,0,0,1,74.42,55.79Z' fill='#7577a9'></path><path d='M97.93,48.52v-.2A2.35,2.35,0,0,0,95.7,46a9.37,9.37,0,0,1-8-5.45,2.35,2.35,0,0,0-3.49-.93,9.51,9.51,0,0,1-5.44,1.72A9.4,9.4,0,0,1,69.39,31.1a2.35,2.35,0,0,0-2.55-2.55c-.28,0-.57,0-.85,0a9.39,9.39,0,0,1-7.68-14.81,2.35,2.35,0,0,0-.93-3.49,9.37,9.37,0,0,1-5.45-8A2.35,2.35,0,0,0,49.61,0H49a49,49,0,1,0,49,49C97.93,48.82,97.93,48.67,97.93,48.52ZM71.46,87.08A44.26,44.26,0,0,1,22.74,13.33,44,44,0,0,1,47.53,4.72a14,14,0,0,0,5.66,8.55A14.09,14.09,0,0,0,64.71,33.22,14.09,14.09,0,0,0,84.66,44.75a14,14,0,0,0,8.56,5.66A44.3,44.3,0,0,1,71.46,87.08Z'></path></svg></div> <div class='cookie-content'> <p>Our website uses cookies to improve your experience. <a href='https://policies.google.com/technologies/cookies' target='_blank' title='Learn more'>Learn more</a></p> <button class='cookie-buttons'>Accept!</button> </div> </div> </div> <style> .cookie-box.hide{display:none} .cookie-box { position: fixed; width: 90%; margin: 20px; max-width: 400px; min-height: 100px; background-color: #ffffff; box-shadow: 25px 12px 25px 12px rgb(30 30 30 / 4%); z-index: 990; border: 2px solid lightgrey; border-radius: 6px; bottom: 15px; right: 0px; padding: 15px; } .cookie-row { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: left; align-content: center; justify-content: center; align-items: center; } .cookie-img{padding-right:20px} .cookie-img svg{fill:#333;width:60px;height: 60px;} .cookie-content p { position: relative; width: 100%; display: inline-block; font-size: 15px; color: #666666; margin-top: 0!important; } .cookie-content pa{text-decoration:underline;} .cookie-buttons { position: relative; width: 100%; margin-top: 10px; float: left; background-color: #7577a9; font-family: inherit; font-size: 14px; color: #ffffff; text-decoration: none; opacity: 1; border: none; cursor: pointer; font-weight: 500; padding: 5px; border-bottom: 2px solid rgba(0,0,0,0.1); border-radius: 6px; } </style> <script>//<![CDATA[ cookieChoices = {}; const cookieBox = document.querySelector(".cookie-box"), acceptBtn = cookieBox.querySelector("button"); acceptBtn.onclick = ()=>{ document.cookie = "CookieByKey2Blogging; max-age="+60*60*24*30; if(document.cookie){ cookieBox.classList.add("hide"); }else{ alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser."); } } let checkCookie = document.cookie.indexOf("CookieByKey2Blogging"); checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide"); //]]></script>

Ce code supprimera la notification de cookie par défaut de Blogger et ajoutera une bannière de consentement de cookie personnalisée ou vous pouvez dire une fenêtre contextuelle sur le site Web de votre blogueur.

Ce code est entièrement optimisé et utilise des codes SVG afin que vous n'ayez pas à vous soucier de la vitesse du site sur le site Web du blogueur.

En conclusion, l'ajout d'un bandeau de consentement aux cookies sur votre site Blogger est essentiel pour garantir le respect de la réglementation sur la confidentialité des données et assurer la transparence vis-à-vis de vos utilisateurs.

J'espère que cet article vous aidera à ajouter un widget de consentement aux cookies personnalisé à votre site Web de blogueur. Si vous rencontrez des problèmes avec ce code, faites-le moi savoir dans la section des commentaires.

Au fait, vous pouvez m'engager pour optimiser la vitesse de chargement de votre blogueur. Consultez notre page de services pour en savoir plus.