How to add Cookies Consent Banner to your Blogger website
Cookies Consent Banner
If you have a blog website, you can add a cookies consent banner to your website using the code below.
Go to the layout option in the settings on your blog site
Then click on Add Gadge from any of the following sections
Then click on HTML Java script
Then copy the code below and paste it into the content cell
কোডটি কপি করুন
<style>
/* Styles for the cookie consent popup */
.cookie-popup {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
.cookie-popup-button {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
</style>
<script>
function acceptCookies() {
document.getElementById('cookie-popup').style.display = 'none';
// You can set a cookie or use local storage to remember the user's choice
}
</script>
<div id="cookie-popup" class="cookie-popup">
This website uses cookies to ensure you get the best experience on our website.
<button class="cookie-popup-button" onclick="acceptCookies()">Accept</button>
</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>
<script>
// Check if the user has already accepted cookies
if (!localStorage.getItem('cookieConsent')) {
document.getElementById('cookie-popup').style.display = 'block';
}
</script>
2 If the above code doesn't work, copy this code:
<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 p a{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>
This code will remove the default blogger cookie notification and add a custom cookie consent banner or popup you can say on your Blogger website.
This code is fully optimized and uses SVG code so you don't have to worry about site speed on the blogger website.
In conclusion, adding a cookie consent banner to your blogger site is essential to ensure compliance with data privacy regulations and provide transparency to your users.
Complete in the content box shown in the picture below
Paste the code
Then save it
So friends, this way you can set cookies consent on your website like a professional website.
Discover more:
01. Activate Microsoft Office Product Key for Free
02. Download Lifetime with Internet Download Manager. Easy Guide
03.Keep the information on your mobile forever protected
04. Rules for opening a Microsoft account on your computer, its use. Easy Guide
05. Sound not coming in Windows 11 problems and solutions
----- AUTHOR -----
Rahman Siddique Ronyis a Bangladeshi YouTube Content Creator, Blogger andDigital Marketing Expert.Tech Analysis BD will be by your side for your technology-related issues and solutions.
Rahman Siddique Rony
is a Bangladeshi YouTube Content Creator, Blogger and
Digital Marketing Expert.
Tech Analysis BD will be by your side for your
technology-related issues and solutions.
💫Thank you very much for visiting our blog site💚
01.Yt Channel FacebookPage:
https://www.facebook.com/techanalysisbd
Short Link:
02. Yt Telegram Channel:
03. My Facebook Id :
https://www.facebook.com/rahmansd24
04. My Instagram:
https://www.instagram.com/rahman_sd24
05. My Twitter:
https://www.twitter.com/rs_rony24
Mail:
01.Yt Channel FacebookPage:
https://www.facebook.com/techanalysisbd
Short Link:
02. Yt Telegram Channel:
03. My Facebook Id :
https://www.facebook.com/rahmansd24
04. My Instagram:
https://www.instagram.com/rahman_sd24
05. My Twitter:
https://www.twitter.com/rs_rony24
No comments