Monday, January 1, 2018

Cara Merubah Warna Address Bar Browser Smartphone Sesuai Warna Template Blog

Chat on Whatsapp

Setiap mengunjungi facebook melalui browser HP, saya melihat warna address bar pada browser HP yang saya gunakan ternyata berubah menjadi warna biru sesuai dengan warna dasar dari situs tersebut.

Saya sendiri sudah mencoba mengaplikasikan trik ini kedalam blog saya sampai sekarang.

Teman-teman bisa coba kunjungi blog kangwira melalui Browser Chrome pada Smartphone kamu lalu lihat perbedaannya ketika saya belum menggunakan trik ini pada Screenshot dibawah ini.

Cara Merubah Warna Address Bar Browser Smartphone Sesuai Warna Template Blog

Setelah kamu melihat contoh pada gambar diatas, menarik bukan jika dapat diaplikasikan kedalam blog pribadi kita?

Apa Fungsi Mengganti Warna Address Bar ini?

Menurut pendapat saya sendiri sebenarnya trik ini hanya untuk mempercantik blog saja karena tidak mengandung unsur optimasi terhadap blog yang kamu punya.

Address Bar Facebook Dari Browser Handphone
Nah ngomong-ngomong soal Mempercantik Blog berarti kan ada kaitannya dengan Re-Design atau Modifikasi Template yah teman-teman?

Ada banyak Blogger yang memberikan tips bahwa jika kita menggunakan terlalu banyak widget atau kode untuk mempercantik halaman blog kita itu dapat membebani Loading Halaman.

Coba kamu perhatikan screenshot disamping sebagai gambaran saja.

Tapi Tenang saja teman-teman, trik yang saya share kali ini hanya memanfaatkan meta content, jadi tidak membebankan loading page kok. Buktinya skor PageSpeed Insight Versi Mobile pada blog ini masih di angka 96% lho.

Skor Page Speed Insight Kang Wira

Skor dengan Angka 96% pada versi PageSpeed diatas sudah cukup lumayan bukan?

Nah jika teman-teman ingin mencoba mempercantik tampilan pada blog dengan mengganti Warna Address Bar Browser tanpa membebankan loading halaman, silahkan praktekkan beberapa langkah singkat dibawah ini.

  • Pastikan kamu sudah login kedalam akun blog kamu.
  • Pilih menu Tema, lalu klik tombol Edit HTML.
  • Salin Meta Tag dibawah ini, lalu letakkan setelah kode <head>
<!-- Warna untuk Chrome, Firefox OS, Opera -->
<meta content='#2f303f' name='theme-color'/>
<!-- Warna untuk Windows Phone -->
<meta content='#2f303f' name='msapplication-navbutton-color'/>
<!-- Warna untuk iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#2f303f' name='apple-mobile-web-app-status-bar-style'/>

Simpan Template dan lihat hasilnya pada Browser Google Chrome dalam Smartphone kamu.

Perhatikan kode warna yang saya tandai pada kode meta tag diatas dapat kamu sesuaikan dengan warna dominan pada template kamu saat ini.

Untuk Menyesuaikan warna, silahkan kamu lihat halaman Color Picker yang sudah saya siapkan di blog ini.

Yaa begitulah cara saya modifikasi template untuk mempercantik halaman blog tanpa memberatkan loading blog.

Ohya untuk teman-teman yang mau berkreasi dengan menampilkan atau menyembunyikan widget pada tampilan Smartphone, silahkan teman-teman baca artikel saya dibawah ini.

Baca juga: Cara Menampilkan dan Menyembunyikan Widget pada Smartphone


Cukup sekian dulu yah artikel saya kali ini, semoga teman-teman bisa lebih kreatif dalam memodifikasi tampilan blognya seperti Mengganti Warna Address Bar pada Browser Smartphone ini.

Jika ada pertanyaan atau kesulitan dalam mempraktekannya, silahkan teman-teman bertanya melalui kolom komentar dibawah ini dan jangan lupa untuk masukkan email kamu di kolom Berlangganan dibawah artikel ini untuk mendapatkan notifikasi setiap ada postingan terbaru.


Previous
Next Post »
BLOGGER
DISQUS

No comments