Halo !!! Saya Kang Ismet, ini adalah blog tentang AMP HTML dan cara penerapannya

Google Chrome Adres Çubuğu Rengi Değiştirme (Mobil)

google chrome adres çubuğu renk değiştirmeBu konuda sizlerle birlikte Google Chrome adres çubuğunu özelleştirmemize yarayan ufak bir meta kodundan bahsedeceğiz. Bu kod ile android, windows phone ve ios (safari tarayıcı) işletim sistemine sahip mobil cihazlarınızdan sitenize giriş yaptığınızda adres çubuğunun rengi normaldeki gibi gri değil sizin belirlemiş olduğunuz renkte çıkacak. Bu özelliği anlatmak istememin sebebi akılda kalıcılığın oldukça önemli olduğu bu dönemde adres çubuğundaki bu ufak değişiklik kullanıcıların kesinlikle dikkatini çekecek ve farklılık yaratacaktır. Bu da siteniz için artı itibar demektir.

Google, bu özelliği mobil chrome tarayıcında 39. sürümden sonra etkinleştirdi. Bildiğiniz gibi Lollipop ve Marhmallow sürümlerinde ana menüde tüm uygulamarın arka arkaya sıralandığı bir seçenek var. Bu uygulama sayesinde özelleştirdiğiniz adres çubuğunuz menüde sizin belirlediğiniz renkle görünmekte. Amacı ise web sitelerini son uygulamalar menüsünde daha iyi ayırt edebilmek. Android dışındaki sistemler dışında ise yukarıda belirttiğim durum geçerli.

Peki adres çubuğunun rengini nasıl değiştireceğiz? Bunu yapabilmek için aşağıdaki kodlardan size uygun olanını sitenizin <head> kodunun hemen altına ekleyin.

Android
[<meta name="theme-color" content="#999999">]

Windows Phone
[<meta name="msapplication-navbutton-color" content="#999999">]

iOS (Safari)
[<meta name="apple-mobile-web-app-status-bar-style" content="#999999">]

İşlem oldukça kolay. Dikkat etmeniz gereken tek şey sitenizin tasarımıyla uygun bir renk seçmek. Aksi takdirde göze hoş gelmeyen görüntüler oluşabilir. Sitenize uygun bir renk kodu seçmek için Flat UI Colors veya çok daha fazla seçeneğin bulunduğu Flat Colors sitesini ziyaret edebilirsiniz.

Wordpress kullanıcıcıları bu işlemleri kodlarla uğraşmadan da gerçekleştirebiliyor. Kullanmak isteyen olur mu bilmem ama Android 5.0 Lollipop Status Bar Customiser ismindeki eklenti bunun için geliştirilmiş.

1 yorum: