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 salah
Perlu
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.
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 Statis
Gunakan 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'/>
2. Script Mengubah
Warna Address Bar di Setiap Halaman Label
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.