Mobil tarayıcı rengi (Theme-color)

Post by

chrome rengini değiştirme change mobile browser color

Ben dahil birçoğumuzun bu konudan yeni haberdar olduğundan eminim neredeyse. Resme bakınca zaten konumuzun ne demek olduğunu da anlayabiliyoruz az çok. Bu özelliğin ne zaman çıktığını da soracak olursanız tesadüfen karşılaştım desem yeridir. Çok uzun süredir web teknolojilerinden uzak kaldığımdan olsa gerek. Bu yüzden konuya ait etiketin ne zaman yayınlandığı hakkında bilgi veremeyeceğim maalesef.

Ara sıra cep telefonuyla ziyaret ettiği sitelerde tarayıcı renginin banner rengiyle aynı oluğunu fark etmiştim. Aslında ilk gördüğümde ziyaret ettiğim sitenin mobil uygulaması açıldığını sanmıştım bi an. Meğerse binlerce site tarafından da kullanılan bir özellikmiş.

Chrome, Firefox, Opera, Windows Phone, iOS Safari tarayıcılarının mobil sürümlerinden ziyaret ettiğiniz sitelerde tarayıcı browser (tarayıcı) rengini değiştirebilen çok kısa bir kod mevcut ve kullanımı da oldukça basittir. Yapmanız gereken sadece site tasarımınıza uygun renk kodunu bulup altta vereceğim kodlar içine eklemek. Html renk kodları (Hex, Hsb, Rgb) yazıdan html renk kodlarını bulabilir ayrıca kendi tasarımınıza uygun kodu da yazı içinde gömülü olan kod editöründen inceleyerek temin edebilirsiniz.

Site  tasarımınıza  uygun  ve  #1db954 rakamları  gibi olan renk kodunu  aşağıdakilerle  değiştirmeniz  gerek. Ayrıca  IOS Safari  için de  rengin ismini  yazmanız  gerekiyor. Benim eklediğim rengin ismi SeaGreen.  Üstte  verdiğim linkte  renklerin isimlerini de  temin edebilirsiniz.

Düzeltme yaptığınız  kodları  kopyalayıp  olduğu  gibi  sitenizin head  etiketleri  arasına yerleştirmeniz  gerekiyor.

<!-- Chrome, Firefox OS ve Opera -->
<meta name="theme-color" content="#1a1f2b">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#1a1f2b">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="Black">

Kimilerine  göre  gereksiz  gibi  görünse de  mobil  cihazlardan  sitenizi  ziyaret  eden kişiler  web sitesi  değil de  android  uygulama  kullanıyorlarmış  gibi kendilerini  rahat hissedeceklerinden emin olabilirsiniz.  Ayrıca  siteye  de  ayrı  bir  güzellik kattığı  da  oluyor  bu  basit  kodlar yardımıyla.

Head etiketleri dendiğinde herkesin anlayacağını zannetmiştim. Bu yüzden kusuruma bakmayın. Head etiketleri webaitemizin en üst kısmında bulunan ve görünmeyen bölümdür. Bu bölümde websitemizin style.css dosyaları js dosyaları favicon.ico dosyaları ve title gibi bölümler vardır. En çok da bilinen meta keyword etiketlerinin olduğu yerdir. Verdiğim kodları olduğu gibi bu bölüme yerleştirdiğinizde siteniz bu kodlara uyumlu hale gelecektir. Php veya asp için uyarlama gibi bir ihtiyacı yoktur kodların. Olduğu gibi kopyalayıp yapıştırmanız yeterli olacaktır. Eğer hala nereye yerleştireceğinizi bulamadıysanız sitenizin kaynak kodlarından <head>  kelimesini aratıp bulduktan sonra altına yapıştırın kodu. Tam altına ekleseniz bile çalışır kodlar

Comments (14)

  1. orhan 31 Mart 2016

    bu kod opencart’a nasıl eklenir ? fikri olan varmı? hoşgeldiniz modülü ve bilgi sayfalarında ekledim denedim olmuyor

    1. Ali 2 Nisan 2016

      Yazıda eklemeyi unuttum galiba. Kodları head etiketleri arasına eklemeniz gerekiyor sadece.

      1. orhan 2 Nisan 2016

        kodları php’ye uyarlamam gerekiyor, ancak bir yerde hata yapıyorum çalışmıyor,wordpress için nasıl yaptığınızı kendi sitenize nasıl eklediğinizi açıklayabilmeniz mümkünmü:(

  2. orhan 20 Nisan 2016

    php sitelerde header/ header.tpl/header.php ( üst kısım) la ilgili dosyanın içerisine … html etiketi arasına bu kodu eklemeniz daha sağlıklı olur, başka bir yere eklerseniz farkında olmadan başka bir işlevin çalışmamasına sebep olabilirsiniz. başta css ile düzenlenebilir ve panelden eklenir zannediyordum sonra headerde düzenleme yapmam gerektiğini farkettim yaptım ve harika oldu, .etiket yoksa uygun bir satırda açın, değişiklik küçük de olsa yapmadan önce herzaman yedek almanızda fayda var

    1. Ali 20 Nisan 2016

      Bilgilendirici yorumun icin tskler Orhan.

      1. Mert 9 Aralık 2016

        Destek konusunda tam tarayıcı desteği yok anladığım kadarı ile

  3. Ziyaretci 10 Temmuz 2016

    Hocam tam hatırlamıyorum 1-2 ay olmuştur belki eski temanızla ilgili olumsuz bir yorum yapmıştım. Ve temanın değiştiğini görüyorum şuan, umarım benim için değişmemişsinizdir 🙂 . Şaka bi yana bu tema gerçekten kaliteliymiş hocam farklı bir hava yaratmış siteye ama üst menü çubuğu görüş açısını fazla daraltıyor bunuda söylemeden edemem 🙂 bu yorumu yayınlamayın hocam sitenin görünümüyle ilgili bir ziyaretci olarak yorum yaptım siz bilseniz yeterli. Kolay gelsin iyi çalışmalar 🙂

    1. Ali 8 Ağustos 2016

      Şimdiye kadar hiç siteye bu kadar ara vermemiştim. Ara vermekten çok siteyi unuttum desem yeridir tasarımı bile hatırlamıyorum artık 🙂 Bu arada eki temayı hata yüzünden değiştirmedim bu tema daha çekici geldi o yüzden değiştirdim.

  4. murat 22 Ekim 2016

    Hocam şuan kullandığınız temanın seo uyumu nasıl sizce aynı temayı bende kullanıyorumda

    1. Ali 24 Ekim 2016

      Kullandıktan sonra ziyaretçi sayısı yarı yarıya düştü ve hala da düşüyor 🙂

      1. Murat 25 Ekim 2016

        Hocam allah bu temanın belasını versin temayla okadar ugraştım düzenledim epostaya yazıyorum sizde bakın bi ama gelin görün sitede seo uyumu yok

  5. Blojen 5 Kasım 2016

    işe yaradı teşekkürler 🙂

  6. hasan 25 Kasım 2016

    teşekürler mntik umarım site renk deyiştirtmede cıkar gizliden menulü renk secme tema renk deyiştirme bu site yararlı

  7. davut 13 Aralık 2016

    Tesekkurler 🙂

Leave a comment