Ditulis oleh: Ditulis pada: 7/11/2020
Memodifikasi Blogger Cookies Bar - Postingan ini saya buat untuk melanjutkan postingan saya tentang cookies bar yang kemarin saya posting. Salah satu alasan banyak blogger yang menggunakan cookies bar dari pihak ketiga yaitu karena tampilan cookies bar blogger yang kurang menarik. Ada juga yang beralasan karena cookies bar blogger muncul di atas blog sehingga menutupi header blog, terutama untuk blog yang menggunakan header melayang.
Padahal dengan menggunakan custom cookies bar dari pihak ketiga itu akan menambah loading blog dari pemuatan js dan CSS dari widget tersebut.
Belum lagi Admin lupa menonaktifkan blogger cookies bar ketika memasang custom cookies bar, sehingga cookies barnya muncul double.
Modifikasi Blogger Cookies Bar
Untuk itu, agar tidak perlu lagi memasang cookies bar dari pihak ketiga yang akan membebani loading blog, saya membagikan cara untuk memodifikasi cookies bar blogger agar tampilannya menjadi lebih menarik, tidak kalah dengan tampilan custom cookies bar.
Dengan cookies bar blogger, maka ini tidak akan membebani loading blog karena cookies bar ini hanya muncul pada pengunjung dari negara-negara Uni Eropa saja.
Jika Anda ingin melihat tampilan cookies bar blogger blog Anda (jika Anda tidak menonaktifkannya), silahkan tambahkan kode ?gl=fr di akhir URL blog Anda seperti ini https://www.bloganda.com/?gl=fr (Anda berpura-pura sebagai pengunjung dari Francis).
Blogger Cookies Bar Melayang Di Bawah Blog
Modifikasi yang pertama ini akan memindahkan cookies bar blogger menjadi melayang di bawah dan membuat tombol yang tampak seperti gambar di atas.
Untuk modifikasi ini, saya sudah membagikannya kemarin. Bagi yang tertarik untuk mencobanya, silahkan masuk ke postingan di link berikut.
Blogger Cookies Bar Melayang Di Pojok Kiri Bawah Blog
Modifikasi yang kedua ini akan membuat Blogger Cookies Bar melayang di pojok kiri bawah blog seperti yang tampak pada gambar di atas. Keren bukan?
Jika Anda ingin mencoba style di atas, silahkan gunakan CSS di bawah ini.
/* Blogger Cookies Bar */
#cookieChoiceInfo{background-color:#222;padding:10px 10px 40px;top:unset;font-family:"Helvetica Neue Light",HelveticaNeue-Light,"Helvetica Neue",Calibri,Helvetica,Arial;width:300px;left:10px;bottom:10px;border-radius:5px;overflow:hidden}
#cookieChoiceInfo .cookie-choices-text{margin:0 0 5px;font-size:16px;color:#fff;text-align:left;}
#cookieChoiceInfo .cookie-choices-inner{position:static}
#cookieChoiceInfo .cookie-choices-buttons{margin:0;display:block}
#cookieChoiceInfo .cookie-choices-button{color:#f1d600;text-transform:none;transition:all .2s linear;font-weight:400;display:block;text-align:left;margin:0 0 10px;padding:0}
#cookieChoiceInfo .cookie-choices-button:nth-child(2){color:#000;text-align:center;background-color:#f1d600;padding:8px 18px;position:absolute;bottom:0;left:0;right:0;margin:0}
#cookieChoiceInfo .cookie-choices-button:hover{color:#e9eef0}
#cookieChoiceInfo .cookie-choices-button:nth-child(2):hover{background-color:#e9eef0;color:#000}
@media screen and (max-width:425px){#cookieChoiceInfo{width:calc(100% - 20px)}}Blogger Cookies Bar Melayang Di Pojok Kanan Bawah Blog
Modifikasi yang ketiga ini akan membuat Blogger Cookies Bar melayang di pojok kanan bawah blog seperti yang tampak pada gambar di atas. Keren juga bukan?
Jika Anda ingin mencoba style di atas, silahkan gunakan CSS di bawah ini.
/* Blogger Cookies Bar */
#cookieChoiceInfo{background-color:#222;padding:10px 10px 40px;top:unset;font-family:"Helvetica Neue Light",HelveticaNeue-Light,"Helvetica Neue",Calibri,Helvetica,Arial;width:300px;left:unset;right:10px;bottom:10px;border-radius:5px;overflow:hidden}
#cookieChoiceInfo .cookie-choices-text{margin:0 0 5px;font-size:16px;color:#fff;text-align:left;}
#cookieChoiceInfo .cookie-choices-inner{position:static}
#cookieChoiceInfo .cookie-choices-buttons{margin:0;display:block}
#cookieChoiceInfo .cookie-choices-button{color:#f1d600;text-transform:none;transition:all .2s linear;font-weight:400;display:block;text-align:left;margin:0 0 10px;padding:0}
#cookieChoiceInfo .cookie-choices-button:nth-child(2){color:#000;text-align:center;background-color:#f1d600;padding:8px 18px;position:absolute;bottom:0;left:0;right:0;margin:0}
#cookieChoiceInfo .cookie-choices-button:hover{color:#e9eef0}
#cookieChoiceInfo .cookie-choices-button:nth-child(2):hover{background-color:#e9eef0;color:#000}
@media screen and (max-width:425px){#cookieChoiceInfo{width:calc(100% - 20px)}}Bagaimana, sekarang blogger cookies bar-nya sudah keren, bukan?
Sekarang sudah tidak ada alasan lagi untuk tidak menggunakan cookies bar blogger ini. Anda juga bisa mencoba mengganti background, warna text, atau tombolnya agar lebih sesuai lagi dengan blog Anda.
Dan jika Anda ingin merubah kalimatnya, silahkan tambahkan javascript berikut dan simpan di atas kode </body>
<script>
//<![CDATA[
cookieOptions = {
msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",
link: "https://www.blogger.com/go/blogspot-cookies",
close: "Got it!",
learn: "Learn More" };
//]]>
</script>Atau Anda bisa menggunakan kalimat lain untuk pesan, link, dan lainnya. Untuk link, Anda bisa menggunakan URL halaman Privacy Policy blog Anda.
Semoga bermanfaat.