Mengubah Tampilan Cookies Bar dengan CSS

Mengubah Tampilan Cookies Bar dengan CSS - Seperti yang sudah saya bahas sebelumnya pada beberapa artikel yang lalu tentang cookie dan cache ini (bagi sobat yang belum membacanya), silahkan dibaca juga. Pada kesempatan kali ini saya akan berbagi sedikit tips berkaitan dengan cookie tersebut.

Tutorial kali ini merupakan hasil dari mbak Arlina Design, seperti yang kita tahu cookie adalah hal yang cukup penting bagi sebuah website karna dengan adanya cookie, dapat membuat proses loading blog kita menjadi lebih cepat. Sebab, website tidak akan meloading kembali gambar atau video dari awal lagi, tetapi sudah ada di cookie di browser kita.

Baca Juga:

• Notifikasi Tentang Cookie di Negara Uni Eropa
• Cara Menghapus Cache dan Cookie

Apakah berbahaya mengedit tampilan CSS default cookies bar blogger ini?

Tentu saja tidak, karena yang diedit hanya tampilan saja. Kecuali jika sobat menghilangkan atau menyembunyikan cookies bar tersebut, mungkin itu yang akan berbahaya bagi blog sobat.

Di sini Saya akan memberikan dua pilihan tema yaitu background gelap dan terang. Bagi yang ingin mencobanya, silakan ikuti langkah sederhana berikut ini :

1. Login ke Blogger > Template > Edit HTML > Tambahkan kode di bawah ini diatas ]]></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}

/* 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}

2. Simpan template dan silakan sobat buka blog dengan menggunakan domain khusus (ccTLD) wilayah eropa, seperti blogspot.it, blogspot.com.es, blogspot.co.uk, blogspot.pt, dan lain sebagainya.

Contoh : http://rumahdesigner.blogspot.com menjadi http://rumahdesigner.blogspot.co.uk atau http://rumahdesigner.blogspot.pt

Live Demo

Semoga bermanfaat.

Referensi code: http://www.arlinadzgn.com