Hai, halo semuanya! Di artikel kali ini, saya akan membahas cara memasang notifikasi cookies di Blogger. Mungkin sebagian dari kalian sudah sering mendengar istilah “cookies”, tapi apakah kalian benar-benar paham apa itu cookies dan kenapa penting untuk kita pasang di blog? Yuk, kita bahas satu per satu dengan bahasa yang santai dan mudah dimengerti.
Apa Itu Cookies?
Cookies, atau biasa disebut juga kuki, sebenarnya adalah kumpulan data yang dikirim oleh sebuah situs ke komputer atau perangkat yang kamu gunakan. Nah, data inilah yang merekam berbagai aktivitas dan jejak digital kamu ketika mengunjungi suatu situs web. Jadi, secara sederhana, cookies adalah data kecil yang menyimpan informasi mengenai riwayat penjelajahan kamu.
Bayangkan saja cookies itu seperti “kamera pengintai” mini yang diam-diam mencatat apa saja yang kamu lakukan di suatu situs. Bedanya, cookies ini nggak ada yang menyeramkan karena yang direkam hanya aktivitas online kamu. Informasi ini bisa digunakan untuk berbagai keperluan, mulai dari mengingat preferensi pengguna hingga membantu meningkatkan pengalaman browsing di situs yang kamu kunjungi.
Kenapa Kita Perlu Memasang Cookies di Blog?
Mungkin di awal kamu mikir, “Wah, cookies cuma buat nyimpen data browsing doang, kenapa repot-repot pasang notifikasinya di blog?” Nah, ada beberapa alasan nih kenapa kita perlu memasang cookies, terutama di blog. Yuk, simak beberapa alasan berikut:
Menjaga Kepatuhan Hukum
Beberapa negara, khususnya di kawasan Uni Eropa, mewajibkan situs web untuk menampilkan pemberitahuan tentang penggunaan cookies. Meskipun blog kita mungkin berlokasi di Asia, pengunjung dari Eropa atau wilayah lain bisa saja mengakses blog kita. Dengan memasang notifikasi cookies, kamu jadi sudah patuh pada peraturan internasional yang berlaku. Jadi, daripada nanti ada masalah hukum yang tidak diinginkan, mending kita pasang saja dari awal.
Transparansi dengan Pengunjung
Memasang notifikasi cookies juga menunjukkan kalau kamu transparan terhadap pengunjung. Dengan menampilkan pesan bahwa situs kamu menggunakan cookies, pengunjung bisa merasa lebih nyaman dan tahu bahwa data mereka diolah dengan cara yang wajar. Di era digital seperti sekarang, kepercayaan pengunjung sangat penting, lho!
Syarat untuk Layanan Lainnya
Beberapa layanan, misalnya Google AdSense, mengharuskan situs yang mendaftar memiliki notifikasi cookies. Jadi, kalau kamu berniat untuk monetisasi blog melalui iklan atau layanan lainnya, menambahkan notifikasi cookies merupakan salah satu persyaratan yang harus dipenuhi.
Apa Manfaat Cookies di Blog?
Selain memenuhi kewajiban hukum dan menambah transparansi, cookies punya banyak manfaat untuk pengelolaan blog kamu. Berikut beberapa manfaat yang bisa kamu rasakan:
Pengalaman Pengunjung yang Lebih Baik
Cookies memungkinkan situs untuk “mengingat” preferensi dan riwayat aktivitas pengunjung. Misalnya, jika pengunjung pernah mengatur preferensi tampilan atau bahasa di blog kamu, cookies akan membantu menampilkan blog dengan setting yang sama di kunjungan berikutnya. Jadi, pengunjung nggak perlu repot-repot mengubah-ubah setting setiap kali masuk.
Analisa dan Pengoptimalan Situs
Dengan adanya cookies, kamu bisa mendapatkan data berharga tentang bagaimana pengunjung berinteraksi dengan blog kamu. Data ini bisa digunakan untuk menganalisa perilaku pengunjung, menentukan konten apa yang paling diminati, serta mengoptimalkan tata letak atau fitur-fitur di blog. Semakin banyak data yang terkumpul, semakin mudah untuk memperbaiki dan menyesuaikan blog agar lebih menarik.
Meningkatkan Efektivitas Iklan
Jika kamu memasang iklan di blog, cookies dapat membantu dalam menampilkan iklan yang lebih relevan bagi pengunjung. Data yang dikumpulkan melalui cookies memungkinkan sistem iklan untuk menyesuaikan konten iklan sesuai dengan minat dan riwayat pencarian pengunjung, sehingga peluang klik dan konversi iklan pun meningkat.
Cara Memasang Cookies di Blogger
Nah, sekarang kita masuk ke bagian yang paling ditunggu-tunggu: cara memasang notifikasi cookies di Blogger. Jangan khawatir, caranya cukup simpel dan bisa kamu ikuti langkah demi langkah. Yuk, kita mulai!
Langkah 1: Login ke Akun Blogger
Pertama-tama, buka Blogger.com dan login ke akun kamu. Pastikan kamu menggunakan akun yang sudah aktif dan blog yang ingin kamu tambahkan notifikasi cookies.
Langkah 2: Masuk ke Menu Tema
Setelah login, pilih blog yang ingin kamu edit, kemudian klik menu Tema. Di sinilah tampilan blog kamu dikendalikan melalui kode HTML dan CSS.
Langkah 3: Edit HTML Blog
Di halaman Tema, cari ikon panah ke bawah atau tombol Edit HTML. Klik tombol tersebut untuk membuka editor HTML blog kamu.
Langkah 4: Sisipkan Kode CSS untuk Notifikasi Cookies
Cari bagian kode yang berisi ]]></b:skin>. Di atas kode tersebut, tempelkan kode CSS berikut ini untuk membuat tampilan notifikasi cookies yang menarik dan responsif:
/* Cookies Consent Notice */
.CwR {
position: fixed;
right: 0;
left: 0;
bottom: -600px;
z-index: 50;
width: 100%;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 30px 30px 0 0;
box-shadow: 0 -10px 25px -5px rgba(0,0,0,.1);
align-items: center;
justify-content: center;
text-align: center;
animation: ckUp 2.5s forwards;
animation-delay: 1s;
-webkit-animation: ckUp 2.5s forwards;
-webkit-animation-delay: 1s;
}
.CwR.acptd {
animation: ckDn 2.5s backwards;
animation-delay: .3s;
-webkit-animation: ckDn 2.5s backwards;
-webkit-animation-delay: .3s;
}
.CwR.hidden { display: none; }
.CwR .CcN svg {
width: 50px;
height: 50px;
fill: #08102b;
stroke: #08102b;
stroke-width: .8;
}
.CcN h2 {
margin: 0;
color: #08102b;
font-size: 1.5rem;
font-weight: 800;
font-family: inherit;
}
.CcN p {
margin: 10px 0;
line-height: 1.7em;
color: #08102b;
font-size: 0.9rem;
font-weight: 400;
font-family: inherit;
}
.CwR .btn {
display: inline-flex;
align-items: center;
margin: 0;
padding: 10px 15px;
outline: 0;
border: 0;
border-radius: 2px;
line-height: 20px;
color: #fefefe;
background-color: #482dff;
font-size: 13px;
font-family: inherit;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
cursor: pointer;
transition: all 0.3s ease;
}
.CwR .btn:hover {
opacity: .8;
transform: scale(0.97);
}
.CwR .btn.outl {
color: #08102b;
margin-left: 8px;
background-color: transparent;
border: 1px solid #767676;
}
.CwR .btn.outl:hover { border-color: #482dff; }
@media screen and (min-width:768px) {
.CwR {
max-width: 450px;
border-radius: 10px;
left: auto;
right: 30px;
bottom: -500px;
box-shadow: 0 5px 35px rgba(0,0,0,.1);
animation: ckdeskUp 2.5s forwards;
animation-delay: 1s;
-webkit-animation: ckdeskUp 2.5s forwards;
-webkit-animation-delay: 1s;
}
.CwR.acptd {
animation: ckdeskDn 2.5s backwards;
animation-delay: .3s;
-webkit-animation: ckdeskDn 2.5s backwards;
-webkit-animation-delay: 0.3s;
}
}
@-webkit-keyframes ckUp { 100% { bottom: 0; } }
@keyframes ckUp { 100% { bottom: 0; } }
@-webkit-keyframes ckdeskUp { 100% { bottom: 30px; } }
@keyframes ckdeskUp { 100% { bottom: 30px; } }
@-webkit-keyframes ckDn { 0% { bottom: 0; } 100% { bottom: -600px; } }
@keyframes ckDn { 0% { bottom: 0; } 100% { bottom: -600px; } }
@-webkit-keyframes ckdeskDn { 0% { bottom: 30px; } 100% { bottom: -600px; } }
@keyframes ckdeskDn { 0% { bottom: 30px; } 100% { bottom: -600px; } }
/* Jika template kamu menggunakan dark mode, pastikan untuk menyesuaikan class dark mode sesuai template masing-masing */
.drK .CwR {
background: rgba(50, 50, 50, 0.8);
}
.drK .CwR .CcN svg {
fill: #fefefe;
stroke: #fefefe;
}
.drK .CcN h2,
.drK .CcN p,
.drK .btn.outl { color: #fefefe; }
Catatan: Pastikan kamu menyesuaikan kode CSS di atas dengan template blog kamu, terutama jika kamu menggunakan fitur dark mode. Biasanya setiap template punya class dark mode yang berbeda, jadi sesuaikan sesuai kebutuhan.
Langkah 5: Nonaktifkan Pemberitahuan Cookie Default Blogger
Blogger sudah menyediakan pemberitahuan cookie bawaan, tapi kita mau pakai yang custom. Jadi, untuk menonaktifkan pemberitahuan default tersebut, tambahkan kode JavaScript berikut ini tepat di atas tag </head>:
<script>
/*<![CDATA[*/
/* Disable default Blogger cookie notice */
cookieChoices = {};
/*]]>*/
</script>
Langkah 6: Tempelkan Kode HTML Notifikasi Cookies
Selanjutnya, letakkan kode HTML berikut ini tepat di atas tag </body> (atau tepat sebelum </body>). Kode ini akan menampilkan notifikasi cookie kepada pengunjung blog kamu:
<!--[ Cookies Consent Notice ]-->
<div class='CwR hidden' id='ckBox'>
<div class='CcN'>
<!--[ Cookies Icon ]-->
<svg viewbox='0 0 50 50'>
<path d='M 25 4 C 13.414063 4 4 13.414063 4 25 C 4 36.585938 13.414063 46 25 46 C 36.585938 46 46 36.585938 46 25 C 46 24.378906 45.960938 23.78125 45.910156 23.203125 C 45.878906 22.855469 45.671875 22.546875 45.359375 22.390625 C 45.042969 22.234375 44.671875 22.253906 44.375 22.441406 C 43.824219 22.792969 43.191406 23 42.5 23 C 41.015625 23 39.769531 22.082031 39.253906 20.792969 C 39.148438 20.527344 38.933594 20.320313 38.667969 20.222656 C 38.398438 20.125 38.101563 20.144531 37.847656 20.28125 C 37.003906 20.738281 36.035156 21 35 21 C 31.675781 21 29 18.324219 29 15 C 29 13.964844 29.261719 12.996094 29.71875 12.152344 C 29.855469 11.898438 29.875 11.601563 29.777344 11.332031 C 29.679688 11.066406 29.472656 10.851563 29.207031 10.746094 C 27.917969 10.230469 27 8.984375 27 7.5 C 27 6.808594 27.207031 6.175781 27.558594 5.625 C 27.746094 5.328125 27.765625 4.957031 27.609375 4.640625 C 27.453125 4.328125 27.144531 4.121094 26.796875 4.089844 C 26.21875 4.039063 25.621094 4 25 4 Z M 38 4 C 36.894531 4 36 4.894531 36 6 C 36 7.105469 36.894531 8 38 8 C 39.105469 8 40 7.105469 40 6 C 40 4.894531 39.105469 4 38 4 Z M 25 6 C 25.144531 6 25.292969 6.015625 25.4375 6.023438 C 25.285156 6.519531 25 6.953125 25 7.5 C 25 9.4375 26.136719 10.984375 27.660156 11.960938 C 27.269531 12.90625 27 13.917969 27 15 C 27 19.40625 30.59375 23 35 23 C 36.082031 23 37.09375 22.730469 38.039063 22.339844 C 39.015625 23.863281 40.5625 25 42.5 25 C 43.046875 25 43.480469 24.714844 43.980469 24.5625 C 43.984375 24.707031 44 24.855469 44 25 C 44 35.503906 35.503906 44 25 44 C 14.496094 44 6 35.503906 6 25 C 6 14.496094 14.496094 6 25 6 Z M 36.5 12 C 35.671875 12 35 12.671875 35 13.5 C 35 14.328125 35.671875 15 36.5 15 C 37.328125 15 38 14.328125 38 13.5 C 38 12.671875 37.328125 12 36.5 12 Z M 21.5 15 C 20.671875 15 20 15.671875 20 16.5 C 20 17.328125 20.671875 18 21.5 18 C 22.328125 18 23 17.328125 23 16.5 C 23 15.671875 22.328125 15 21.5 15 Z M 45 15 C 44.449219 15 44 15.449219 44 16 C 44 16.550781 44.449219 17 45 17 C 45.550781 17 46 16.550781 46 16 C 46 15.449219 45.550781 15 45 15 Z M 15 20 C 13.34375 20 12 21.34375 12 23 C 12 24.65625 13.34375 26 15 26 C 16.65625 26 18 24.65625 18 23 C 18 21.34375 16.65625 20 15 20 Z M 24.5 24 C 23.671875 24 23 24.671875 23 25.5 C 23 26.328125 23.671875 27 24.5 27 C 25.328125 27 26 26.328125 26 25.5 C 26 24.671875 25.328125 24 24.5 24 Z M 17 31 C 15.894531 31 15 31.894531 15 33 C 15 34.105469 15.894531 35 17 35 C 18.105469 35 19 34.105469 19 33 C 19 31.894531 18.105469 31 17 31 Z M 30.5 32 C 29.121094 32 28 33.121094 28 34.5 C 28 35.878906 29.121094 37 30.5 37 C 31.878906 37 33 35.878906 33 34.5 C 33 33.121094 31.878906 32 30.5 32 Z'/>
</svg>
<!--[ Cookies Notice Heading ]-->
<h2>Cookies Consent</h2>
<!--[ Cookies Notice Detail ]-->
<p>This website uses cookies to ensure you get the best experience on our website.</p>
</div>
<button class='btn' id='CaCp'>Accept Cookies!</button>
<a class='btn outl' href='https://policies.google.com/technologies/cookies'>Learn More</a>
</div>
<script>
/*<![CDATA[*/
/* Cookies Consent Notice Script by Fineshop */
var ckBox = document.querySelector("#ckBox"),
ckAcptBtn = document.querySelector("#ckAcptBtn"),
ckErrMes = "Cookie can't be set! Please unblock this site from the cookie setting of your browser.";
if (null != ckBox) {
ckAcptBtn.onclick = () => {
document.cookie = "CookieConsentByFineshop=Accepted; max-age=2592000; path=/";
document.cookie ? ckBox.classList.add("acptd") : alert(ckErrMes);
};
let e = document.cookie.indexOf("CookieConsentByFineshop=Accepted");
-1 != e ? ckBox.classList.add("hidden") : ckBox.classList.remove("hidden");
}
/*]]>*/
</script>
Langkah Terakhir: Simpan Perubahan
Setelah semua kode di atas kamu paste pada tempat yang sudah ditentukan, jangan lupa untuk klik tombol Simpan (Save) di Blogger. Kini, notifikasi cookies yang sudah kamu buat akan aktif di blog kamu dan siap muncul ketika ada pengunjung baru!
Kesimpulan
Jadi, itu dia pembahasan lengkap tentang cara memasang notifikasi cookies di Blogger dengan gaya bahasa yang santai dan gampang dimengerti. Mulai dari memahami apa itu cookies, kenapa penting untuk dipasang di blog, manfaat yang didapat, hingga langkah-langkah teknis untuk memasangnya di Blogger. Dengan mengikuti panduan ini, kamu tidak hanya menjaga kepatuhan terhadap peraturan internasional, tetapi juga meningkatkan pengalaman pengunjung dan mendapatkan data yang berguna untuk mengembangkan blog kamu.
Semoga tutorial ini bermanfaat dan membantu kamu untuk membuat blog yang lebih profesional dan sesuai dengan standar global. Jangan ragu untuk bereksperimen dengan tampilan dan fitur notifikasi cookies kamu agar semakin menarik dan sesuai dengan kebutuhan pengunjung.
Selamat mencoba, dan semoga sukses dalam mengoptimalkan blog kamu!