ColorLab Blogger Teması (Ücretsiz)

Renk kodlarıyla uğraşan herkesin hayatını kolaylaştıracak bir Blogger teması kodladım. ColorLab, sıfırdan yazdığım, glass morphism tasarım anlayışına sahip, tam donanımlı bir renk kodu öğrenme aracı. HEX, RGB, HSL, CMYK değerlerini anlık gösteriyor, resimden renk alabiliyor ve baskın renkleri otomatik bulabiliyor. Üstelik tamamen ücretsiz.

Neden Böyle Bir Tema Kodladım?

Blogger için renk kodu araçları genelde ya çok basit kalıyor ya da aşırı karmaşık oluyor. Ben ikisinin ortasını bulup kullanıcı dostu, modern görünümlü ve işlevsel bir şey ortaya çıkarmak istedim. Renk kodlarına ihtiyaç duyan grafik tasarımcılar, web geliştiriciler veya içerik üreticileri için pratik bir çözüm olsun dedim.

ColorLab Temasının Öne Çıkan Özellikleri

ColorLab'i diğerlerinden ayıran bazı özellikler var. İşte detaylıca anlatayım.

Anlık Renk Kodu Dönüşümü

Kullanıcı bir renk seçtiğinde tema anında HEX, RGB, HSL ve CMYK değerlerini hesaplayıp gösteriyor. Her format için ayrı kartlar var ve kartlara tıklayınca değerler panoya kopyalanıyor. Ayrıca ana kopyala butonu ekledim, yeşil renkte hemen göze çarpıyor ve tıklayınca "Kopyalandı" animasyonuyla geri bildirim veriyor.

Resimden Renk Alma Sistemi

En sevdiğim özelliklerden biri bu oldu. Kullanıcı bir resim yüklüyor, resmin üzerine tıklıyor ve tıkladığı pikselin renk kodu anında ekrana geliyor. Büyüteç benzeri yuvarlak bir hedefleme imleci var, nereye tıkladığını net görüyorsun. Sürükle bırak desteği de ekledim, resmi direkt sayfaya sürükleyip bırakabiliyorsun. PNG, JPG ve WEBP formatlarını destekliyor, maksimum 10MB sınırı var.

Baskın Renk Bulucu

Yüklenen resimdeki en çok kullanılan 5 rengi otomatik tespit eden bir algoritma yazdım. Resmi yükleyip "Resimdeki Baskın Renkleri Bul" butonuna tıklıyorsun, 5 renk palet olarak karşına çıkıyor. Her renge tıklayınca ana renk olarak seçiliyor ve tüm değerleri ekrana geliyor. Bu özellik özellikle logo çalışmaları veya web tasarım projeleri için çok kullanışlı.

Renk Tonu Paleti

Seçilen rengin açıktan koyuya 9 farklı tonunu gösteren bir palet var. Her tonun üzerine gelince HEX kodu görünüyor, tıklayınca o ton ana renk olarak seçiliyor. Bu sayede kullanıcı istediği tonu kolayca bulup kopyalayabiliyor.

Tasarım Detayları

Temada glass morphism tasarım kullandım. Yarı saydam arka planlar, blur efektleri, yumuşak gölgeler var. Aydınlık ve karanlık mod desteği ekledim, kullanıcının tercihi localStorage'da saklanıyor, siteye tekrar girdiğinde aynı modda açılıyor. Renk kartlarının üstünde her formata özel gradient çizgiler var, hover olunca yukarı kalkıp gölgeleniyorlar. Başlıkta animasyonlu gradient yazı kullandım.

Navigasyon ve Bildirimler

Üst kısma sabit bir navigasyon bar ekledim. Logo, ana sayfa butonu, bildirim zili ve tema değiştirme butonu var. Mobilde de sorunsuz çalışıyor, butonlar küçülüyor ama dokunma alanı yeterli büyüklükte kalıyor. Bildirim ziline tıklayınca sitenin özelliklerini anlatan bir modal açılıyor, her sayfa yüklemesinde rozet tekrar görünüyor. Escape tuşuyla veya overlay'e tıklayarak kapatılabiliyor.

