Modifikasi Tampilan Cookies Bar dengan CSS - Arlina Design
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.

Modifikasi Tampilan Cookies Bar dengan CSS

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.

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo