Örneğin; vb. Yazarken kesinlikle ön planda görünmesini sağlamaya çalışıyoruz. Şimdi, sana söylediğim bu renkli kutular işini daha çok görecekler. Bu arada, sadece satır yazacağınızı sanmayın.
Daha birçok şey için kullanabilirsiniz. Yukarıdaki resimde görüldüğü gibi, kutular yukarıdaki gibi görünür.
Her zaman olduğu gibi, bu eklentinin de bir çok kodu olacaktır; kodları doğru yere yapıştırırken bu malzeme tasarımı 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.
/* 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.
<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.
Btüün işlemler bu kadar herkese kolay gelsin.