Membuat Notifikasi Cookies di Blog


RENDIANSYAH - Membuat Notifikasi Cookies di Blog - Memasang notifikasi cookies di blog ataupun website sangat diwajib sekali untuk kita memasang, di karenakan sesuai dengan peraturan dan hukum yang berlaku di Uni Eropa. Aturan itu disebut dengan General Data Protection Regulation (GDPR) atau Regulasi Perlindungan Data yang akan digunakan untuk sebagai perlindungan data pribadi. Kenapa harus memasangnya? Karena pengunjung blog kita itu tidak dari indonesia aja melainkan juga luar negri. Bahkan saat kita daftar blog kita ke Google AdSense juga di wajibkan agar memasang notifikasi cookies. Sebelum ke tutorial cara pemasangannya, mari kita cari tahu lagi fungsi notifikasi cookies di blog atau website.

Fungsi Notifikasi Cookies

Cookies dikembangkan untuk membantu menyimpan data saat kita melakukan kunjungan atau bisa dibilang saat mengunjungi blog orang lain. Contohnya: cookies akan menyipan data pribadi kita seperti Username dan Password saat melakukan login akun. Fungsi cookies juga masih terbilang sangat banyak lagi, karena disini saya menyebutkannya beberapa saja. Berikut cara untuk memasang notifikasi cookies di blog.

Cara Membuat Notifikasi Cookie di Blog

Untuk membuatnya disini Anda cuma disuruh membuat halaman cookies saja pada laman blog Anda. Seperti biasanya Anda harus login terlebih dahulu ke Blogger > pilih menu Tema > klik tombol Edit HTML > dan tambahkan CSS di bawah ini tepat diatas kode </body> atau </style>

.cookie-bubble{position:fixed;width:100%;max-width:400px;min-height:100px;border-radius:10px;background-color:#fff;-webkit-box-shadow:0 2px 15px rgba(0,0,0,.2);box-shadow:0 2px 15px rgba(0,0,0,.2);z-index:9999;font-family:'Google Sans'}
.cookie-bubble.bottom-left{bottom:15px;left:15px}
.cookie-bubble.bottom-right{bottom:15px;right:15px}
.cookie-bubble.show.bottom-left,.cookie-bubble.show.bottom-right{-webkit-animation-name:popInBottom;animation-name:popInBottom;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:cubic-bezier(.19,1,.22,1);animation-timing-function:cubic-bezier(.19,1,.22,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.cookie-bubble.hide{display:none}
.cookie-bubble .cb-wrapper{position:relative;display:inline-block;padding:15px}
.cookie-bubble .cb-wrapper .cb-row{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:left}
.cookie-bubble .cb-wrapper .cb-row .cb-row-content .message{position:relative;width:100%;display:inline-block;color:#000;font-size:15px;margin-top:0}
.cookie-bubble .cb-wrapper .cb-row .cb-row-content .cb-controls{position:relative;width:100%;float:left;margin-top:10px}
.cookie-bubble .cb-wrapper .cb-row .cb-image{padding-right:23px}
.cookie-bubble .cb-wrapper .cb-row .cb-image .cookie-inner-color{fill:#00a4ff}
.cookie-bubble .cb-wrapper .cb-row .cb-image svg{width:75px}
.cookie-bubble .cb-wrapper .cb-row .agreement-btn{margin:0 10px 0 0;text-decoration:none;color:#fff;background:#00a4ff;padding:10px 20px;border-radius:5px;font-size:14px;opacity:1;border:none;cursor:pointer;text-transform:uppercase;font-weight:600;float:left}
.cookie-bubble .cb-wrapper .cb-row .agreement-btn:hover{background-color:#0083cc}
.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn{margin:0;color:#000;padding:10px 0;border-radius:5px;font-size:14px;opacity:.95;border:none;cursor:pointer;font-weight:400;float:left}
.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn:hover{opacity:1;text-decoration:underline}
.cookieBubble .copyright-wrapper{margin-top:20px}
.cookieBubble .copyright-wrapper a.copyright{position:absolute;width:70px;height:16px;bottom:8px;right:7px;margin-top:30px;background:url(../img/cb_copyright.svg);background-size:cover}
@-webkit-keyframes popInBottom {
0%{-webkit-transform:translateY(120%);transform:translateY(120%)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes popInBottom {
0%{-webkit-transform:translateY(120%);transform:translateY(120%)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@media screen and (max-width: 440px) {
.cookie-bubble.show{border-radius:0;width:100%;max-width:100%;left:0!important;bottom:0!important}
.cookie-bubble .cb-wrapper{padding:20px 15px}
}

Jika ingin lebih singkat salin kode dibawah ini dan letakkan tepat dibawah kode <head>

<link href='https://raw.githack.com/worteldzgn/blog/master/cookies/cookies.css' rel='stylesheet'/>

Kemudian, jika sudah tambahkan kode jQuery dibawah ini tepat diatas kode </body>

<script src='https://raw.githack.com/worteldzgn/blog/master/cookies/cookies.js'/>

Anda tidak dapat mengubah isi dari kode jQuery tersebut, jika ingin mengubahnya salin kode tersebut dan upload kedalam github. Untuk menghormati jangan pernah hapus sang pembuat.

Jika sudah semua Anda tinggal menyimpan Tema dan lihat hasilnya. Untuk hasil Anda dapat melihatnya diblog ini.

Baiklah, sampai disini saja tutorial Membuat Notifikasi Cookies di Blog kali ini. Untuk yang kurang paham dengan halaman bisa berkomentar dibawah. Sekian dan terimakasih 🙏

Post a Comment

Previous Post Next Post