Modifikasi Tampilan Cookies Bar dengan CSS

8/20/2015
Modifikasi Tampilan Cookies Bar dengan CSS

Modifikasi Tampilan Cookies Bar dengan CSS - Iseng-iseng memodifikasi tampilan CSS default cookies bar blogger pada blog demo template Vikka dan hasilnya tampilan cookies bar tersebut bisa disesuaikan dengan keinginan sobat agar terlihat lebih menarik.

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 sebelum ]]></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://arlinafix.blogspot.com menjadi http://arlinafix.blogspot.co.uk atau http://arlinafix.blogspot.pt


Selamat mencoba.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

30 comments

PERTAMAX diamankan :D
BTW ini aman gak mba ?? Ane pengen coba...

Balas

Mantap (Y) apa gue yang pertama koment di sini ?

Balas

Trims, yang ke dua

Balas

Pakai ini sist -webkit-transform:translateZ(0) biar mulus pas scroll

.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);}

Balas

waa ga ngerti mbak, tapi yang penting udah baca dan ninggal jejak di sini

Balas

Thanks Arlina I loved :D

Balas

Wah, keren juga nih

Balas

Cookies bar ini yang google wajibkan ada tuk setiap blog yah?
Makasih banyak nih mbak, dari kemarin saya nyari pasang ginian dan akhirnya malah dapat disini :D

Balas

Ini guna nya buat apa ya mbak ? Apa Pengaruh nya di blog kita ?

Balas

Trims, sudah ditambahkan

Balas

Hanya sedikit modifikasi aja :)

Balas

Trims, silakan dicicipi

Balas

Iya mas, untuk blogspot sudah terpasang otomatis dari blogger. Di sini saya hanya memodifikasi tampilannya aja

Balas

Ini untuk mengedit tampilan cookies bar yang muncul ketika ada pengunjung dari eropa

Balas

I really like it, Thank you

Balas

Cara mengaktifkan cookiesnya dari mana? Punya saya nggak muncul Mbak. ;-(

Balas

bagaimana cara cek untuk blog yang domainnya sdh di custom mba ?, semua domain khusus (ccTLD) sdh redirect ke customnya.

contoh: www.umarazmar.com

Balas

wih,,, udah masang kak di blog saya..
keren tampilannya.. makasih ya kak..

Balas

Yes, your welcome

Balas

Kl masih blogspot pasti muncul ketika pertama kali mengunjungi blog dengan ccTLD seperti di atas

Balas

Kl blog TLD lebih baik pakai yang custom seperti yang pernah dibagikan blog Kompi Ajaib

Balas

ok, thanks mba,.. meluncur ke kang adhy dlu.. hehehe :)
eh, oia mba,.. ijin, ambil bbrapa tutorial dan web toolsnya boleh gk ?

Balas

Wih, mantap. udah pasang n coba buka pake VPN jerman. Simple but cool.

Thank's ya.

Balas

Kalau cookies barnya kaya mba arlina gimna thu?
kayanya simple gitu punya mba arlina :D

Balas

Pakai plug in tambahan lg buat cookies

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.