- "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ı :)
Bu yazıyı beğendiyseniz RSS akışına abone olarak yeni yazılarımızı e-posta aracılığıyla takip edebilirsiniz. Bu link ile abone olabilirsiniz.
ÖNCE ve SONRA görselleri aynı pek anlamadım farkı ama?
Nasıl aynı ya :)
Öncelikle renkleri farklı, ikinci olarak "sonra" görselinde küçük bir resim var sol tarafta. Yazı boyutu farklı. Gerisini de anlatımını iyi yapmaya çalıştım ki güzel insanımızın hayal gücüne kalsın diye :)
Önce ve Sonrada sadece ünlem var, kaldı ki BLOGGER TEMASI yapıyorum ben ve sırasa 300e yakın BLOGGER TEMASI bekleyen insan var, ben anlamadıysam kimse anlamaz :) Cidden fark ne allah aşkına. :)
Önce ve Sonra diye bir resim var sayfada acaba onun görüntüsünde bir bozukluk mu var sizde? Ben herşeyi normal görüyorum da o yüzden ne demek istediğinizi pek anlayamadım. Resim için firefox, chrome, ie6 ve opera ile sayfayı açtım, resim düzgün görünüyor. Sizin tam olarak neyi anlamadığınızı çözemedim anlatımım mı kötü yoksa resim mi çalışmadı?
Opera firefox ve chromedan başka kullanmıyorum zaten, kaldı ki görsel urlsine baktım sadece tek fark i harfi allah allah neyse.
http://3.bp.blogspot.com/_9W15rc-u7mA/SoHPbpcRvQI/AAAAAAAACus/IVLb8xVGsIs/s400/oncesora.PNG
İsterseniz rastgele bir blog açın. Orada sadece CSS kodlarını kopyalayarak deneyin. Zaten pek bir fark yok Renk farklı. Bir de ünlem işareti olan bir resim var(ünlem işaretinden ne kastettiğinizi sonunda anladım :)) Onun harici yaptığım anlatımla zaten onları nasıl düzenleyeceğinizi falan uzun uzun yazdım :) Önemli olan burada verdiğim css kodlarını bloga ekleyip onları düzenlemeyi öğrenmek :)
Dostum Allah senden razı olsun yaw çok teşekkür ederim sayende kurtuldum o sıkıcı uyarıdan...
www.canliyayinradyolar.com
www.grafikindir.com
Peki burdaki gibi Bu yazıya 8 adet yorum yapılmış. Sen de yorum yap! felan nasıl eklerım ama buradakıyle aytnı sekılde ? kutu seklınde
Yorum Gönder
Yorum yazarken dikkat ediniz;
1) Öncelikle, kesinlikle küfür etmiyorsunuz.
2) Eğer önceki yorumlardan birine cevap veriyorsanız kime cevap verdiğinizi belirtiyorsunuz.
3) Web sitenizin reklamını yapmak için saçma sapan, konuyla alakası olmayan yorumlar atmıyorsunuz.
4) Bunlar haricinde kardeş kardeş yorumlarınızı yazabilirsiniz.:)
BloggerDestek Ekibi