Cara Merubah Warna Address Bar Berubah Setiap Berpindah Page di Blogger

Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial Cara Merubah Warna Address Bar Berubah Setiap Berpindah Page di Blogger dengan mudah.

Merubah warna address bar di blog sangat menarik apalagi jika setiap berpindah page halaman atau post dan label bisa berubah tentu lebih menarik.

Sebagai contoh jika kalian masuk ke kategori blogging maka warna address bar akan berubah menjadi warna biru begitupula jika kalian masuk ke kategori tekno maka warna addresspun berubah lagi menjadi warna merah, dan jika berpindah ke homepage maka addres akan merubah warnanya menjadi ungu.

Sangat keren kan? Pada artikel kali ini saya akan membuat seperti itu membuat tampilan blog lebih menarik dan membuat pengunjung lebih percaya diri saat membaca artikel pada blog kita.

Untuk demonya silahkan klik tombol demo di bawah ini dengan perangkat mobile kalian

Demo

Untuk mengubah warna pada address bar bisa berubah pada blog sangat mudah, buat kalian yang mau mencobanya silahkan simak tutorialnya di bawah ini.

---

Cara Merubah Warna Address Bar Berubah Setiap Berpindah Page di Blogger

Disini saya akan membagi 2 cara yaitu:

1. Cara Merubah Warna Address Bar Setiap Pindah Page di Blogger
2. Cara Merubah Warna address Bar di Setiap Page dan Label Blogger

1. Cara Merubah Warna Address Bar Setiap Pindah Page di Blogger

• Silahkan masuk ke blogger lalu pilih tema dan edit html
• Salin kode di bawah ini dan letakan di atas kode </head>

<!-- 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'/>

• Simpan template kalian dan selesai.

Catatan:
Silakan di ganti pada KODE_WARNA_DI_HOMEPAGE dan lainnya, sesuaikan dengan warna yang kalian inginkan.

Untuk contoh penulisannya kalian bisa lihat di bawah ini:

<!-- 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. Cara Merubah Warna address Bar di Setiap Page dan Label Blogger

• Silahkan masuk ke blogger lalu pilih tema dan edit html
• Salin kode di bawah ini dan letakan di atas kode </head>

<!-- 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'/>

• Simpan template kalian dan selesai.

Catatan:
Silahkan ganti NAMA_LABEL_A dengan nama Label kalian dan ganti pada KODE_WARNA_LABEL_A dengan kode warna yang kalian inginkan, begitupun dengan Nama Label B dan Kode Warna Label B ganti dengan keinginan kalian.

• Simpan template kalian dan selesai

Untuk contoh penulisannya silahkan lihat di bawah ini:

<!-- 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 ada kendala dalam memasang script silahkan berkomentar nanti saya akan bantu untuk pemasangan maupun untuk menambahkan script tersebut, jangan lupa untuk berkomentar.

Sekian dulu tutorial singkat tentang Cara Merubah Warna Address Bar Berubah Setiap Berpindah Page di Blogger semoga bermanfaat dan salam blogger.

Baca juga :

Go to Link