Beranda Tips Blogspot Cara Agar Warna Address Bar Mengikuti Warna Blog

Cara Agar Warna Address Bar Mengikuti Warna Blog

4
Cara Agar Warna Address Bar Mengikuti Warna Blog

Halo temen-temen, pernahkah kamu mengunjungi suatu website atau blog melalui mobile browser, lalu warna tampilan address bar seketika mengikuti warna utama dari tampilan blog? Sama seperti blog muhammadroyyan.com, jika kamu mengunjungi blog ini menggunakan mobile browser seperti Chrome Android, maka secara otomatis address bar Chrome tersebut berubah warna menjadi hitam mengikuti warna utama dari blog ini. Padahal seperti kita ketahui, warna default address bar dari Chrome adalah putih. Contohnya seperti ini

Cara Agar Warna Address Bar Mengikuti Warna Blog

Nah mengganti warna ini bisa diterapkan baik untuk WordPress maupun untuk Blogspot. Jadi jika kamu tertarik membuatnya, simak tutorial berikut

Cara Mengubah Warna Address Bar Mengikuti Warna Blog

Untuk mengubah warna address bar sebenarnya cukup mudah, kamu hanya perlu menambahkan beberapa baris script meta tag dibawah kode <head> yang ada dalam template website. Nah berhubung mobile browser ini jenisnya bermacam-macam, seperti Chrome, Firefox, Safari iOS, Opera, dll. Jadi scriptnya juga berbeda-beda.

Mengubah Warna Address Bar pada Browser Chrome dan Opera

Untuk mengubah warna pada mobile browser Chrome dan Opera, kodenya seperti dibawah ini. Jangan lupa ganti kode warna yang saya tandai dengan warna utama blogmu. Gunakan tools Color Picker untuk mempermudah mendapatkan kode warna yang diinginkan.

<meta name="theme-color" content="#000000">

Mengubah Warna Address Bar pada Browser Windows Phone

Untuk mengubah warna pada mobile browser Windows Phone, kodenya seperti dibawah ini. Jangan lupa ganti kode warna yang saya tandai dengan warna utama blogmu.

<meta name="msapplication-navbutton-color" content="#000000">

Mengubah Warna Address Bar pada Browser Safari iOS

Untuk mengubah warna pada mobile browser Windows Phone, kodenya seperti dibawah ini. Jangan lupa ganti kode warna yang saya tandai dengan warna utama blogmu.

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">

Kode Untuk Semua Browser

Nah jika kamu ingin warnanya berubah unutk semua browser, baik Google Chrome Android, browser Windows Phone maupun Safari iOS maka gunakan script kode meta tag berikut.

<!-- Untuk Google Chrome, Firefox & Opera --> 
<meta name="theme-color" content="#000000"> 
<!-- Untuk Windows Phone --> 
<meta name="msapplication-navbutton-color" content="#000000"> 
<!-- Untuk Safari iOS --> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">

Pemasangan pada WordPress

Untuk WordPress, pilih menu Appearance » Editor. Lalu paste script meta tag ke header.php, tepatnya dibawah kode <head>

Cara Agar Warna Address Bar Mengikuti Warna Blog

Pemasangan pada Blogspot

Nah karena kode dari WordPress diatas akan mengakibatkan error jika digunakan pada Blogspot sehingga perlu diberi “/” diakhir kode. Sehingga kode pengganti warna pada Blogspot akan menjadi seperti ini

<!-- Untuk Google Chrome, Firefox & Opera -->
 <meta name="theme-color" content="#cf2f1e"/>
<!-- Untuk Windows Phone -->
 <meta name="msapplication-navbutton-color" content="#cf2f1e"/>
<!-- Untuk Safari iOS -->
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="#cf2f1e"/>

Buka menu Tema » Edit HTML. Lalu paste kode tersebut dibawah kode <head>. Jangan lupa ganti kode warna yang saya tandai dengan kode warna utama blogmu. Lalu klik Save.

Jika sudah, silahkan buka blogmu di Chrome browser. Pasti warna address barnya sudah berubah bukan? Demikian cara mengubah warna address bar mengikuti warna blog. Selamat mencoba dan semoga bermanfaat.

Artikel Lainnya:

4 KOMENTAR

LEAVE A REPLY

Please enter your comment!
Please enter your name here