As a blogger & website owners, it is our responsibility to provide a user-friendly experience to our visitors. One important aspect of this is complying with GDPR regulations by adding a UI cookies consent. Not only does this enhance user privacy, but it also increases user trust and confidence in your website.
If you are a Blogger user and want to Add UI Cookies Consent Widget To The Blogger, you are in luck! In just a few easy steps, you can implement this feature and ensure that your website is in compliance with GDPR regulations.
|
| Add Cookies Consent Widget To The Blogger |
By following the steps outlined in this guide, you can enhance the overall user experience of your blogger and demonstrate your commitment to user privacy. This can help build a strong relationship with your audience and increase the likelihood of repeat visits.
So don't wait any longer! Read this full guide to learn how to add a UI cookies consent widget to your blogger and improve your blog's overall performance today!
What are cookies?
When a user visits a website, cookies, which are small files, are stored on their computer. The website uses the information contained within the cookies to remember the user's activity on the site, such as login information and preferences. There are various types of cookies, each serving a different purpose.
- Session cookies are temporary files that disappear when the user closes their browser. They are used to remember user preferences during a single browsing session, such as items in a shopping cart or login information.
- Persistent cookies, on the other hand, remain on the user's computer even after the browsing session has ended. They are used to remember user preferences across multiple visits to a website.
- First-party cookies are generated by the website the user is currently visiting, while third-party cookies are created by other websites that are providing content or services on the visited site. Third-party cookies are commonly utilized for tracking user behavior across multiple websites and for advertising purposes.
Essential cookies are crucial for the proper functioning of a website, while non-essential cookies are employed for tracking and advertising purposes.
Overall, cookies are essential in providing a customized and user-friendly experience on the web. Knowing the various types of cookies and their uses can assist website owners in creating a better user experience while adhering to privacy regulations.
Steps To Add UI Cookies Consent Widget To Your Blogger
If you have a Blogger site, adding a cookies notice widget is a necessary step to make sure your site complies with privacy laws and regulations. The cookies notice widget is a message that appears on your site, alerting visitors that cookies are being used and providing them with options to accept or decline them. To add this widget, you need to customize the text of the message and add the code to your site's HTML. This is a quick and simple process that ensures your site is compliant with regulations and your visitors understand how their data is being collected and used.
Take the necessary steps to add the cookies notice widget to your Blogger site today! And this is how's your cookies consent will look like:
IMPORTANT! Before implementing any code to your current template, I would suggest you to take a backup so that, if anything goes wrong you can restore your template again.
Step 1: First of all Login to your Blogger Dashboard
Step 2: After reaching your Blogger Dashboard, Click Theme.
Step 3: Click the arrow down icon 🔻 next to 'customize' button.
Step 4: Click Edit HTML and you will be redirected to your editing page.
Step 5: Now search the code ]]></b:skin> and paste the following CSS code just above to it.
/* Cookies Consent Notice by Eezy Blogger*/
.ckWrap{position:fixed;right:0;left:0;bottom:-600px;z-index:50;width:100%;padding:20px;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px 30px 0 0;box-shadow:0 -10px 25px -5px rgba(0,0,0,.1);align-items:center;justify-content:center;text-align:center;animation:ckUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckUp 2.5s forwards;-webkit-animation-delay:1s}
.ckWrap.acptd{animation:ckDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckDn 2.5s backwards;-webkit-animation-delay:.3s}
.ckWrap.hidden{display:none}
.ckWrap .ckCont svg{width:50px;height:50px;fill:#08102b;stroke:#08102b;stroke-width:.8}
.ckCont h2{margin:0;color:#08102b;font-size:1.5rem;font-weight:800;font-family:inherit}
.ckCont p{margin:10px 0;line-height:1.7em;color:#08102b;font-size:0.9rem;font-weight:400;font-family:inherit}
.ckWrap .btn{display:inline-flex;align-items:center;margin:0;padding:10px 15px;outline:0;border:0;border-radius:2px;line-height:20px;color:#fefefe;background-color:#482dff;font-size:13px;font-family:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer;transition:all 0.3s ease}
.ckWrap .btn:hover{opacity:.8;transform:scale(0.97)}
.ckWrap .btn.outl{color:#08102b;margin-left:8px;background-color:transparent;border:1px solid #767676}
.ckWrap .btn.outl:hover{border-color:#482dff}
@media screen and (min-width:768px){.ckWrap{max-width:450px;border-radius:10px;left:auto;right:30px;bottom:-500px;box-shadow:0 5px 35px rgba(0,0,0,.1);animation:ckdeskUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckdeskUp 2.5s forwards;-webkit-animation-delay:1s}.ckWrap.acptd{animation:ckdeskDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckdeskDn 2.5s backwards;-webkit-animation-delay:0.3s}}
@-webkit-keyframes ckUp{100%{bottom:0}}
@keyframes ckUp{100%{bottom:0}}
@-webkit-keyframes ckdeskUp{100%{bottom:30px}}
@keyframes ckdeskUp{100%{bottom:30px}}
@-webkit-keyframes ckDn{0%{bottom:0}100%{bottom:-600px}}
@keyframes ckDn{0%{bottom:0}100%{bottom:-600px}}
@-webkit-keyframes ckdeskDn{0%{bottom:30px}100%{bottom:-600px}}
@keyframes ckdeskDn{0%{bottom:30px}100%{bottom:-600px}}
.darkMode .ckWrap{background:rgba(50, 50, 50, 0.8)}
.darkMode .ckWrap .ckCont svg{fill:#fefefe;stroke:#fefefe}
.darkMode .ckCont h2, .darkMode .ckCont p, .darkMode .btn.outl{color:#fefefe}
Step 6: We have to disable default Cookie Notice by Blogger, so add the following JavaScript code just above to </head>
<script>/*<![CDATA[*/ /* Disable default Blogger cookie notice */ cookieChoices = {}; /*]]>*/</script>
Step 7: Now add the following JavaScript Code just above to </body> tag. If you don't find it, it is probably already parsed which is </body>
<script>/*<<![CDATA[*/ /* Cookies Consent Notice Script by Eezyblogger */ var ckBox=document.querySelector("#ckBox"),ckAcptBtn=document.querySelector("#ckAcptBtn"),ckErrMes="Cookie can't be set! Please unblock this site from the cookie setting of your browser.";if(null!=ckBox){ckAcptBtn.onclick=()=>{document.cookie="CookieConsentByEezyblogger=Accepted; max-age=2592000; path=/",document.cookie?ckBox.classList.add("acptd"):alert(ckErrMes)};let e=document.cookie.indexOf("CookieConsentByEezyblogger=Accepted");-1!=e?ckBox.classList.add("hidden"):ckBox.classList.remove("hidden")} /*]]>>*/</script>
Visitors may need to agree Cookie Consent after every 30 days. Change the marked no. code as per your need (in seconds). For eg. 5184000 = 60 days
Step 8: Save the changes by clicking on this icon 💾
Step 9: Then go to Layout menu.
Step 10: Now create a gadget by clicking on Add a Gadget and choose HTML/Javascript.
Step 11: Now paste the following HTML code into it.
<!--[ Cookies Consent Widget by Eezy Blogger ]-->
<div class='ckWrap hidden' id='ckBox'>
<div class='ckCont'>
<!--[ Cookies Icon ]-->
<svg viewbox='0 0 50 50'><path d='M 25 4 C 13.414063 4 4 13.414063 4 25 C 4 36.585938 13.414063 46 25 46 C 36.585938 46 46 36.585938 46 25 C 46 24.378906 45.960938 23.78125 45.910156 23.203125 C 45.878906 22.855469 45.671875 22.546875 45.359375 22.390625 C 45.042969 22.234375 44.671875 22.253906 44.375 22.441406 C 43.824219 22.792969 43.191406 23 42.5 23 C 41.015625 23 39.769531 22.082031 39.253906 20.792969 C 39.148438 20.527344 38.933594 20.320313 38.667969 20.222656 C 38.398438 20.125 38.101563 20.144531 37.847656 20.28125 C 37.003906 20.738281 36.035156 21 35 21 C 31.675781 21 29 18.324219 29 15 C 29 13.964844 29.261719 12.996094 29.71875 12.152344 C 29.855469 11.898438 29.875 11.601563 29.777344 11.332031 C 29.679688 11.066406 29.472656 10.851563 29.207031 10.746094 C 27.917969 10.230469 27 8.984375 27 7.5 C 27 6.808594 27.207031 6.175781 27.558594 5.625 C 27.746094 5.328125 27.765625 4.957031 27.609375 4.640625 C 27.453125 4.328125 27.144531 4.121094 26.796875 4.089844 C 26.21875 4.039063 25.621094 4 25 4 Z M 38 4 C 36.894531 4 36 4.894531 36 6 C 36 7.105469 36.894531 8 38 8 C 39.105469 8 40 7.105469 40 6 C 40 4.894531 39.105469 4 38 4 Z M 25 6 C 25.144531 6 25.292969 6.015625 25.4375 6.023438 C 25.285156 6.519531 25 6.953125 25 7.5 C 25 9.4375 26.136719 10.984375 27.660156 11.960938 C 27.269531 12.90625 27 13.917969 27 15 C 27 19.40625 30.59375 23 35 23 C 36.082031 23 37.09375 22.730469 38.039063 22.339844 C 39.015625 23.863281 40.5625 25 42.5 25 C 43.046875 25 43.480469 24.714844 43.980469 24.5625 C 43.984375 24.707031 44 24.855469 44 25 C 44 35.503906 35.503906 44 25 44 C 14.496094 44 6 35.503906 6 25 C 6 14.496094 14.496094 6 25 6 Z M 36.5 12 C 35.671875 12 35 12.671875 35 13.5 C 35 14.328125 35.671875 15 36.5 15 C 37.328125 15 38 14.328125 38 13.5 C 38 12.671875 37.328125 12 36.5 12 Z M 21.5 15 C 20.671875 15 20 15.671875 20 16.5 C 20 17.328125 20.671875 18 21.5 18 C 22.328125 18 23 17.328125 23 16.5 C 23 15.671875 22.328125 15 21.5 15 Z M 45 15 C 44.449219 15 44 15.449219 44 16 C 44 16.550781 44.449219 17 45 17 C 45.550781 17 46 16.550781 46 16 C 46 15.449219 45.550781 15 45 15 Z M 15 20 C 13.34375 20 12 21.34375 12 23 C 12 24.65625 13.34375 26 15 26 C 16.65625 26 18 24.65625 18 23 C 18 21.34375 16.65625 20 15 20 Z M 24.5 24 C 23.671875 24 23 24.671875 23 25.5 C 23 26.328125 23.671875 27 24.5 27 C 25.328125 27 26 26.328125 26 25.5 C 26 24.671875 25.328125 24 24.5 24 Z M 17 31 C 15.894531 31 15 31.894531 15 33 C 15 34.105469 15.894531 35 17 35 C 18.105469 35 19 34.105469 19 33 C 19 31.894531 18.105469 31 17 31 Z M 30.5 32 C 29.121094 32 28 33.121094 28 34.5 C 28 35.878906 29.121094 37 30.5 37 C 31.878906 37 33 35.878906 33 34.5 C 33 33.121094 31.878906 32 30.5 32 Z'/></svg>
<!--[ Cookies Notice Heading ]-->
<h2>Cookies Consent</h2>
<!--[ Cookies Notice Detail ]-->
<p>This website uses cookies to ensure you get the best experience on our website.</p>
</div>
<button class='btn' id='ckAcptBtn'>Accept Cookies!</button>
<a class='btn outl' href='https://policies.google.com/technologies/cookies'>Learn More</a>
</div>
Step 12: Lastly, save all the changes you made by clicking this icon 💾
Well Done! Now your website will show a pop-up with Accept all! and Learn More Buttons regarding Cookies.
Conclusion
Adding a UI cookies widget to your Blogger site is a simple and effective way to comply with GDPR regulations and provide a better user experience. With customizable design options and seamless integration, this widget ensures that your visitors have control over their data privacy while browsing your site. And I hope you have successfully added this widget to your blogger. Otherwise,
If you need any assistance, please feel free to contact us or leave a comment, and we will get back to you as soon as possible. As Eezy Blogger, we strive to make it easy for people to find us online, so please share our website with your fellow bloggers to help us reach more people.
Wishing you a pleasant day! 😊 We look forward to your next visit.