Di antara anda sekalian pasti pernah mengunjungi sebuah website atau blog menggunakan smartphone dan tiba-tiba warna address bar browser anda berubah mengikuti warna dominan dari blog tersebut. Artinya jika warna dominan blog tersebut hitam, maka warna address bar pada browser juga menjadi hitam. Seperti pada blog ini (santossalam.blogspot.com), ketika anda mengunjungi blog ini, maka warna pada address bar berubah menjadi berwarna zaitun, padahal ketika kita membuka website atau blog lain lewat browser Chrome misalnya, biasanya address bar tetap berwarna putih standar.
 |
| Address bar santossalam.blogspot.com |
Pada awalnya saya juga heran, namun ternyata untuk membuatnya menjadi seperti itu caranya cukup mudah. Dan untuk warna juga sebenarnya tidak harus mengikuti warna dominan blog, kita juga bisa membuat warna lain pada address bar agar sesuai dengan keinginan kita. Untuk membuatnya, kita hanya perlu menambahkah beberapa kode ke dalam template blog kita. Jika tertarik membuatnya, anda bisa mengikuti tutorial berikut ini.
Cara Membuat Warna Address Bar Agar Mengikuti Warna Blog
Berhubung mobile browser jenisnya bermacam-macam, seperti Chrome, Firefox, Safari iOS, Opera, dll, maka scriptnya juga berbeda-beda.
Browser Chrome & Opera
Untuk mengubah warna address bar pada browser Chrome, tambahkan kode berikut ini pada template blog anda dan letakkan di bawah kode <head> kemudian klik simpan.
<meta name="theme-color" content="#808000">
Browser Windows Phone
Untuk mengubah warna address bar pada browser Windows Phone, anda bisa tambahkan kode berikut ini pada template blog anda dan sama seperti sebelumnya letakan di bawah kode <head> kemudian klik simpan
<meta name="msapplication-navbutton-color" content="#808000">
Browser Safari iOS
Untuk mengubah warna pada browser Safari IOS, salin dan pastekan kode di bawah ini pada template blog anda tepat di bawah kode <head> kemudian klik simpan
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="#808000">
Kode Untuk Semua Browser
Jika anda tidak ingin ribet dan ingin agar support semua browser, baik Google Chrome, browser Windows Phone maupun Safari iOS, maka anda bisa gunakan script kode berikut ini lalu letakan di bawah kode <head> dan klik simpan
<!-- Untuk Google Chrome, Firefox & Opera --> <meta name="theme-color" content="#808000"> <!-- Untuk Windows Phone --> <meta name="msapplication-navbutton-color" content="#808000"> <!-- Untuk Safari iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="#808000">
Keterangan: pada kode warna #808000 anda dapat menggantinya sesuai warna blog anda atau warna lain sesuai dengan keinginan. Jika kode-kode di atas tidak berfungsi atau error, biasanya pada blogspot, anda bisa menambahkan kode "/" di belakang setiap kode warna, sehingga misalnya menjadi "#808000"/>. Jika tetap gagal, anda bisa coba memparse terlebih dahulu kode-kode tersebut sebelum ditambahkan pada template blog anda. Pada platform wordpress, pemasangannya juga sama yaitu diletakan di bawah kode <head>
Demikianlah Cara Membuat Warna Address Bar Agar Mengikuti Warna Blog. Semoga bermanfaat.
Labels:
Blogging
Thanks for reading Cara Membuat Warna Address Bar Agar Mengikuti Warna Blog. Please share...!
Iya Saya baru ngeh, emang keuntungan ny ke blog apa ya gan, ? Apa perlu?
BalasHapusMungkin lebih ke efek tampilan menarik menurut saya. Pada template blog ini saya jg prnah memasangnya tp sudah saya hapus krna bosan.
Hapus