Status Message(Durum Mesajı) Bloğunu Düzenliyoruz

Blogger'da etiketlerden herhangi birisine tıklayıp etiket sayfasını açtığınızda veya arama yapıp arama sayfasını açtığınızda "Status Message" isimli bir blok belirir sayfanızda. Bu blokta gittiğiniz sayfanın özelliğiyle ilgili bilgi verir. Örnek vermek gerekirse:
- "widget etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster"
- "Sorgunuzla eşleşen kayıt yok. Tüm kayıtları göster"
- "blogger sorgusuna yönelik kayıtlar görüntüleniyor. Tüm kayıtları göster"

Şimdi bu mesajın görüntülendiği bloğu düzenleyeceğiz. Bu blok normalde css kodlarınıza ekleyeceğiniz basit birkaç kod ile düzenlenebilir ancak ben html kodlarının da üzerinde duracağım.


Status Message bloğu, blog HTML'nizde "widget şablonlarını genişlet" seçeneğinizi aktif ettiğinizde karşınıza çıkan şu kodlar ile tanımlanmıştır:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

"Bazı Özel Kodlar" isimli yazıda anlattığım gibi b:includable kodu sadece bir nesneyi tanımlamaya yarar. O nesnenin nerede duracağını ise b:include koduyla düzenleriz. Yani üstteki kodları takiben şablonunuzda bir de b:include kodunun bulunması gerekiyor. Bu kod ise şudur:
<b:include data='top' name='status-message'/>

Evet bu kodları gösterdiğime göre düzenleme kısmına geçebilirim. Öncelikle renklendirme ve resim ekleme olayını anlatacağım. Bunu CSS aracılığıyla yapıyoruz.
Şablon HTML'mizde ctrl+f tuş kombinasyonunu kullanarak ]]></b:skin> kodunu arıyoruz, buluyoruz ve hemen üstüne şu kodları yapıştırıyoruz:

.status-msg-wrap {
width:90%;
padding:5px;
}
.status-msg-body {
font-size:80%;
text-align:left;
padding:5px 5px 5px 30px;
width:auto;
}
.status-msg-border {
border:1px solid #a19a36;
opacity:1;
}
.status-msg-bg {
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
opacity:1;
}

Renklerden ve biçimlendirmeden biraz bahsedecek olursam:

1) Kenarlık:
Yukarıdaki css kodlarında gördüğünüz border:1px solid #a19a36; kodu Status Message bloğunuzun kenarlıklarını belirtmek için kullanılmış. Buradaki 1px kenarlığın genişliğini, solid kenarlığın cinsini, #a19a36 ise kenarlığın rengini belirtir. 1px değerini büyüterek(2px,3px,..) kenarlığı kalınlaştırabilir, solid yerine dotted yazarak kenarlığı kesik çizgilerden oluşan bir hale getirebilir, #a19a36 yerine de başka bir renk kodu yazarak kenarlığın rengini değiştirebilirsiniz. Kenarlıkları kaldırmak için ise border:1px solid #a19a36; kodu yerine border:0; kodunu yazabilirsiniz.

2) Arkaplan Rengi
Yukarıdaki CSS kodları içerisinde gördüğünüz
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
kodundaki #FFF9B3 renk kodunun yerine başka bir renk kodu yazarsanız Status Message bloğunuzun rengini değiştirmiş olacaksınız.

3) Soldaki Resim
Yine bir üst maddede yazdığım kod olan
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
kodunun içinde soldaki resimin de kodu mevcut.
http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png
Bu resim linkinin yerine kendi resim dosyanızın linkini yazdığınız zaman Status Message bloğunuzun sol tarafında o resim çıkacaktır. Burada dikkat etmeniz gereken şey ise sizin yükleyeceğiniz resimin genişliği normalde orada bulunan resimin genişliğinden fazlaysa
padding:5px 5px 5px 30px;
Kodundaki 30px değerini büyütmeniz gerekir.

4) Status Message Bloğunu Kaldırmak
Bunu uygulamak için iki tane yöntem var:

4.1) Birinci yöntem CSS kodlarıyla kaldırmak, bu yöntemi kullanırsanız, Status Message bloğu aslında blogunuzda var olacak, ancak ziyaretçiler onu göremeyecek. Yukarıdaki CSS kodlarını blogunuza yapıştırdıysanız silin, çünkü ona artık ihtiyacınız kalmadı. Şimdi ]]></b:skin> kodundan hemen önce şu kodları yapıştıracaksınız:

.status-msg-wrap {
width:0;
height:0;
display:none;
}

Bu işlemi yaptıktan sonra şablonunuzu kaydedin. Olmuş olmalı :)

4.2) İkinci yöntem ise html kodlarının arasından b:include kodunu silmek. Şablon HTML'nizde "Widget Şablonlarını Genişlet" seçeneğini aktifleştirin ve ctrl+f yardımıyla şu kodu bulun:
<b:include data='top' name='status-message'/>
Ve o kodu silin... Şablonunuzu kaydettiğinizde olmuş olmalı :)