Blogger Renkli Yazı Kutusu

Blogger'da paylaşım yaparken bazı yazılarımız ön planda olsun ve dikkat çeksin isteriz. Bunun için yazıyı kalın yazmayı ve tırnak işareti kullanmayı çoğu kez denemişizdir ama istenilen performansı bir türlü alamayız. Bu sorunun önüne geçmek için sizlere renkli kutucuklardan ve onları nasıl elde edebileceğinizden bahsedeceğiz.

Yazılarınız böyle görünür.

Yazılarınız böyle görünür.

Yazılarınız böyle görünür.

Yazılarınız böyle görünür.

• Blogger Kontrol Panelinde bulunan Tema > HTML'yi Düzenle seçeneklerine tıklayın.
• Kodların bulunduğu alana bir defa tıklayın ve hemen ardından Ctrl+F tuşlarına basın.
• Sağ üst köşede açılan kutucuğa ]]></b:skin> yazıp Enter tuşuna basın.
• ]]></b:skin> kodunun bir üst satırına aşağıda vermiş olduğumuz css kodlarını 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}

Bu aşamalardan sonra aşağıda vermiş olduğumuz kodu yayınlarınızın HTML kısmına yazarak kullanabilirsiniz.

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

Html kodu içerisideki "purple" mor rengi temsil etmektedir. "Purple" yerine diğer renklerin ingilizce karşılıklarını yazarak renk değişimi yapabilirsiniz. Yapamadığınız veya aklınıza takılan bir yer olursa yorum kısmından bizlere ulaşabilirsiniz.