Cara Membuat Custom Cookie Bar Blogger dengan Ikon dan Desain Responsif

Panduan lengkap membuat custom cookie bar Blogger dengan desain responsif dan ikon menarik. Tingkatkan estetika dan privasi blog

Daftar Isi

Pernahkah kamu merasa kalau tampilan notifikasi cookie bar bawaan Blogger terlalu kaku dan kurang menyatu dengan desain blog yang sudah kamu bangun dengan susah payah? Banyak pemilik blog yang akhirnya mencari cara untuk mempercantik tampilan tersebut agar terlihat lebih menyatu dengan identitas visual mereka.

Salah satunya adalah blog ini, saya coba membuat custom cookie bar Blogger dengan versi tampilan yang lebih enak dilihat dan juga untuk memberikan kenyamanan lebih bagi para pengunjung bahwa blog ini benar-benar menjaga privasi mereka.

Dengan mengubah tampilan lebih estetik setidaknya akan membuat pengunjung merasa lebih betah dan percaya bahwa situs yang mereka buka dikelola secara profesional serta penuh perhatian pada setiap detail kecil.

Tentunya, kamu juga ingin memberikan kesan pertama yang menggoda, mulai dari header hingga bagian footer yang biasanya menjadi tempat paling pas untuk meletakkan pemberitahuan privasi yang lebih menarik.

Dengan tampilan cookie bar Blogger yang saya gunakan ini, sebenarnya sangat simpel, tapi menurut saya sih lebih menarik daripada tampilan defaultnya. Salah satu kelebihan custom cookie bar ini adalah sebagai pengganti dari cookie bar bawaan Blogger.

Jika kamu adalah seorang pelaku bisnis atau konten kreator yang peduli dengan user experience, maka langkah kustomisasi ini bisa dijadikan investasi waktu yang sangat baik untuk meningkatkan kredibilitas blog kamu.

Kelebihan Menggunakan Tampilan Kustom

Salah satu alasan utama kenapa saya menyarankan kamu beralih ke tampilan manual adalah fleksibilitas yang ditawarkannya, karena kamu bisa mengatur posisi persis di mana bar tersebut harus muncul.

Kalau bar bawaan biasanya sering kali muncul di atas dan menutupi navigasi, dengan modifikasi ini kamu bisa meletakkannya di pojok bawah secara elegan agar tidak menghalangi pandangan utama pembaca.

Apalagi jika ditambah ikon "cookie" yang imut juga memberikan sentuhan ramah yang membuat informasi privasi terasa tidak terlalu kaku atau menakutkan bagi orang awam.

Keuntungan Menggunakan Custom Cookie Bar

Menggunakan sistem notifikasi buatan sendiri memberikan fleksibilitas yang jauh lebih besar dibandingkan hanya mengandalkan fitur bawaan platform. Selain membuat blog kamu terlihat lebih profesional di mata pengunjung, ada beberapa manfaat teknis dan non-teknis yang bisa kamu dapatkan dengan menerapkan metode ini secara mandiri:

1. Kontrol Durasi Penayangan: Sistem kustom ini memungkinkan kamu untuk mengatur durasi waktu kapan notifikasi tersebut harus muncul kembali kepada pengunjung yang sama. Dengan memanfaatkan penyimpanan lokal di browser, kamu tidak perlu memberondong pengunjung dengan bar yang sama setiap kali mereka berpindah halaman di dalam blog kamu.
2. Meningkatkan Kenyamanan Pengguna: Hal ini tentu saja akan sangat meningkatkan kenyamanan mereka, karena mereka hanya perlu melakukan konfirmasi satu kali dan notifikasi tersebut akan menghilang sesuai dengan waktu yang telah kamu tentukan sendiri sebelumnya tanpa mengganggu navigasi.
3. Desain yang Konsisten: Kamu memiliki kebebasan penuh untuk menyesuaikan warna, jenis huruf, hingga ukuran bar agar benar-benar serasi dengan tema blog. Dengan begitu, custom cookie bar Blogger tidak akan terlihat seperti elemen asing yang menempel secara asal-asalan, melainkan bagian integral dari identitas visual situs kamu.
4. Optimasi Kecepatan Loading: Karena kode yang kita gunakan sangat ringkas dan dimuat secara asinkron, dampaknya terhadap kecepatan loading halaman sangatlah minim. Hal ini sangat penting bagi kamu yang sedang mengejar skor bagus di Core Web Vitals untuk mendukung performa SEO di mesin pencari.
5. Responsivitas yang Lebih Baik: Kamu bisa mengatur secara spesifik bagaimana tampilan bar tersebut saat dibuka di perangkat mobile. Kamu bisa memastikan tombol-tombolnya cukup besar untuk ditekan jari dan teksnya tetap mudah dibaca tanpa harus menutupi seluruh konten utama di layar ponsel yang sempit.
6. Transparansi Brand yang Kuat: Dengan menambahkan ikon unik atau gaya bahasa yang sesuai dengan karakter blogmu, kamu menunjukkan bahwa kamu peduli pada detail. Ini membangun kepercayaan pengunjung bahwa situs kamu dikelola secara serius dan menghargai privasi mereka dengan cara yang lebih elegan.

