CSS İle Uyarı Mesajı Kutuları Yapalım

Bu yazıda, blog yazılarınızda bir mesaj vermek veya uyarı yapmak istediğinizde kullanmanız için ikonlarla desteklenmiş mesaj kutuları yapmayı anlatacağım.Bu mesaj kutrtularını CSS teknolojisi ile yapcacağız.Bu örneklerden yola çıkarak siz de benzer kutular ve paneller oluşturabilirsiniz.Başlamadan önce her blogcunun bilmesi gerektiğini düşündüğüm ve bu mesaj kutularını oluştururken kullandığımız CSS’ten bahsetmek istiyorum.

CSS Nedir?

CSS (Cascading Style Sheets) yani stil şablonları; HTML’e ek olarak web sayfalarına daha çok görsellik katmak için geliştirilmiş bir web teknolojisidir.CSS le bir web sayfasındaki öğelerin rengini, boyutunu, konumunu ve bir çok özelliğini kolayca ayarlayabiliriz.

Blogger şablonlarında CSS kodları ]]></b:skin> kodunun üzerindeki bölümde bulunur.CSS öğrenerek  belki kendi temanızı sıfırdan yapamazsınız ancak mevcut temalarda değişiklikler yapabilirsiniz.CSS hakkında daha detaylı bilgiler bulmak için Fatih Hayrioğlu’nun blogunu ziyaret edebilirsiniz.

Gelelim mesaj kutularını oluşturmaya.Öncelikle şablonumuza kutuların görünümünü tanıtmak için gerekli CSS kodlarını ekleyeceğiz.Bu kodları yukarıda da bahsettiğim gibi şablonumuzun ]]></b:skin> kodunun üstüne yazacağız.Örnek olarak 3 ayrı uyarı kutusu oluşturacağız.Siz bu örneklerden faydalanarak kendi mesaj kutularınızı oluşturabilirsiniz.Kodlar şöyle:

.dikkat{ border:solid 1px #DEDEDE; background:#FFFFCC url(http://icons.iconarchive.com/icons/famfamfam/mini/16/icon-alert-icon.png) 8px 6px no-repeat; color:#222222; font-weight:bold; padding:4px; text-align:center; } .onay{ border:solid 1px #90ac13; background:#eef4d3 url(http://icons.iconarchive.com/icons/famfamfam/silk/16/accept-icon.png) 8px 6px no-repeat; color:#6b800d; font-weight:bold; padding:4px; text-align:center; } .yasak{ border:solid 1px #CC0000; background:#F7CBCA url(http://icons.iconarchive.com/icons/famfamfam/silk/16/delete-icon.png) 8px 6px no-repeat; color:#CC0000; font-weight:bold; padding:4px; text-align:center; }

Kodlarda dikkkat, onay ve yasak isimli 3 ayrı kutunun görünümü belirttik.Şimdi sıra bu kodları kullanmaya geldi.

Blogunuza yeni kayıt oluştururken HTML’yi Düzenle bölümünü açın ve buraya aşağıdaki kodları yazın:

<div class="dikkat"> PHtmlDrive Dikkat Mesaj Kutusu</div> <div class="onay"> PHtmlDrive Onay Mesaj Kutusu</div> <div class="yasak"> PHtmlDrive Yasak Mesaj Kutusu</div>

Bu örneklerden yola çıkarak farklı CSS kodları kullanabilir ve kendi özel mesaj kutularını oluşturabilirsiniz.