Gắn Avatar cho tiện ích Team Blog Profile

Nếu blogspot của bạn đã có một số tác giả tham gia viết bài cộng tác viên thì tiện ích Team Blog Profile rất cần thiết vì nó cho độc giả biết rằng blogspot của bạn đang có chương trình cộng tác viên, đồng thời cũng giúp tạo sự trân trọng đối với các tác giả. Để làm như vậy, thông thường chúng ta sẽ thêm vào tiện ích Profile (Hồ sơ). Cấu trúc XML của tiện ích này như sau:

<b:widget id='Profile1' locked='false' title='Các tác giả' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> <!-- team blog profile -->
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></ a></li>
</b:loop>
</ul>
<b:else/> <!-- normal blog profile -->
<b:if cond='data:photo.url != ""'><a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a></b:if>
<dl class='profile-datablock'> <dt class='profile-data'><data:displayname/></dt>
<b:if cond='data:showlocation == "true"'> <dd class='profile-data'><data:location/></dd> </b:if>
<b:if cond='data:aboutme != ""'><dd class='profile- textblock'><data:aboutme/></dd></b:if> </dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>
</div>
</b:includable>
</b:widget>

Theo cấu trúc XML ở trên, hẳn bạn sẽ thấy rằng đối với Team Blog Profile thì tiện ích hồ sơ chỉ hiển thị tên tác giả (data:i.display-name) và đường dẫn đến trang hồ sơ tác giả (data:i.userUrl); còn trường hợp blogspot không có cộng tác viên thì tiện ích hồ sơ (normal blog profile) sẽ có thêm Avatar của quản trị viên. Như vậy với trường hợp Team Blog Profile thì tiện ích hồ sơ trông rất đơn điệu. Vấn đề mình nêu ở đây là gắn thêm Avatar cho các tác giả để tiện ích trở nên đẹp hơn. Ngoài ra có thể gắn thêm số đếm bài viết cho các tác giả. Bạn có thể xem Demo tại trang chủ của Thủ thuật Blogger. Để làm được như vậy bạn hãy thay toàn bộ đoạn code trên bằng đoạn code bên dưới:

<b:widget id='Profile1' locked='false' title='Các tác giả' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile styled by www.thuthuatblogger.info -->

<style>

.authorlist ul li {list-style:none;padding:0;margin:0}

.authorlist img {float:left;margin:0 10px 10px 0;width:50px;height:50px;border:solid #ddd 1px;padding:1px}

.authorlist .userUrl {font-weight:bold}

</style>

<script type='text/javascript'>function showpostcount(json){document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}

</script>

<div class='authorlist'>
<ul>
<b:loop values='data:authors' var='i'>
<li>
<b:if cond='data:i.userUrl == &quot;URL_ProfileID_Tác giả 1&quot;'>
<img src='URL_Avatar_Tác giả 1'/>
<span class='userUrl'><a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a></span><br/>
<span>Quản trị viên</span><div style='clear:both;'/>
<b:else/>
<b:if cond='data:i.userUrl == &quot;URL_ProfileID_Tác giả 2&quot;'>
<img src='URL_Avatar_Tác giả 2'/>
<span class='userUrl'><a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a></span><br/>
<span><script src='/feeds/posts/default/-/Tác giả 2?alt=json-in-script&amp;callback=showpostcount'/> bài viết</span><div style='clear:both;'/>
<b:else/>
<b:if cond='data:i.userUrl == &quot;URL_ProfileID_Tác giả 3&quot;'>
<img src='URL_Avatar_Tác giả 3'/>
<span class='userUrl'><a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a></span><br/>
<span><script src='/feeds/posts/default/-/Tác giả 3?alt=json-in-script&amp;callback=showpostcount'/> bài viết</span><div style='clear:both;'/>
<b:else/>
<a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a>
</b:if></b:if></b:if>
</li>
</b:loop>
</ul></div>
</b:if>
</div>
</b:includable>
</b:widget>

Ở đoạn code trên, bạn lần lượt thay URL dẫn đến ProfileID của các tác giả, thay URL tương ứng các Avatar của các tác giả. Lưu ý khi duyệt bài của các tác giả, quản trị viên nên đặt thêm nhãn theo tên tác giả cho bài viết để tiện quản lý bài viết của các tác giả đồng thời giúp tạo số đếm bài viết cho tiện ích này.

Một lần nữa với việc sử dụng lệnh điều kiện, mình đã giúp bạn tìm hiểu thêm sự bí ẩn của ngôn ngữ XML trong Template của blogspot.