Çerez Politikası

Sağ altta çerez politikası banner'ı var. Google'ın resmi çerez politikası sayfasına yönlendiriyor. Kullanıcı kabul edince localStorage'a kaydediliyor ve bir daha gösterilmiyor. KVKK ve GDPR uyumluluğu için gerekli bir detay.

Teknik Altyapı

Tema tamamen sıfırdan yazıldı, hiçbir hazır framework veya kütüphane kullanmadım. JavaScript tarafında jQuery yok, tamamen vanilla JS. CSS boyutu yaklaşık 15KB, JS boyutu yaklaşık 8KB. Tek harici kaynak Google Fonts'tan Plus Jakarta Sans fontu. Toplam yük 25KB civarında, resimler hariç tabii.

SEO tarafında dinamik meta etiketleri kullandım. Blogger ayarlarından site adı ve açıklama ne girildiyse meta etiketleri otomatik onu çekiyor. Open Graph ve Twitter Card desteği var, sosyal medya paylaşımlarında düzgün görünüyor. Semantik HTML5 yapısı kullandım, ARIA erişilebilirlik etiketlerini ekledim.

PageSpeed optimizasyonlarına da dikkat ettim. Inline critical CSS, font-display swap, lazy loading, DNS prefetch ve CSS containment kullandım. Core Web Vitals testlerinde iyi sonuçlar alıyor.

Mobil Uyumluluk

Tema tamamen responsive. Üç farklı kırılma noktası belirledim: 768px tablet, 480px mobil, 370px küçük mobil. Tüm butonlar minimum 32-36px dokunma alanına sahip, mobil kullanımda sıkıntı çıkarmaz. Navigasyon bar mobilde daralıyor ama tüm özellikler erişilebilir kalıyor.

Kurulum

Kurulumu çok basit. Blogger paneline giriyorsun, Tema kısmından HTML'yi Düzenle'ye tıklıyorsun, mevcut kodu silip ColorLab XML'ini yapıştırıyorsun, kaydediyorsun. Önce mevcut temanı yedeklemeni öneririm. Sonra Blogger Ayarları'ndan site başlığını ve açıklamasını giriyorsun, meta etiketleri otomatik çekiyor.

Kimler Kullanabilir?

Grafik tasarımcılar, web geliştiriciler, UI/UX tasarımcıları, dijital pazarlamacılar, içerik üreticileri kısacası renk kodlarına ihtiyaç duyan herkes rahatlıkla kullanabilir. Özellikle frontend geliştiriciler için CSS yazarken renk değerlerini hızlıca kopyalamak çok pratik olacaktır.

Temayı indirmek için buraya tıklayabilirsiniz.

Sıkça Sorulan Sorular

Tema gerçekten ücretsiz mi?

Evet, tamamen ücretsiz. Herhangi bir lisans ücreti veya gizli ödeme yok.

Google AdSense ekleyebilir miyim?

Kesinlikle. Blogger'ın kendi AdSense entegrasyonuyla veya manuel kod ekleyerek reklam gösterebilirsin.

Kendi logomu ekleyebilir miyim?

Evet, üst kısımdaki emojiyi kendi logo görselinle değiştirebilir veya metin tabanlı bir logo kullanabilirsin.

İngilizce yapabilir miyim?

Temadaki tüm metinler manuel olarak değiştirilebilir. İngilizceye veya başka bir dile çevirerek kullanabilirsin.

Mobilde sorun çıkarır mı?

Hayır, tema 370px genişliğe kadar test edildi ve tüm özellikler mobilde sorunsuz çalışıyor.

Güncelleme yapacak mısın?

Evet, tema aktif olarak geliştiriliyor. Yeni özellikler ekledikçe güncelleyip paylaşacağım.

Başka bir platformda kullanabilir miyim?

Tema Blogger için özel olarak kodlandı. WordPress veya başka bir platform için uyarlanması gerekir.

Destek alabilir miyim?

Sorularınızı yorum olarak bırakabilir veya iletişim sayfamdan bana ulaşabilirsiniz.