Ubah Warna Address Bar Setiap Pindah Page di Blogger. Bagaimana cara mengubah warna address bar browser setiap pindah page di blogger. Merubah warna address bar agar berbeda setiap label atau lokasi page. Dengan mengubah warna address bar setiap label bisa menambah daya tarik tersendiri ke blog.
Contoh ubah warna address bar sesuai page atau label adalah semisal kita masuk kategori Blogging maka warna address bar biru, kemudian jika kita masuk kategori Berita maka address bar akan berwarna merah, begitu juga dengan lokasi page, jika kita masuk ke homepage address bar akan berwarna hijau, jika masuk menu post akan berwarna kuning.
Cukup menarik bukan ? kali ini kita akan membuat seperti itu, jadi simak terus artikel ini. Agar mudah memahami tutorial ini, anda bisa membaca terlebih dahulu List Tag Kondisional Blogger Terbaru untuk Pemula, karena kita akan menggunakan tag kondisional blogger untuk menerapkan fitur unik ini.
Ubah Warna Address Bar Setiap Pindah Page di Blogger
Mengubah warna address bar berubah menyesuaikan warna page atau label sangatlah mudah. Untuk menerapkan fitur ini menggunakan operator yaitu Blogger Ternary Operator. Operator Ternary ini hampir sama seperti if else namun ini dibuat lebih ringkas dan mudah dipahami. Penulisan Sintak Operator Ternary Blogger sebagai berikut.
Boolean ? nilai jika benar : nilai jika salahPerlu dicatat, Operator ternary bisa berjalan di attribute html blogger dengan menambahkan expr: di awal nama attribute, jika tidak maka akan terjadi error. Contoh penulisannya sebagai berikut.
<meta expr:content='...' name='theme-color'/>Oke langsung saja berikut cara pasang dan ubah warna address bar sesuai page dan label di blogger.
- Buka Blogger.com
- Silakan Login, jika anda belum mempunyai akun silakan bisa daftar terlebih dahulu dan jika belum mempunyai blog silakan bisa buat terlebih dahulu
- Masuk ke Dashboard Blogger.
- Buka Menu Tema.
- Klik Tanda Panah Kecil di sebelah Sesuaikan.
- Pilih Edit HTML.
- Jika anda sebelumnya sudah memasang tag meta warna address bar, Anda bisa bisa ubah dengan script dibawah ini. Jika Belum memasangnya, silakan bisa cari kode
<head>kemudian tambahkan kode script dibawah ini.
Script Ubah warna address bar di setiap page dan label blogger
Dalam script ini saya menggunakan tag untuk tampil di semua browser, jadi scriptnya akan rada panjang. Berikut script kode warna untuk setiap label atau page di blogger.
1. Script Mengubah Warna Address Bar di Homepage, di Halaman Post, di Halaman StatisGunakan script ini untuk mengubah warna address bar di halaman homepage, halaman post dan halaman statis di blogger.
<!-- Color Address Bar -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta expr:content='data:view.isHomepage ? "KODE_WARNA_DI_HOMEPAGE" : data:view.isPost ? "KODE_WARNA_DI_POST" : data:view.isPage ? "KODE_WARNA_DI_STATIS" : "KODE_WARNA_DI_DEFAULT"' name='theme-color'/>
<meta expr:content='data:view.isHomepage ? "KODE_WARNA_DI_HOMEPAGE" : data:view.isPost ? "KODE_WARNA_DI_POST" : data:view.isPage ? "KODE_WARNA_DI_STATIS" : "KODE_WARNA_DI_DEFAULT"' name='msapplication-navbutton-color'/>
<meta expr:content='data:view.isHomepage ? "KODE_WARNA_DI_HOMEPAGE" : data:view.isPost ? "KODE_WARNA_DI_POST" : data:view.isPage ? "KODE_WARNA_DI_STATIS" : "KODE_WARNA_DI_DEFAULT"' name='apple-mobile-web-app-status-bar-style'/>
<meta expr:content='data:view.isHomepage ? "KODE_WARNA_DI_HOMEPAGE" : data:view.isPost ? "KODE_WARNA_DI_POST" : data:view.isPage ? "KODE_WARNA_DI_STATIS" : "KODE_WARNA_DI_DEFAULT"' name='msapplication-TileColor'/>Keterangan :
Silakan ganti KODE_WARNA_DI_HOMEPAGE dan lainnya, sesuai dengan keinginan anda, gunakan kode warna HEX, contoh #ffffff.
Contoh penulisan script mengubah warna address bar di halaman homepage, halaman post dan halaman statis di blogger.
<!-- Color Address Bar -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta expr:content='data:view.isHomepage ? "#de0b84" : data:view.isPost ? "#2196f3" : data:view.isPage ? "#f44336" : "#cddc39"' name='theme-color'/>
<meta expr:content='data:view.isHomepage ? "#de0b84" : data:view.isPost ? "#2196f3" : data:view.isPage ? "#f44336" : "#cddc39"' name='msapplication-navbutton-color'/>
<meta expr:content='data:view.isHomepage ? "#de0b84" : data:view.isPost ? "#2196f3" : data:view.isPage ? "#f44336" : "#cddc39"' name='apple-mobile-web-app-status-bar-style'/>
<meta expr:content='data:view.isHomepage ? "#de0b84" : data:view.isPost ? "#2196f3" : data:view.isPage ? "#f44336" : "#cddc39"' name='msapplication-TileColor'/>Gunakan script ini jika anda ingin mengubah warna sesuai label blogger.
<!-- Color Address Bar -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta expr:content='data:view.search.label == "NAMA_LABEL_A" ? "KODE_WARNA_LABEL_A" : data:view.search.label == "NAMA_LABEL_B" ? "KODE_WARNA_LABEL_B" : "KODE_WARNA_DI_DEFAULT"' name='theme-color'/>
<meta expr:content='data:view.search.label == "NAMA_LABEL_A" ? "KODE_WARNA_LABEL_A" : data:view.search.label == "NAMA_LABEL_B" ? "KODE_WARNA_LABEL_B" : "KODE_WARNA_DI_DEFAULT"' name='msapplication-navbutton-color'/>
<meta expr:content='data:view.search.label == "NAMA_LABEL_A" ? "KODE_WARNA_LABEL_A" : data:view.search.label == "NAMA_LABEL_B" ? "KODE_WARNA_LABEL_B" : "KODE_WARNA_DI_DEFAULT"' name='apple-mobile-web-app-status-bar-style'/>
<meta expr:content='data:view.search.label == "NAMA_LABEL_A" ? "KODE_WARNA_LABEL_A" : data:view.search.label == "NAMA_LABEL_B" ? "KODE_WARNA_LABEL_B" : "KODE_WARNA_DI_DEFAULT"' name='msapplication-TileColor'/>Keterangan :
Silakan ganti NAMA_LABEL_A sesuai dengan nama label yang anda inginkan contoh "blog" dan KODE_WARNA_LABEL_A untuk warna label, gunakan kode warna HEX. Ganti juga untuk nama label B dan kode warna yang B sesuai keinginan anda.
Contoh penulisan script mengubah warna address bar di setiap halaman label
<!-- Color Address Bar -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta expr:content='data:view.search.label == "info" ? "#e91e63" : data:view.search.label == "blog" ? "#2196f3" : "#ff9800"' name='theme-color'/>
<meta expr:content='data:view.search.label == "info" ? "#e91e63" : data:view.search.label == "blog" ? "#2196f3" : "#ff9800"' name='msapplication-navbutton-color'/>
<meta expr:content='data:view.search.label == "info" ? "#e91e63" : data:view.search.label == "blog" ? "#2196f3" : "#ff9800"' name='apple-mobile-web-app-status-bar-style'/>
<meta expr:content='data:view.search.label == "info" ? "#e91e63" : data:view.search.label == "blog" ? "#2196f3" : "#ff9800"' name='msapplication-TileColor'/>Jika anda bisa memami else if di dalam operator ternary blogger maka anda bisa mengembangkannya menjadi banyak pilihan label, nama label c dan warna label c dan seterusnya.
- Setelah anda memilih script untuk dipasang, kemudian simpan anda bisa menyimpannya dengan menekan tombol save di kanan atas.
- Selesai, anda bisa mencobanya.
Untuk demonya anda bisa mengunjungi disini. Jika ada kendala dalam pemasangan script atau anda ingin menambah jumlah script logika ternary setiap label anda bisa meminta di kolom komentar, nanti akan saya coba bantu buatkan. Jadi jangan lupa tinggalkan komen jika bermanfaat.
Mungkin itu kurang lebihnya saya minta maaf semoga dapat bermanfaat, sekian dan terima kasih.
mantap gan
BalasHapusSiap gan.. 😁👍
Hapus