Dengan semua keunggulan tersebut, kamu tidak hanya sekadar memenuhi kewajiban hukum atau etika digital saja, tetapi juga memberikan pengalaman berselancar yang jauh lebih baik. Selalu ingat bahwa detail-detail kecil seperti inilah yang sering kali membedakan antara blog amatir dengan blog yang dikelola secara profesional oleh seorang kreator konten sejati.

Persiapan dan Struktur Kode

Sebelum melompat ke bagian pemasangan, kamu perlu memahami bahwa notifikasi ini terbagi menjadi tiga bagian utama yang saling bekerja sama untuk menghasilkan performa yang maksimal.

Bagian pertama adalah gaya visual yang akan menentukan seberapa cantik bar tersebut terlihat di berbagai jenis layar, baik itu komputer meja, tablet, maupun ponsel. Bagian kedua adalah kerangka fisik yang menjadi tempat teks dan tombol berada, sedangkan bagian terakhir adalah logika yang mengatur kapan bar tersebut harus tampil atau bersembunyi.

Semua kode ini dirancang sedemikian rupa agar tetap ringan sehingga tidak akan membebani kecepatan loading blog kamu yang sudah dioptimasi untuk mesin pencari.

Kode CSS

#custom-cookie-bar{position:fixed;bottom:20px;left:20px;max-width:400px;background:#fff;color:#333;padding:25px;box-shadow:0 10px 25px rgba(0,0,0,.15);border-radius:12px;z-index:999999;display:none;align-items:flex-start;font-family:sans-serif;font-size:13.5px;line-height:1.5;border:1px solid #eee;animation:slideUp .5s ease}
@keyframes slideUp{from{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}
#custom-cookie-bar img{width:60px;height:auto;margin-right:15px;flex-shrink:0}
.cookie-content{flex-grow:1}
.cookie-buttons{margin-top:15px;display:flex;gap:10px}
.cookie-btn{padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:600;text-decoration:none;font-size:12px;transition:.3s;display:inline-block;text-align:center}
.btn-learn{background:transparent;color:#4285f4;border:1px solid #4285f4}
.btn-learn:hover{background:#f1f5fe}
.btn-gotit{background:#4285f4;color:#fff;border:none}
.btn-gotit:hover{background:#357abd}
@media (max-width:480px){#custom-cookie-bar{left:15px;right:15px;bottom:15px;max-width:none;flex-direction:column;align-items:center;text-align:center}#custom-cookie-bar img{margin-right:0;margin-bottom:15px}.cookie-buttons{justify-content:center;width:100%}.cookie-btn{flex:1}}

Kode HTML

<div id="custom-cookie-bar">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh34IfDBSLBt4vrS6PUwNxiy-_RE921dUWNT_pb0IHEwx_MFsPTVcJlUvGHXx1p2kLh9jKV8Ycagi3nTZz79kaTG3R-lEDA6vleJHvRlMFr-z-gI6KK8-MihIPWEl-ZryXhTReRZ4c7h3hG2E2Pse3ELva7zen1ojXe5YbnFsNeluLWZLf-kfqPnapKSDE/s1600/cookie.png" alt="Cookie"/>
  <div class="cookie-content">
    This site uses cookies from Google to deliver its services and to analyze traffic. Your IP address and user-agent are shared with Google along with performance and security metrics to ensure quality of service, generate usage statistics, and to detect and address abuse.
    <div class="cookie-buttons">
      <a class="cookie-btn btn-learn" href="https://www.blogger.com/go/blogspot-cookies" target="_blank" rel="noopener noreferrer">Learn More</a>
      <button class="cookie-btn btn-gotit" onclick="acceptCookies()">Got It</button>
    </div>
  </div>
</div>

Kode Script

//<![CDATA[
"use strict";
var cookieChoices = {};
const cookieExpiryDays = 30;
function acceptCookies(){
    const e = new Date;
    localStorage.setItem("cookieAcceptedTime", e.getTime());
    document.getElementById("custom-cookie-bar").style.display = "none"
}
function checkCookieStatus(){
    const e = localStorage.getItem("cookieAcceptedTime"),
        t = new Date,
        n = document.getElementById("custom-cookie-bar");
    if (e) {
        if ((t.getTime() - parseInt(e)) / (1e3 * 60 * 60 * 24) > cookieExpiryDays) {
            localStorage.removeItem("cookieAcceptedTime");
            n.style.display = "flex"
        }
    } else {
        n.style.display = "flex"
    }
}
const checkExist = setInterval((function() {
    document.getElementById("custom-cookie-bar") && (checkCookieStatus(), clearInterval(checkExist))
}), 100);
//]]>

Cara Pemasangan yang Praktis dan Cepat

Untuk memasang notifikasi ini, kamu tidak menambhakannya kedalam kode template, cukup melalui menu Tata Letak yang sudah disediakan oleh Blogger. Berikut adalah langkah-langkah praktis yang bisa kamu ikuti:

1. Masuk ke akun Blogger kamu dan pilih menu Tata Letak yang ada di panel sebelah kiri.
2. Cari bagian Sidebar atau Footer, lalu klik pada pilihan Tambah Widget atau Add a Gadget.
3. Pilih widget jenis HTML/JavaScript dari daftar pop-up yang muncul di layar kamu.
4. Berikan judul widget jika perlu (atau kosongkan saja agar lebih rapi), lalu masukkan semua gabungan kode CSS, HTML, dan Script ke dalam kolom konten.
5. Klik tombol Simpan pada widget tersebut, lalu jangan lupa klik ikon simpan di pojok kanan bawah halaman Tata Letak untuk menerapkan perubahan secara permanen.

Meskipun kamu memasang widget ini di bagian sidebar atau footer, custom cookie bar Blogger ini tetap akan muncul melayang di posisi yang sudah kita tentukan melalui kode CSS sebelumnya.

Didalam script ini saya menambahkan durasi dan penyimpanan lokal atau yang biasa dikenal dengan localStorage dalam pembuatan custom cookie bar Blogger ini sangatlah efisien dibandingkan dengan metode lama. Kamu tidak perlu khawatir data tersebut membebani server karena semuanya tersimpan di perangkat pengunjung masing-masing secara mandiri.

Metode ini juga sangat aman dan mengikuti standar web modern yang direkomendasikan untuk menjaga performa situs agar tetap berada di jalur hijau pada pengujian kecepatan akses halaman yang sering dilakukan oleh para pengembang.

Uji Coba dan Demo

Jangan lupa untuk melakukan pengujian melalui berbagai perangkat, mulai dari laptop hingga ponsel Android atau iPhone milik teman kamu untuk memastikan responsivitasnya berjalan baik.

Di layar ponsel, kamu akan melihat perubahan tata letak secara otomatis di mana ikon akan berpindah ke posisi atas dan teks serta tombol akan menyesuaikan lebarnya secara penuh. Desain yang fleksibel seperti ini akan sangat membantu kamu dalam mempertahankan skor SEO yang bagus karena Google sangat menyukai situs yang ramah terhadap perangkat mobile atau ponsel pintar.

Demo

Gunankan link blog ini: https://www.namablogmu.com/?gl=be, ganti dengan alamat blog kamu dan buka di mode incognito atau mode samaran untuk melihat hasilnya.

Cookie Bar Ganda

Jika sebelumnya kamu sudah memasang cookie bawaan Blogger dan ingin memasang yang versi custom ini, lanjutkan saja memasang yang custom ini jika kamu mengingkannya. Kamu tidak perlu khawatir akan ada 2 notifikasi yang akan tampil karena di script custom ini, saya sudah mematikan fungsi script bawaan Blogger yaitu dengan menambahkan kode ini var cookieChoices = {};

Semoga dengan panduan ini kamu bisa memiliki tampilan notifikasi yang lebih elegan dan tidak mengganggu kenyamanan mata saat orang lain sedang asyik membaca tulisan kamu.