Modifikasi Tampilan Cookies Bar bawaan Blogger dengan CSS

Change Cookies Notification bar for Blogger

Blogger baru-baru ini mengeluarkan fitur baru, namanya Cookies Notification bar, dimana ini akan tampil jika domain yang anda kunjungi berbeda dari negara anda, misalnya zonahentongerz.blogspot.co.id, jika anda mengunjungi zonahentongerz.blogspot.co.uk, maka Cookies notification bar akan muncul dibagian kanan bawah (floating/melayang). Saya Menggunakan tutorial itu di 'Memasang EU Notifikasi Cookies Bar di Blog'. Akan tetapi, di postingan kali ini berbeda dengan postingan tersebut, karena disini akan merubah tampilan Cookies Bar asli bawaan Blogger, murni dengan CSS.

Disini ada 2 pilihan Thema, yaitu background Gelap (Dark) dan Terang (Light). Bagi yang ingin mencoba, silahkan ikuti cara / tutorial mengganti / modifikasi tampilan Cookies Bar berikut ini :

1. Blogger > Template > HTML > Co+Pas kode dibawah ini, tepat diatas kode ]]></b:skin> atau </style>

CSS Background Gelap (Dark)

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

CSS Background Terang (Light)

/* 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 silahkan dibuka blog dengan domain khusus (ccTLD) wilayah eropa, seperti NamaBlogKamu.blogspot.uk, blogspot.pt, dll.

Contoh : zonahentongerz.blogspot.co.uk

Sekian terima kasih

Sumur : http://www.arlinadzgn.com/2015/08/modifikasi-tampilan-cookies-bar-dengan-css.html