Cara Mengubah Warna Address Bar di hp Sama dengan Warna blog - Tegalwebside.com
Recent Post

Thursday

Cara Mengubah Warna Address Bar di hp Sama dengan Warna blog

Tegalwebside.com - Sebenarnya tutorial ini saya buat untuk menjawab pertanyaan pada diri saya sendiri, ketika itu saya mengunjungi sebuah blog yang cukup terkenal melalui smartphone, lalu disitu saya merasa ada yang berbeda dengan tampilan mobile blog tersebut, dan setelah saya amati ternyata perbedaanya terletak pada warna address bar atau kotak url yang hampir sama dengan warna tema Blog.

Awalnya saya kira, warna address bar yang mengikuti warna tema blog merupakan fitur bawaan dari browser Chrome itu sendiri, padahal biasanya standar addres bar pada chrome berwarna putih. Teka teki itu terpecahkan setelah saya menemukan informasi bahwa merubah warna address bar pada tampilan blog mobile dapat dilakukan dengan menambahkan beberapa kode meta tag tertentu.

Baca Juga: Cara Pasang Kode Lazyload di Blog

Selain di browser Chrome,  kode meta tersebut juga dapat mengubah warna address bar pada browser Opera, browser windows phone, dan Safari browser di iOS.
Address bar itu sendiri merupakan kolom teks yang terletak pada bagian atas sebuah browser yang digunakan untuk mengetikan alamat url sebuah website atau blog.
Address bar

1. cara mengubah warna address bar pada chrome
Untuk membuat warna address bar sama dengan warna blog pada browser Chrome, caranya sebagai berikut:
  • Silakan masuk ke dashboard blogger.
  • Selanjutnya buka Tema → pilih mode Edit HTML.
  • Tekan ctrl + f, kemudian cari tag  <head>.
  • Setelah itu copy dan paste kode ini tepat dibawah kode <head> lalu simpan.

<meta content='#0490cc' name='theme-color'/> 
2. cara mengubah warna address bar pada browser windows phone
Langkahnya hampir sama seperti pada Chrome, namun dengan tag kode yang sedikit berbeda.
Copy dan paste kode dibawah ini:

<meta name="msapplication-navbutton-color" content="#0490cc">
3. cara mengubah warna address bar pada safari browser 
Untuk browser safari caranya juga agak sedikit berbeda, kalian harus menambahkan 2 baris kode tag tepat dibawah kode  <head>.


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

Versi lengkapnya
Agar warna address bar dapat support diberbagai browser. Copy dan paste kode ini tepat dibawah kode tag <head>.

<!-- Chrome -->
<meta name="theme-color" content="#0490cc" />
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#0490cc" />
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="#0490cc" />
Result image:
Cara Mengubah Warna Address Bar di hp Sama dengan Warna blog

Penutup
Trik ini tidak mempunyai dampak buruk pada SEO blog dan agar kode tag tersebut berhasil merubah warna address bar,  jangan lupa untuk mengaktifkan tampilan seluler khusus didalam pengaturan tema blogger.
Demikian tutorial singkat cara  mengubah warna address bar di hp sama dengan warna tema blog. Semoga tutorial ini dapat menambah pengetahuan kalian didalam dunia blogging.

Share with your friends

Give us your opinion

Berkomentarlah secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab komentator.

Notification
If you like articles on this blog, please subscribe Now.
Done