Thursday, August 9, 2018

Cara Mengubah Warna Address Bar Web di Browser Mobile

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. 

merubah warna address bar di browser hp


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

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

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
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