Hi Guys ahh udah lama ternyata ya saya gak bagi tutorial , tapi ya udah sekarang saya mau bagi sedikit tutorial sama kalian tentang bagaimana mengkostumisasikan notifikasi cookies EU atau kalian yang mau menonaktifkan nya atau kalian mau buat sendiri kostum cookies sendiri tanpa nyender dari google cookies ? ini lah saat nya kalian perhatiin bagaiman cara nya oke 😉.
STEP 1
Kita harus meletakan ini sebelum tag <b:skin><link href='https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css' rel='stylesheet' type='text/css'/>STEP 2
Sekarang tambahkan Code Javascript setelah tag ]]></b:skin> atau sebelum tag </head> .<script src='https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js'/>Nah seperti nya kita udah selesai di tahap instalasi Cookies.
untuk selanjutnya kita tambahkan kode untuk memanggil Cookie banner .
tambahkan code di bawah ini tepat sebelum </head> .
<script type='text/javascript'>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#3260b1",
"text": "#ffffff"
},
"button": {
"background": "#db4433",
"text": "#ffffff"
}
},
"type": "info",
"position": "bottom",
"theme": "edgeless",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}
})});
</script>Info! Ganti dengan link page cookies sobat https://www.example.com/p/cookies.html. kalo kalian belum buat halaman Cookies buat dulu lalu salin halaman tersebut , lalu tambahkan link halaman ke javascript tadi.
maka akan terlihat seperti ini di template sobat
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<title><data:blog.pageTitle/></title>
<!-- code style cookie -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css' rel='stylesheet' type='text/css'/>
<b:skin><![CDATA[/* ----------------------------------------------- */
]]></b:skin>
<!-- code js cookies -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js'/>
<script type='text/javascript'>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#3260b1",
"text": "#ffffff"
},
"button": {
"background": "#db4433",
"text": "#ffffff"
}
},
"type": "info",
"position": "bottom",
"theme": "edgeless",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}
})});
</script>
</head>
<body>
<!-- code blog sobat -->
</body>
</html>STEP 3
untuk mengkostumisasi "palette": {
"popup": {
"background": "#3260b1",
"text": "#ffffff"
},
"button": {
"background": "#db4433",
"text": "#ffffff"
}
},
"type": "info",
"position": "bottom",
"theme": "edgeless",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}Perhatikan kode berikut, kode berikut adalah kode tema , default adalah edgeless
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#3260b1",
"text": "#ffffff"
},
"button": {
"background": "#db4433",
"text": "#ffffff"
}
},
"type": "info",
"position": "bottom",
"theme": "edgeless",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}
})});ini code tema lain :
Honeybee
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#000000",
"text": "#ffffff"
},
"button": {
"background": "#f2d72e",
"text": "#000000"
}
},
"type": "info",
"position": "top",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}
})});Mono
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background":"#237afc",
"text": "#ffffff"
},
"button": {
"background": "transparent",
"border":"#fff",
"text": "#ffffff"
}
},
"type": "info",
"position": "bottom",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}
})});Blurple
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background":"#3937a3"
},
"button": {
"background": "#e62576"
}
},
"type": "opt-out",
"position": "bottom-left",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}
})});Nuclear
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background":"#aa0000",
"text":"#ffdddd"
},
"button": {
"background": "#ff0000"
}
},
"type": "info",
"position": "bottom-right",
"theme": "edgeless",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}
})});Cosmo
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background":"#383b75"
},
"button": {
"background": "#f1d600"
}
},
"type": "opt-out",
"position": "bottom",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}
})});Neon
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background":"#1d8a8a"
},
"button": {
"background": "#62ffaa"
}
},
"type": "info",
"position": "bottom-left",
"theme": "classic",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}
})});Corporate
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background":"#edeff5",
"text":"#838391"
},
"button": {
"background": "#4b81e8"
}
},
"type": "info",
"position": "bottom",
"content": {
"message": "We use cookies to give you a better search experience and enable you to checkout on our website.",
"link": "Learn more here.",
"href": "https://www.example.com/p/cookies.html"
}
})});Selesai 😃 .
Code bersumber dari https://github.com/insites/cookieconsent