Cara Mengubah Warna Address Bar Supaya Mengikuti Warna Blog - Kored ID

28 February 2019

Cara Mengubah Warna Address Bar Supaya Mengikuti Warna Blog

Disaat kalian mengunjungi suatu blog pada perangkat smartphone, mungkin kalian bertanya-tanya kenapa warnanya bisa menyesuikan seperti itu. Warna address bar di smartphone kita berubah menyesuaikan warna template blog yang kita buka. Hal tersebut dikarenakan memakai atau menggunakan Meta Tag Theme Color. Meta Tag Theme Color berfungsi untuk merubah warna address bar pada browser, seperti browser dari chrome safari ios bahkan opera sehingga warna address bar menyesuiakan dengan tema blog yang kita gunakan, dan lebih terlihat menyatu.

Cara Mengubah Warna Address Bar - Kored ID

Selain merubah warna, menggunakan meta tag theme juga bisa merubah pandangan orang lain terhadap blog kita. blog yang menggunakan kode ini bisa terbilang lebih cantik dan enak dilihat. Merubah warna address bar sangat mudah untuk di terapkan ke dalam blog kita, kita hanya perlu menambahkan atau menyisipkan beberapa script meta tag theme ke dalam tema blog. Namun mobile browser memiliki jenis yang berbeda, jadi script yang digunakanpun berbeda juga.

Untuk itu saya akan membagikan beberapa script untuk melengkapi di masing-masing browser. ada dua style/ cara yang akan saya bagikan sekarang. sebelum itu, ada baiknya kita mengenal jenis-jenis script untuk masing-masing browser tersebut. cara pemasangannya pun terlebih sama.

Baca Juga :
Cara Mengubah Warna Address Bar
Cara 1
1. Masuk Blogger.com
2. Pilh Tema -> Edit HTML
3. Cari kode <head> atau &lt;head&gt; Lalu tambhakan Salah Satu Kode dibawah ini Tepat dibawah atau sesudah <head> atau &lt;head&gt;

Script untuk mengubah Warna Addres Bar Pada Safari iOS
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">

Script untuk mengubah Warna Addres Bar Pada Google Chrome dan Opera
<meta name="theme-color" content="#000000">

Script untuk mengubah Warna Addres Bar Pada Windows Phone
<meta name="msapplication-navbutton-color" content="#000000">

Script diatas merupakan dari masing-masing Browser, Jika kode diatas di jadikan menjadi satu, maka tampilannya akan seperti dibawah ini.

<!-- Untuk Browser Windows Phone --> 
<meta name="msapplication-navbutton-color" content="#22A7F0"/> 

<!-- Untuk Browser Safari iOS --> 
<meta name="apple-mobile-web-app-capable" content="yes"/> 
<meta name="apple-mobile-web-app-status-bar-style" content="#22A7F0"/>
<!-- Untuk Browser Google Chrome, Firefox & Opera --> 
<meta name="theme-color" content="#22A7F0"/>

Ubah warna yang diberi tanda merah, sesuai dengan keinginan anda. Untuk mengingatkan kembali, kode diatas sisipkan dibawah <head> atau &lt;head&gt;

4. Kemudian, Simpan Tema

Baca Juga :
Cara 2
Cara kedua sama saja namun script didalamnya lebih simple, dan tidak terlalu banyak. Untuk Caranya bisa lihat di cara ke 1.

<!-- Meta Tag Theme -->
<meta content='#000000' name='theme-color'/>
<meta content='#000000' name='apple-mobile-web-app-status-bar-style'/>
<meta content='#000000' name='msapplication-navbutton-color'/>

Warna yang diberi tanda merah, kalian bisa mengubahnya sesuai dengan keinginan anda. Untuk hasilnya silahkan buka di browser smartphone anda.

Itulah cara merubah warna addres bar untuk tampilan browser di smartphone anda. Sangat mudahkan? Semoga bisa diterapkan kedalam blog kalian.