Blogspot Popular post - Tùy biến phần trích dẫn trong bài đăng phổ biến

Đây là đoạn PopularPosts1 :

<b:widget id='PopularPosts1' locked='false' title='Bài đăng phổ biến' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

Bây giờ ta sẽ biến phần trích dẫn thành title, tức là phần trích dẫn sẽ không hiển thị nữa mà chỉ hiển thị khi bạn di chuột vào tiêu đề.
Bạn chú ý đến các thông số sau:

1. data:post.thumbnail: Địa chỉ của ảnh thứ nhất trong bài đăng được 
2. data:thumbnailSize: Kích thước ảnh mà Blogger resize hình vuông
3. data:post.href: Địa chỉ của bài đăng.
4. data:post.title: Tiêu đề của bài đăng.
5. data:post.snippet: Đoạn trích dẫn của bài đăng.

Như vậy điều ta cần là chú ý đến phần có snippet
Ta bỏ phần hiển thị snippet đi, và cho nó hiển thị trong title. Chú ý tiền tố expr: của các thành phần HTML trong XML
Bỏ dòng

<div class='item-snippet'><data:post.snippet/></div>

Thay:

<a expr:href='data:post.href'><data:post.title/></a>

Sửa thành

<a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>

Ngoài ra bạn có thể sửa lại kích thước của ảnh thumbnai blogger thành kích thước bạn muốn:

<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

Có thể sửa thành:

<img class='item-thumbnail' expr:src='data:post.thumbnail' style='width:*px; height:*px;...'/>

Hay

<img class='item-thumbnail' expr:src='data:post.thumbnail' class='img-popular'/>

Với img-popular là tên thành phần css bạn khai báo trên template.
Ngoài ra còn nhiều kiểu thùy biến khác, chúc bạn thành công!