Blogger İçin Material Design Renkli Yazı Kutuları

Blogger'da yazılarınızı görüntüleyebileceğiniz renkli material design kutular.

Mayıs 2020 Yeni Blogger Güncellemeleri

Google Chrome'da Material Görünüm Nasıl Etkinleştirilir?

Blogger'da yazı yazarken bazı cümleleri ön plana çıkarmak isteriz. Örneğin; bir film içerisinde geçen repliği vs. yazdığınız zaman muhakkak daha ön planda gözükmesi için uğraşırız. İşte şimdi sizlere bahsettiğim bu renkli kutular da işinizi fazlasıyla görecektir. Bu arada sadece içerisine repliği yazacağınızı düşünmeyin. Daha birçok şey için kullanabilirsiniz. Yukarıdaki görselden de anlaşıldığı üzere kutular yukarıdaki gibi gözükmektedir. Şimdi lafı uzatmadan bu kutuları nasıl kullanabileceğinize geçeyim.

Her zaman olduğu gibi bu eklentide de birtakım kodlar olacaktır, kodları doğru yere yapıştırdığınız zaman başarıyla bu material design renkli kutuları kullanabilirsiniz.

• İ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}

Kodları yapıştırdıktan sonra ise aşağıda vermiş olduğum HTML kodlarını yazı yazdığınız yerin HTML kısmına yapıştırıp kullanabilirsiniz.

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.

Yapamadığınız durumda bana ulaşmanız yeterlidir, her türlü yardımcı olmaya çalışırım. Peki sizler bu renkli kutuları beğendiniz mi? Neler düşündüğünüzü yorum bölümünde belirtebilirsiniz.