Blogger Yazar Hakkında Kutusu

Blog sitenize Konu altında yazar hakkında bilgi veren bir kutu ekleyebılırsınız.

Öncelikle yazar bilgi kutusunun stil kodlarını ekleyelim. Bunu için Şablon > HTML’yi Düzenle > Devam Et yolunu izleyip Ctrl+F tuşlarına basarak  ]]></b:skin>  kodunu bulun 

ve 

hemen üstüne aşağıdaki kodları ekleyin.

.author-box { background: #F7F7F7; margin: 20px 0 40px 0; padding: 10px; border: 1px solid #E6E6E6; overflow: auto; } .author-box p { margin: 0; padding: 0; } .author-box img { background: #FFFFFF; float: left; margin: 0 10px 0 0; padding: 4px; border: 1px solid #E6E6E6; }

Şimdi farklı yazar isimlerine göre farklı yazar bilgi kutuları oluşturacağız. Aşağıdaki örnekte ben 3 yazar kullandım. Birincisi kendim olayım yani Hüseyin Demirci, ikinci yazarın ismi Mete olsun, üçüncü yazarın ismi de Efe olsun. 

Yazar bilgi kutularını yazının bitiminde göstermek istediğimiz için Şablon > HTML’yi Düzenle > Devam Et > Widget Şablonlarını Genişlet yolunu izleyip Ctrl+F tuşlarına basarak şu kodu buluyoruz.

<div class='post-footer'>

Bulduğumuz bu kodun hemen üzerine aşağıdaki kodları ekliyoruz ve önizleme yapıyoruz. Eğer hata vermediyse kaydedebiliriz.

<b:if cond='data:post.author == "Serdar Kara"'> <div class='author-box'> <p> <img alt='' class='avatar avatar-70 photo' height='70' src='https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/182563_439470479444844_258726476_n.jpg' width='70'/><b>Yazar Hakkında</b><br/> Mehaba ben Hüseyin Demirci.<br/></p> </div> </b:if> <b:if cond='data:post.author == "Hocam"'> <div class='author-box'> <p> <img alt='' class='avatar avatar-70 photo' height='70' src='http://Site Mühendisi profil resmi.jpg' width='70'/><b>Yazar Hakkında</b><br/> Merhaba ben Site Mühendisi.<br/></p> </div> </b:if> <b:if cond='data:post.author == "Kartal"'> <div class='author-box'> <p> <img alt='' class='avatar avatar-70 photo' height='70' src='http://Byazap06 profil resmi.jpg' width='70'/><b>Yazar Hakkında</b><br/> Merhaba ben ByAzap06.<br/></p> </div> </b:if> </b:if> class='post-footer'>