Mobil tarayıcılarda adres çubuğunun rengi nasıl değiştirilir?

13 Mayıs, 2020
Mobile theme color
Mobile theme color
Mobil internet tarayıcılarda adres çubuğunun rengi nasıl değiştirilir? Mobil tarayıcı (theme color) nasıl değiştirilir? Mobil cihazlarda internet tarayıcıların başlık kısmı (barı) ve adres çubuğu kısmına nasıl renk eklenir?

Dostlarım bir önceki yazımda bahsettiğim gibi ufak bir başlık etiketi (meta tag) ile mobil cihazlarda nasıl farklılık elde edebiliriz konusuna yer verdim bu yazımda. Web sitelerimize, bloglarımıza ekleyeceğimiz bu basit kodlar sayesinde, mobil görünümde internet tarayıcılarının adres çubuğu kısmına renk verebiliyoruz. Bu sayede mobil cihazlarda tam anlamıyla renk uyumu yakalayıp ufak bir artı katmış olacağız.

Konuyu fazla uzatmadan hemen mobil internet tarayıcılarının adres çubuğuna nasıl renk ekleyebiliriz adım adım uygulayalım:

Google Blogger (blogspot) için:


Blogger HTML
Blogger HTML
İlk olarak yönetim panelinde Tema ardından HTML'yi düzenle kısmıyla kodların yer aldığı HTML alanına ulaşıyoruz. Ardından Ctrl F yardımıyla
<head>
kodunu buluyoruz. Bulduğumuz bu kodun altına
<!-- Google Chrome, Firefox ve Opera içim -->
<meta name="theme-color" content="#3cafe0">
<!-- iOS Safari için -->
<meta name="apple-mobile-web-app-status-bar-style" content="#3cafe0">
<!-- Windows Phone için -->
<meta name="msapplication-navbutton-color" content="#3cafe0">
Bu kodları ekliyoruz. Son olarak kırmızı kısımda belirttiğim alana dilediğiniz rengin Hex color kodunu ekleyip temanızı kaydedin.

WordPress için:


Wordpress header
Wordpress header
WordPress için de admin paneline ulaşıp, sol tarafta yer alan Görünüm ve ardından Tema düzenleyici kısmına giriyoruz.

Bu kısımda sağ tarafta yer alan seçeneklerden Tema üst bölümü yani header.php seçeneğini seçiyoruz. Kodların olduğu kısımda Ctrl F yardımıyla
<head>
kodunu bulup hemen altına yukarıya eklediğim kodları ekliyoruz. Ve yine aynı şekilde kırmızı renkle belirttiğim kısma dilediğiniz rengin Hex color kodunu ekleyip Dosyayı güncelle butonu ile kaydediyoruz.

HTML Hex color kodları ile ilgili şu siteyi ziyaret edebilirsiniz. Bu sitede dilediğiniz rengin Hex color koduna ulaşabilirsiniz.

Tabi bu özellik yeni çıkan bir şey değil dostlarım. Ama muhtemelen Google'un Android mobil cihazlarında ilk uyguladığı bir konu. Altı yıl önce Google bunun duyurusunu yapmış. Ben de geçtiğimiz günlerde tesadüf eseri karşılaştım ve hemen Blog Tecrübem'e ekledim.😊

Konuyla ilgili sorularınız olursa yorum yaparak bana bildirebilirsiniz.

10 yorum:

  1. Siteye estetik bir dokunuş İçin uygulanabilir. Teşekkürler

    YanıtlayınSil
  2. Hocam iOS’da olmuyor sanırım. Sizin blogunuzu renkli görmüyorum ben

    YanıtlayınSil
    Yanıtlar
    1. Ben arka plan rengini (#f9f9f9) kullanıyorum. Sarı ve mavi pek hoşuma gitmedi açıkçası :)

      Sil
  3. Yıllar önce bu konu ile ilgili bir yazı yazmıştım. Fakat IOS ve Windows Phone için geçerli değildi. Uzun zamandır da kullanmıyorum. Fakat görsellik adına hoş bir detay. Belki kullanmaya devam edebilirim. Blogunuzda header ile bütünlük sağlama adına #369dc9 renk kodu en uygunu olacaktır.

    YanıtlayınSil
    Yanıtlar
    1. Arka plan rengini eklemiştim #f9f9f9, ama senin önerin daha iyi oldu, teşekkür ederim.

      Sil
  4. Sitelere güzellik katacak bir kod :) Denerim ben de :)

    YanıtlayınSil
    Yanıtlar
    1. :) Evet, ufak bir dokunuş. Teşekkür ederim yorumunuz için.

      Sil
  5. Keşke iOS kısmında bu özellik çalışssa, gerçekten hoş bir görüntü olurdu.

    YanıtlayınSil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2020 Blog Tecrübem. Sitede yer alan tüm içerikler Blog Tecrübem'e aittir. Kullanım Koşulları çerçevesinde alıntı yapılabilir.