CSS ile hoş mesaj kutuları

2 gündür kullandığım şu üstteki mavi kutuyu sanırım herkes biliyor ve görmüştür.Bu mesajımda size o kutunun nasıl yapıldığını anlatacağım.Aslında bu kodların mucidi E-Burhan.Ve bende sanırım bu eklentiyi Blogger'da kullanan ilk kişiyim.Bu yüzden bu olayı size bir güzel anlatmak istiyorum.Çok basit bir olay.

ÖNEMLİ:Bu işlemleri yapmadan önce mutlaka şablonunuzu yedekleyiniz.Ufak bir yanlış işlemde site kayabilir.(Başıma geldi oradan biliyorunm).

İlk olarak şu linkteki CSS Message Box dosyasını indirin.

Paket içerisinden çıkan "css.css" dosyasını kendi sunucunuza yerleştirin.

Not:Kod aktif olmasın diye "-" işaretini koydum.Siz kodları yazarken o işaretleri kaldırın.

<-style type="text/css">@import "css.css dosyasının linki";<-/style->Kırmızı ile işaretlediğim bölgeye az önce kendi sunucumuza yüklediğimiz "css.css" dosyasının linkini yazalım.

Bu kodu olduğu gibi kopyalayın ve Blogger HTML Düzenle kısmında <-head-> kodundan hemen sonra koyun.

<-div class="bilgi">
KaaN-Blog en iyi Firefox tarayıcı ile görüntülenir.
<-/div->

Kırmızı olan yere aşağıdakileri yazarsanız kutunun rengi değişecektir.

"hata" yazarsanız rengi kırmızı.
"ikaz" yazarsanız rengi sarı.
"tamam" yazarsanız rengi yeşil.
"bilgi" yazarsanız rengi mavi.

Yazıyı kendinize göre değiştirebilirsiniz tabiki.Şablonu önizleyin ve kaydedin.
Tamamdır bu kod bu kadar.Ancak birde sonradan dedinizki ben bu kenara bu kutu ile birlikte bir pano hazırlamak istiyorum. Biz de olur nasıl istersen diyoruz.

Bunun için bu işlemleri tekrarlamaya hiç gerek yok.

Sayfa ögeleri/Sayfa ögesi ekle/HTML/Javascript Oluştur ve yukarıdaki <-div->'li kodu yani 2.kodu yazmanız yeterli olacaktır.
*Kodu şablona kaydettiğimiz için ilk baştaki kodu yazmamıza gerek kalmadı.