Cara Mengubah Warna Address Bar Web di Browser Mobile - Kali ini Saya akan memberikan tutorial mengenai trik bagaimana agar warna address bar website di browser mobile bisa berubah sesuai warna tampilan blog Kamu. Ya, mungkin banyak ya tutorial serupa mengenai cara merubah warna address bar ini, tapi ya gapapa lah karena Saya pingin share ini. Lagian Saya juga baru saja praktikkan trik ini.
Nah, bagi pembaca setia rekblogging ketika mengakses blog ini via smartphone akan menjumpai address bar color yang sama dengan warna header blog, jadi jangan kaget ya kalo ada yang baru di tampilan blog ini hehe. Atau mungkin beberapa orang pernah mengakses blog yang tampilan address bar situsnya mengikuti warna tampilan blognya. Bagi yang belum tahu caranya mengganti warnanya, yuk simak tutorialnya.
Sebelum ke tutorialnya, ngomong-ngomong apa Kamu tahu address bar itu yang seperti apa? Jangan-jangan nanti sudah dijelasin tutorial cara membuat warna addressbar browser mobile mengikuti tampilan blog tetapi tidak tahu addres bar itu yang mana?
Baca juga: Cara Membuat Pop Up Facebook Responsive pada Blog
Baca juga: Cara Membuat Pop Up Facebook Responsive pada Blog
Baik akan Saya jelaskan terlebih dahulu address bar itu apa, kalo sudah tahu bisa skip paragraf ini. Address bar adalah kolom sempit bagian dari halaman web browser yang mempunyai fungsi menampilkan URL dari halaman web yang sedang diakses, letakknya di bagian atas browser.
Sebagai gambaran, berikut hasil sebelum dan setelah address bar browser berganti warna
Sebagai gambaran, berikut hasil sebelum dan setelah address bar browser berganti warna
tampilan sebelum ganti warna
tampilan setelah ganti warna
Cara Mengubah Warna Address Bar Situs di Browser HP
Untuk mengubah atau mengganti warna address bar website di browser mobile tidaklah sulit. Tinggal memasang kode scriptnya di template blog Kamu dan lihat hasilnya. Berikut beberapa script untuk merubah warna address bar untuk beberapa browser yaitu Chrome, Opera, Firefox, Safari IOS, dan browser bawaan HP.
Baca juga: Membuat Contact Form di Blog dengan Mudah
Merubah Warna Address Bar pada Browser Chrome, Opera, dan Firefox
Baca juga: Membuat Contact Form di Blog dengan Mudah
Merubah Warna Address Bar pada Browser Chrome, Opera, dan Firefox
Berikut kode script yang harus dipasangkan untuk membuat tampilan warnanya berubah di browser Chrome, Opera, dan Firefox.
<meta name="theme-color" content="#1BA39C">Merubah Warna Address Bar pada Browser Safari IOS
Berikut kode script yang harus dipasangkan untuk membuat tampilan warnanya berubah d browser Safari IOS.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#1BA39C">Merubah Warna Address Bara pada Browser Mobile Phone (bawaan HP)
<meta name="msapplication-navbutton-color" content="#1BA39C"">Mengganti Warna pada Semua Browser di atas
<!-- Pada Google Chrome, Firefox & Opera -->
<meta name="theme-color" content="#1BA39C">
<!-- Pada Safari iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#1BA39C">
<!-- Pada Windows Phone -->
<meta name="msapplication-navbutton-color" content="#1BA39C">
Catatan : Ganti kode warna #1BA39C dengan kode warna pilihanmu, untuk memudahkan gunakan Color Picker
Cara Pemasangan Kode pada Platform Blogger
Dalam pengaplikasian kode ini pada template blogger sedikit ada penambahan kode "/". Berikut ini kode untuk blogspot.
<!-- Pada Google Chrome, Firefox & Opera -->
<meta name="theme-color" content="#1BA39C"/>
<!-- Pada Safari iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#1BA39C"/>
<!-- Pada Windows Phone -->
<meta name="msapplication-navbutton-color" content="#1BA39C"/>Langkah pemasangannya sebagai berikut
- Buka dashbor blogger
- Pilih menu Tema>Edit HTML
- Letakkan script antara kode <head> </head>
- Simpan hasilnya dengan mengeklik Save theme
Cara Pemasangan Kode pada Platform Wordpress
Jika dalam pemasangan di blogger terdapat penambahan kode, maka untuk pemasangn wordpress langsung copy paste kode script untuk semua browser tanpa penambahan kode "/".
Langkah pemasangan seperti berikut
- Buka menu Appearance
- Pilih Editor
- Cari header php pada Theme files, letaknya sebelah kanan
- Letakkan script diantara kode <head> </head>
- Simpan hasilnya dengan cara klik Update file
Untuk mengecek apakah kode yang dipasang sudah berfungsi dengan benar atau belum, silahkan buka blog Kamu melalui browser HP. Apakah warna address barnya berubah atau tidak. Demikian cara mengubah warna address bar website di browser mobile, semoga bermanfaat.
EmoticonEmoticon