Cara Mengubah Warna Address Bar Blog di Browser Smartphone

Aldhinya Web - Tutorial Petunjuk Panduan langkah langkah bagaimana gimana how to Mudah Simple Ampuh merubah mengubah mengganti Warna Address Bar Browser di Smartphone Android Ketika Membuka Blog Kita. Pernahkan anda melihat address bar sebuah website atau blog yang berubah warna ketika kita mengunjungi blog tersebut? Hal seperti ini tidak jauh dari perkembangan teknologi yang dilengkapi dengan perkembangan desain yang semakin menarik.

Cara Mengubah Warna Address Bar Browser di Smartphone Ketika Membuka Blog Kita

Warna address bar yang bermacam-macam bisa digunakan sebagai ciri dari sebuah situs. Dengan berubahnya warna tertentu pada address bar akan membuat kesan tersendiri bagi orang yang mengunjungi blog anda. Ada baiknya anda menerapkan warna sesuai dengan warna tema pada blog atau website anda.


Untuk kali ini saya hanya menemukan perubahan pada browser Google Chrome saja pada smartphone android saya. Silahkan ikuti langka-langkah berikut

Mengubah warna address bar pada browser android

Caranya cukup mudah, hanya menambahkan kode di bawah ini :
<meta name="theme-color" content="#e74c3c" />

Mengubah warna address bar pada browser Windows Phone

Tidak hanya pada smartphone android saja, namun juga bisa diterapkan pada browser di Windows Phone, karena Windows Phone juga sudah mendukung pergantian warna address bar ini, namun caranya agak sedikit berbeda, karena menggunakan meta tag dengan nama msapplication-navbutton-color.

Kodenya adalah sebagai berikut :
<meta name="msapplication-navbutton-color" content="#e74c3c" />

Mengubah warna address bar pada browser Safari

Penerapan pada Browser Safari caranya juga berbeda, kita harus menambahkan dua baris script yaitu "apple-mobile-web-app-status-bar-style" dan "apple-mobile-web-app-capable".

Berikut kodenya :
<meta name="apple-mobile-web-app-status-bar-style" content="#e74c3c" />
<meta name="apple-mobile-web-app-capable" content="yes" />

Kode Lengkapnya

Jadi di bawah ini adalah kode lengkap yang bisa Anda pasang di bagian head pada kode HTML blog Anda agar bisa support di berbagai browser. Berikut kodenya :
<!-- Untuk Android -->
<meta name="theme-color" content="#e74c3c" />
<!-- Untuk Windows Phone -->
<meta name="msapplication-navbutton-color" content="#e74c3c" />
<!-- Untuk iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#e74c3c" />
<meta name="apple-mobile-web-app-capable" content="yes" />
 
Cara Memasang di Blogger
  1. Login ke akun blogger anda
  2. Masuk ke Dashboard > Template
  3. Edit HTML
  4. Copy kode di atas lalu paste tepat di atas kode </head> 
  5. Lalu Simpan

Cara Memasang di Wordpress
  1. Login ke dashboard Wordpress
  2. Kemudian, pilih Appearance > Editor
  3. Lalu, pada bagian kanan klik themes header (header.php)
  4. Copy kode di atas lalu paste tepat di atas kode </head>
  5. Lalu Simpan
Ganti Kode #e74c3c sesuai dengan warna selera Anda !
Silahkan buka blog anda pada smartphone android anda. Jika warna address bar pada browser smartphone android anda berubah maka anda berhasil menerapkannya. Ingat! cara di atas hanya saya coba pada browser Google Chrome saja.

Sekiat Tutorial tentang Cara Merubah Warna Address Bar Browser di Smartphone Ketika Membuka Blog Kita. Terima kasih dan semoga artikel di atas bermanfaat.

Bagikan :

Tag : Blogger, Tutorial
7 Komentar :
Komentar ini telah dihapus oleh pengarang. - Hapus

alhamdulillah setelah sekian lama nyari caranya, akhirnya ketemu juga, terima kasih gan buat tutorialnya :)

ane senang yang natural natural aja hihihi

Wah!!! Mantep ini.. .
Thanks infonya

#Rusman_Cilacap

iya gan..
masih butuh belajar tentang skrip ini
Thanks postingannya

#Rusman

Ane pernah ganti beginian eee malah warnanya amburadul, jadinya ane kembalikan k aslinya aja... heheh hihi :D

Silahkan berkomentar sesuai dengan artikel di atas.
Komentar yang mengandung SPAM akan saya hapus.
Anda juga bisa menghubungi Saya lewat Facebook.
Emoticon

Atas