Blogger Material Design Yazılar

 

Blogger için Material Design renkli yazılar, web sitenizin tasarımını daha modern, şık ve çekici hale getirmek için kullanılan bir yöntemdir. Google'ın Material Design tasarım dili, sade, düzenli ve renkleri anlamlı bir şekilde kullanmaya odaklanır. Bu tasarımı kullanarak Blogger sitenizdeki yazıların renklerini ve stillerini geliştirmek, ziyaretçilerin ilgisini çekebilir ve içeriklerinizi daha profesyonel bir şekilde sunmanıza yardımcı olabilir. İşte nasıl işe yarayacağına dair birkaç örnek:

1. Estetik Görünüm

• Renkler, içeriklerinizi görsel olarak daha cazip hale getirir.
• Modern ve minimal tasarımlar, okuyucularınıza daha kaliteli bir izlenim verir.
• Renk paletleri, göz yormayan ama dikkat çekici tasarımlar sağlar.

2. Okunabilirliği Artırır

• Kontrastı optimize edilmiş renk kombinasyonları, yazıların kolayca okunmasını sağlar.
• Önemli bölümleri vurgulamak için renkli başlıklar, butonlar veya alt çizgiler kullanılabilir.

3. Marka Kimliği Oluşturur

• Material Design'daki renk düzenleriyle markanızın renklerini uyumlu bir şekilde öne çıkarabilirsiniz.
• Kullanıcılar, blogunuzu renk düzeniyle hatırlayabilir.

4. Daha Fazla Etkileşim

• Renkli ve dinamik bir tasarım, ziyaretçileri sayfada daha uzun süre tutabilir.
• Öne çıkan içeriklerin dikkat çekmesi sağlanarak tıklama oranları artırılabilir.

5. Responsive Tasarıma Uyumlu

• Material Design, mobil cihazlar ve farklı ekran boyutları için optimize edilmiştir.
• Blogunuzu mobil uyumlu hale getirirken aynı zamanda renkli ve canlı tutabilirsiniz.

• İlk olarak Blogger panelinde Şablon > HTML'yi düzenle seçeneklerine tıklayın. 
• Kodların bulunduğu alana bir kez tıkladıktan sonra Ctrl+F tuşlarına basın.
• Gelen arama yerine ]]></b:skin> yazıp Enter tuşuna basın.
• ]]></b:skin> kodunu bulduktan sonra ise bir satır üzerine hemen aşağıda bulunan CSS kodlarını kopyalayıp yapıştırın.
• 
  

CSS/* Material Color Box */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}

Yazı Kutusu HTML Kodu

div class="colorbox purple"> Kutu içerisinde göstermek istediğiniz yazı. </div>

Yukarıdaki kutu mor rengine sahip bir kutuydu. Eğer rengini değiştirmek istiyorsanız işaretlediğim kısmı green, red, orange, blue, yazarak değiştirebilirsiniz. Ayrıca CSS kodu içerisinde bulunan # ile başlayan renk kodlarını da istediğiniz bir renk koduyla değiştirebilirsiniz.

Tweet

Benzer Yayınlar

Blogger Material Design Yazılar

4/ 5

Oleh WebYazilimciniz

WebYazilimciniz 12:37 Yorum