Cara Membuat Kostum Cookies - Agiel Triono

Cara Membuat Kostum Cookies

Baca Juga
thumbs

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 == &quot;index&quot;'>
<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

  • Untuk memasukan gambar silakan upload gambar pada komentar disqus.
  • Untuk memasukan link silahkan cantumkan link pada komentar tanpa menggunakan tag <a>.
  • Untuk menulis huruf bold silahkan gunakan <strong>...</strong> atau <b>...</b>.
  • Untuk menulis huruf italic silahkan gunakan <em>...</em> atau <i>...</i>.
  • Untuk menulis huruf underline silahkan gunakan <u>...</u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike>...</strike>.
  • Untuk menulis kutipan pendek gunakan <q>...</q>.
  • Untuk menulis kutipan panjang gunakan <blockqoute>...</blockqoute>.
  • Untuk menyembunyikan konten panjang gunakan <spoiler>...</spoiler>.
  • Untuk menulis syntax highlighter silahkan gunakan <pre><code>...</code></pre>, dan silahkan parse kode pada tab TOOLS.