Web Günlüğü

Blogger çok yazarlı bloglarda yazar adı ve fotoğrafı nasıl gösterilir

blogger yazar adı ve fotoğrafı nasıl gösterilirBlogger/Blogspot tabanlı tek yazarlı bloglarda yazar ismi <data:post.author> gibi kısa kod parçası ile gösterilebiliyor. Fakat birden fazla yazarın bulunduğu bloglarda, ikinci ve üçüncü yazarın hem ismini hem de fotoğrafını göstermek için kod yapısına manuel müdahele etmek ve Yerleşim sayfasından bir ayar yapmak gerekiyor. Öncelikle Blogger > Yerleşim sayfasında aşağıdaki fotoğrafta görüldüğü gibi Blog Kayıtları bileşen alanında Düzenle kısmına tıklayarak açılan pencereden "Yazar Profilini Yayının Altında Göster" seçeneğini aktif ediyoruz.


İkinci adımda ise aşağıdaki kodları yazar isim ve fotoğrafı nerede gösterilmek isteniyorsa oraya ekliyoruz.
<!-- Eğer üçüncü ve dördüncü yazar varsa bu kısım birden fazla kez kullanılabilir -->
<b:if cond='data:post.author == &quot;Test Yazar&quot;'>
<a target="_blank" href='https://www.blogger.com/profile/111111111'><span class='author-profile'>
<img src='https://1.bp.blogspot.com/-d53-6vMvyb4/XMmJ969y-JI/AAAAAAAAAA0/WSFJErZiSqgCRmZO-ocFBCVKC9rq8XjLQCK4BGAYYCw/s113/unr_nathan_160913_0432_9jmdoy.png'/>Test Yazar</span></a>
</b:if>

<b:if cond='data:post.authorAboutMe'>
<span class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<a target="_blank" class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
</b:if>

Kodun ilk kısmı eğer üç veya daha fazla yazar varsa kopyalanarak artırabilir. Buradaki dikkat edilmesi gereken kodun başında yer alan Test Yazar kısmının bloga yazar olarak eklenmiş kişinin ismiyle uyuşması gerekiyor. Diğer belirlenmiş alanlar profil bağlantısı ve yazar fotoğrafı alanı da düzenlenebilir. Ayrıca alttaki CSS kodları isteğe göre özelleştirebilir.

<style>.author-profile img{display:inline; text-align:left; height:30px; width:30px; float:left; border-radius:25px; margin-right:10px}</style>
comments powered by Disqus