Şekilli Yazı Stüdyosu Blogger Teması (Ücretsiz)

Şekilli nick yazma, havalı yazı stilleri, farklı fontlarla yazma derdine son verecek bir Blogger teması kodladım. Şekilli Yazı Stüdyosu, tamamen sıfırdan yazdığım, 30 farklı yazı stiliyle metinleri anında dönüştüren bir araç. Karanlık tema, partikül efekti, tek tıkla kopyalama derken kullanıcı deneyimini ön planda tuttum.

Neden Böyle Bir Tema Kodladım?

Blogger'da şekilli yazı araçları genelde ya popup reklam dolu oluyor ya da mobilde çöp gibi görünüyor. Ben hem temiz görünen, hem hızlı çalışan, hem de mobilde düzgün duran bir şey ortaya koyayım dedim. Sosyal medyada havalı nick kullanmak isteyenler, oyunlarda farklı yazı stili arayanlar ya da Instagram biyografisini şekillendirmek isteyenler için birebir.

Öne Çıkan Özellikler

• 30 farklı yazı stili var temada. Kalın serif, italik, gotik, el yazısı, çift vuruşlu, daire içinde, ters çevrilmiş, üst simge, alt simge gibi aklına gelebilecek çoğu stil mevcut. Her biri için ayrı bir kart var, karta tıklaman yeterli, anında panoya kopyalanıyor. Kopyalandığında yeşil bir onay efekti çıkıyor, kullanıcı neyin kopyalandığını net görüyor.
• Tek tıkla tüm stilleri listeleme butonu ekledim. Diyelim bir metnin tüm stillerini tek seferde görmek istiyorsun, butona basıyorsun, 30 stili alt alta listeleyip panoya atıyor. Whatsapp'ta arkadaşına atmak için birebir.
• Rastgele örnek getirme özelliği var. "Bugün ne yazsam" diye düşünen kullanıcı için 30 tane hazır Türkçe ve İngilizce kelime tanımladım. Merhaba, Gülümse, Yıldız, Umut gibi kelimeler rastgele geliyor.
• Partikül animasyonu ekledim arka plana. Mor, mavi, yeşil, kırmızı tonlarında uçuşan noktalar var. Mobilde performansı etkilemesin diye partikül sayısını düşürdüm, masaüstünde 25, mobilde 8 partikül çalışıyor. Hareket hassasiyeti olan kullanıcılar için reduced motion desteği de var, tarayıcı ayarına göre animasyonları durduruyor.
• Yukarı çık butonu unutmadım. Kullanıcı stiller arasında gezinirken aşağı kaydığında sağ altta mor bir buton beliriyor, tıklayınca yukarı kaydırıyor. Mobilde de yeterli büyüklükte, 42 piksel.
• Çerez bildirimi GDPR uyumlu şekilde çalışıyor. Kullanıcı kabul edince localStorage'a yazıyor, bir daha göstermiyor.

Tasarım Detayları

Koyu tema kullandım, göz yormasın diye. Arka planda koyu mor ve lacivert arası geçiş yapan bir gradient var. Kartlarda blur efekti, yarı saydam arka planlar kullandım. Başlıkta animasyonlu gradient yazı var, kırmızıdan sarıya, yeşilden maviye dönen bir gökkuşağı efekti.

Teknik Altyapı

Tamamen vanilla JavaScript ile yazdım, jQuery yok. CSS boyutu küçük, harici hiçbir kütüphane kullanmadım. Google Fonts bile çağırmıyorum, sistem fontlarıyla çalışıyor. Toplam yük gayet hafif.

SEO tarafında dinamik meta etiketleri, Open Graph, Twitter Cards, canonical URL hepsi mevcut. Blogger ayarlarından site adı ve açıklama neyse otomatik çekiyor. ARIA etiketleriyle erişilebilirlik desteği de ekledim, ekran okuyucular rahat gezinebiliyor.

Mobil uyumluluk için üç kırılma noktası belirledim. 768, 480 ve 350 piksel. En küçük ekranda bile kartlar iki sütun halinde düzgün görünüyor, butonlar minimum 34 piksel dokunma alanına sahip.

Kurulum

Blogger paneline gir, Tema > HTML'yi Düzenle, mevcut kodu sil, temanın XML'ini yapıştır, kaydet. Hepsi bu. Önce mevcut temanı yedeklemeni öneririm.

Kimler Kullanabilir?

Sosyal medyada havalı nick isteyenler, oyunlarda farklı yazı stili arayanlar, Instagram biyografisini şekillendirmek isteyenler, Whatsapp durumuna havalı yazı yazmak isteyenler kısacası metnine farklı bir hava katmak isteyen herkes kullanabilir.

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. İstediğin gibi kullan, değiştir, paylaş.

Google AdSense ekleyebilir miyim?

Tabii ki. Blogger'ın kendi AdSense widget'ıyla veya manuel kod ekleyerek reklam gösterebilirsin. Temada reklam alanları mevcut.

Yazı stilleri her yerde çalışır mı?

Büyük oranda evet. Whatsapp, Instagram, Twitter, TikTok, oyun nickleri gibi çoğu platformda sorunsuz görünüyor. Fakat bazı eski cihazlarda veya uygulamalarda karakterler kare olarak çıkabilir, bu temayla değil platformun Unicode desteğiyle alakalı.

Mobilde sorun çıkarır mı?

Hayır, 350 piksel genişliğe kadar test ettim. Tüm butonlar, kartlar, input alanı mobilde düzgün çalışıyor. Dokunma alanları yeterince büyük.

Kendi kelimelerimi ekleyebilir miyim?

Kod içinde rw dizisinde 30 örnek kelime var. O diziyi düzenleyerek kendi kelimelerini ekleyebilirsin. Dizi JavaScript kısmında, hemen bulursun.