Di kebanyakan website, terutama belakangan ini, saat di akses melalui browser, akan muncul sebuah box atau kotak yang menginformasikan kalau situs menggunakan cookie.
Penasaran dan ingin menambahkan form/kotak/munculan tersebut di blog?
Kode nya ternyata kayak dibawah ini ;
<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>
Dan pernyataan izin cookie itu adalah kustomisasi untuk blog/website blogger.
Di buat oleh key2blogging.com/how-to-add-a-cookie-consent-banner-on-blogger.
Untuk contoh pengeditan dan peletakan code pada tema/template blogger, bisa lihat video dibawah;
Tentang Author
St
Dikirim pada -22 Sep 2023
" Selamat datang, selamat membaca dan selamat berseluncur "
Komentari
Posting Komentar