Bloglar İçin Yazar Bilgi Kutusu

Twitter’da bir takipçim çok yazarlı bloglar için “Yazar Hakkında” kutusu yapılıp yapılamayacağını sormuştu. Blogger şartlı etiketleri kulanarak bunu kolayca yapabiliriz. Ama önce ne yapmaya çalıştığımızı açıklayayım.

Daha önce paylaştığım Yazar Bligi Kutusunu blogunuza eklediğinizde yazılarınızın altında hakkınızda bilgi içeren bir kutu gözüküyor. Ancak biliyorsunuz Blogger’da aynı bloga birden fazla yazar atayabiliyorsunuz. İşte çok yazarlı bloglarda her yazarın yazısından sonra o yazar ait bilgi kutusu göstermek için bu eklentiyi kullanabilirsiniz.





Ö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 Serdar Kara, ikinci yazarın ismi Hocam olsun, üçüncü yazarın ismi de Kartal 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:blog.pageType == "item"'> <b:if cond='data:post.author == "Serdar Kara"'> <div class='author-box'> <p> <img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjlmfg-MtdjhWS-IaVPuBnt-rZNrrhh6uWj55Y_e4nBFxoYYdLWKM6wk3R_DjjFBUl__BassO0q-MSi6bylqo1Y6quUtkIutu6Jw_DOEJDbrihe930dAsl9bS_2SgNbWrpmwG4d7rCueqv/s200/803121CB-06DC-4018-9D5B-49A0A802A98C.jpg' width='70'/><b>Yazar Hakkında</b><br/> Mehaba ben PHTMLDrive Admini.<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://AdminProfil Resimi.png' width='70'/><b>Yazar Hakkında</b><br/> Merhaba ben Hocam.<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://AdminProfil Resimi.png' width='70'/><b>Yazar Hakkında</b><br/> Merhaba ben Kartal.<br/></p> </div> </b:if> </b:if>

Düzeldiğilicek Yerlere Dikkatli Bakmanızı Öneririm.