Find Us OIn Facebook


APA ITU COOKIE?

Cookie atau notifikasi sering muncul diwebsite adalah sebuah teks dan sekumpulan data informasi yang akan disimpan pada komputer Anda setelah Anda mengunjungi website seseorang.

Cookie dapat menyimpan berbagai jenis data informasi, termasuk antara lain: nama, alamat email, alamat rumah, no telepon atau bahasa Anda. Namun informasi tersebut akan disimpan jika Anda pernah memberikan akses ini kepada situs tersebut. Situs web sendiri tidak akan dapat mengakses data informasi jika Anda tidak pernah memberikannya kepada situs web tersebut, situs web tersebut juga tidak akan dapat mengakses informasi berkas lainnya di komputer Anda.

Jadi sudah tahu apa itu cookie? Jika sudah mari kita lanjutkan saja cara membuat notifikasi cookie.

CARA MEMBUAT NOTIFIKASI COOKIE DI BLOG

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 sudah Anda 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 tingal menyimpan Tema dan lihat hasilnya. Untuk hasil Anda dapat melihatnya diblog ini.

Jadi sampai disini saja artikel kali ini, jangan lupa untuk berkomentar jika mengalami kesusahan atau bisa lewat halaman kontak.

1 Comments

Post a Comment

Previous Post Next Post