Saifullah.id - Warna address bar browser smartphone normalnya adalah berwarna putih dan abu-abu. Namun ketika kita mengunjungi beberapa blog di internet, ada beberapa blog yang membuat tampilannya berubah warna. Ada yang berwarna hitam, biru, merah atau warna yang lain.
Warna-warna tersebut sebetulnya bukan berasal dari bawaan browser melainkan bisa diatur melalui kode HTML yang ada pada template blog. Warna ini termasuk penting, karena selain sebagai penghias tampilan blog, menyertakan warna pada address bar juga mempermudah pengunjung mengingat ciri khas blog kita. Dalam pemberian warna ada baiknya disesuaikan dengan warna dominan template agar lebih serasi.
Turorial mengubah warna Address Bar Blogger dan Wordpress
Berikut adalah tutorial cara mengubah warna pada address bar mobile browser yang bisa diterapkan pada Blogger maupun Wordpress.
Langkah-langkah:
1. Copy kode HTML di bawah ini.
Langkah-langkah:
1. Copy kode HTML di bawah ini.
<!-- URL Theme Color untuk Chrome, Firefox OS, Opera dan
Vivaldi -->
<meta name="theme-color"
content="#001b2a" />
<!-- URL Theme Color untuk Windows Phone -->
<meta name="msapplication-navbutton-color"
content="#001b2a" />
<!-- URL Theme Color untuk iOS Safari -->
<meta name="apple-mobile-web-app-capable"
content="yes" />
<meta name="apple-mobile-web-app-status-bar-style"
content="#001b2a" />
Ket: Kode di atas berfungsi untuk mengubah warna address bar pada browser Chrome, Firefox OS, Opera, Vivaldi, Windows Phone, dan IOS Safari.
2. Untuk pengguna Blogger/Blogspot
3. Untuk Pengguna Wordpress
Untuk mengetahui kode dari sebuah warna, kalian bisa menggunakan generator warna yang telah saya sediakan di bawah ini.
2. Untuk pengguna Blogger/Blogspot
- Masuk ke menu Dashboard Blogger > Theme > Edit HTML
- Letakkan kursor di dalam kotak
- Klik Ctrl + F dan masukkan kata </head> di kotak pencarian, lalu tekan Enter.
- Paste kode yang telah kita copy tadi sebelum kode </head>
- Ganti kode ini #001b2a dengan kode warna yang diinginkan.
- Save Theme / Simpan Tema
3. Untuk Pengguna Wordpress
- Masuk ke menu Appearance > Editor
- Pilih Theme Header di bagian kanan
- Paste kode di antara tag <head> dan </head>
- Ganti kode ini #001b2a sesuai keinginan.
- Simpan
Untuk mengetahui kode dari sebuah warna, kalian bisa menggunakan generator warna yang telah saya sediakan di bawah ini.