Cara Modifikasi Tampilan Cookies Bar dengan CSS

Baru-baru ini Google telah memperbarui tentang kebijakan privasi termasuk untuk pengguna Blogger yang menggunakan cookie untuk mengumpulkan data dari setiap pengunjung situs Anda.

Undang-undang mengenai cookie ini ditujukan untuk pengunjung dari Uni Eropa tentang cookie yang digunakan dan data yang dikumpulkan di blog.

Oleh karena itu undang-undang baru ini mewajibkan Anda untuk mendapatkan persetujuan pengunjung ketika berada di blog Anda.

Blogger sudah menambahkan fitur pemberitahuan tentang penggunaan cookie kepada setiap pengunjung khususnya dari Uni Eropa.

Jadi misalnya Anda berasal dari negara-negara Uni Eropa kemudian mengunjungi situs ini maka akan muncul sebuah notifikasi bahwa blog ini menggunakan cookie.

Berhubungan dengan blogger yang merupakan milik google artinya jika Anda memiliki situs yang dibuat dari blogger, mau itu dengan domain blogspot atau sudah menggunakan top level domain (TLD) tetap saja situs tersebut tidak sepenuhnya milik Anda karena hostingnya masih dari google.

Itulah sedikit penjelasan mengenai kebijakan data yang sedang hangat dibicarakan saat ini.

Nah, berhubungan dengan itu disini saya akan menjelaskan cara memodifikasi tampilan cookies bar dengan menggunakan kode css.

Melakukan modifikasi pada pemberitahuan atau notifikasi cookie di blogger dengan tujuan agar terlihat lebih keren dan mudah dilihat oleh pengunjung merupakan hal yang baik.

Perlu diketahui pemberitahuan cookies bar hanya akan terlihat oleh pengunjung yang berasal dari negara Uni Eropa, jadi kalau selain dari negara tersebut kita tidak bisa melihat cookies bar ini di blogger.

Untuk mempercantik tampilan cookies bar ini Anda bisa melakukan modifikasi dengan menggunakan kode css, untuk lebih jelasnya silahkan ikuti langkah-langkahnya di bawah ini.

Cara Modifikasi Tampilan Cookies Bar di Blogger

Seperti yang sudah saya katakan sebelumnya platform blogger menggunakan cookie untuk mengumpulkan data pengunjung.

Jika Anda menggunakan IP dari salah satu negara Uni Eropa kemudian mengunjungi salah satu blog yang ada, maka akan muncul sebuah notifikasi atau pemberitahuan tentang cookie seperti di bawah ini.

This site uses cookies from Google to deliver its services and to analyse traffic. Your IP address and user agent are shared with Google, together with performance and security metrics, to ensure quality of service, generate usage statistics and to detect and address abuse.

Tampilan defaultnya seperti gambar di bawah ini:

Tampilannya sangat sederhana dan berada dibagian atas blog Anda, untuk mempercantik tampilannya kita perlu menambahkan kode css berikut ini.

Versi Terang (Light)

Silahkan pasang kode css ini di atas kode ]]></b:skin> atau </style>

/* Custom Cookies Info Light */
.cookie-choices-info{background-color:rgba(255,255,255,.99)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-transform:translateZ(0)}
.cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#222!important}
.cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#999!important;transition:all .1s linear}

Versi Gelap (Dark)

Silahkan pasang kode css ini di atas kode ]]></b:skin> atau </style>

/* Custom Cookies Info Dark */
.cookie-choices-info{background-color:rgba(56,66,75,.97)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;-webkit-transform:translateZ(0)}
.cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#cee6ea!important}
.cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#282f36!important;transition:all .1s linear}

Jika Anda ingin mengubah warnanya silahkan gunakan tool Color Picker.

Itulah artikel mengenai cara modifikasi tampilan cookies bar dengan css, semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini