VTV1

Loại bỏ chức năng Read more khỏi các trang tĩnh (static page)

Đối với Blogger thì thủ thuật tóm tắt bài viết tự động với nútRead More và ảnh đại diện là một phần quan trọng tạo nên diện mạo đẹp cho Blog của bạn. Tuy nhiên kể từ khi Blogger phát hành đặc tính tạo trang tĩnh (New Page/ static page) thì thủ thuật Read More gặp vấn đề đối với các trang tĩnh. Thông thường các trang tĩnh dùng để tạo các trang About, Contact…

- Khi bạn mở trang tĩnh thì nó hiển thị Read More, khi click chuột vào liên kết Read More vẫn không hiển thị toàn bộ nội dung bài viết. Để giải quyết vấn đề này thì cần phải loại bỏ chức năng Read More có ảnh đại diện ra khỏi các trang tĩnh.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Tìm đến dòng code sau (Ctrl F) <div class='post-body'>

<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more … "<data:post.title/>"</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div

=> Không phải template nào cũng có đoạn code như trên, chỉ tìm tương tự thôi. Chủ yếu là có 3 dòng tô đỏ.

6. Thêm đoạn mã dưới đây vào sau dòng <div class='post-body'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/> <data:post.body/> <b:else/>

7. Và thêm thẻ đóng </b:if> vào trước dòng <div style='clear: both;'/>

- Nếu không có  thì tìm dòng: <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

- Và thêm vào trước (hay sau nó cũng được) thẻ đóng </b:if>

=> Toàn bộ phần mã sau khi thực hiện có dạng như sau:

 Tìm đến thẻ :  ]]></b:skin> và dán code bên dưới trên nó 

<div class='post-body'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more … "<data:post.title/>"</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

Những dòng đánh dấu màu xanh là phần được thêm vào theo thủ thuật này.

- Ý nghĩa của toàn bộ phần mã này như sau: Đối với các trang tĩnh (static page) thì hiển thị toàn bộ nội dung bài viết; không hiển thị chức năng Read more ở các trang bài viết (item) và đối với các trang bài viết (item) thì hiển thị toàn bộ nội dung bài viết. Như vậy chức năng Read more đã được loại bỏ hoàn toàn khỏi các trang tĩnh một cách triệt để.

Chúc thành công!

Tạo Readmore trong Blogger ves 1

Để tạo đoạn phân cách Readmore, chúng ta nhấn vào nút More (có hình trang giấy ngăn đôi), nếu chuyển sang kiểu soạn thảo HTML, sẽ thấy có thẻ <!--more--> được chèn vào vị trí đó. Khi đó, phần phía trên thẻ <!--more--> này sẽ được hiển thị ở trang chủ và các trang category, phần còn lại sẽ chỉ xem được khi vào xem 1 bài viết. Cách làm này có 1 điểm lợi là giữ được định dạng HTML.

Chức năng Scrip:

- Nếu trong bài viết của bạn có thẻ <!--more--> (), nó sẽ lấy đó làm dấu phân cách, phần trước thẻ đó sẽ được hiển thị ở trang chủ và giữ nguyên định dạng HTML, phần sau đó chỉ hiển thị khi đọc 1 bài viết.

- Nếu trong bài viết của bạn không có thẻ <!--more-->, thì script sẽ tự động sinh ra đoạn văn bản thu gọn ở trang chủ như script auto readmore thông thường. Lúc này định dạng HTML sẽ không còn (hình ảnh thumbnail vẫn được duy trì).

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Chọn Mở rộng tiện ích .
5. Tìm đến thẻ </head> và chèn đoạn mã sau vào ngay trước đó:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    function strip(s,n){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,n-1).join(' ')}
    function createSummary(id) {
        var p = document.getElementById(id), content = p.innerHTML;
        if (/<!--\s*more\s*-->/.test(content)) {
            p.innerHTML = content.split(/<!--\s*more\s*-->/)[0];
        } else {
            var imgTag = '', img = p.getElementsByTagName('img');
            if (img.length >= 1) {
                imgTag = '<img class="thumb" src="'+img[0].src+'" />';
            }
            p.innerHTML = imgTag + strip(content, 125) + '...';
        }
    }
    //]]>
    </script>
</b:if>

6. Thêm đoạn CSS dưới vào trước thẻ ]]></b:skin>.

.thumb{float:left;display:inline;margin:5px 10px 10px 0;width:120px}

- Bạn có thể tùy biến số từ hiển thị (trong trường hợp tự động sinh đoạn văn bản thu gọn) ở trong đoạn code trên (thay số 125 bằng số tùy ý bạn).

7. Tìm thẻ <data:post.body/> và thay thế bắng đoạn mã sau:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
    <script type='text/javascript'>createSummary(&quot;p<data:post.id/>&quot;);</script>
    <a expr:href='data:post.url' title='Đọc tiếp'>Đọc tiếp &amp;rarr;</a>
<b:else/>
    <data:post.body/>
</b:if>

Lưu template lại và xem kết quả

- Hiện nay đã có bản cập nhất mới hơn và load ổn định hơn các bạn xem Tại đây

Chú thành công!

Auto readmore với thumbnail trên Blogger dùng Script - Style 1

Trong bài này namkna sẽ hướng dẫn các bạn tạo Auto Readmore (đọc thêm) cho bài viết tự động hoàn toàn không còn thủ công như trước đây. Với Script mình giới thiệu hỗ trợ ảnh Thumbail lấy hình ảnh đầu tiên xuất hiện trong bài viết để làm ảnh đại diện, do vậy blog của bạn nhìn sẽ chuyên nghiệp hơn.
Thêm 1 điểm nữa là tiện ích lấy ảnh trong Album Picsa làm ảnh thumbnail, Với những hình ảnh không thuộc host Picasa của google sẽ không lấy được thumbnail. Do vậy bạn hãy Upload trực tiếp ảnh của mình lên blog khi post bài nha.

Ảnh minh họa:

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (process)
4- Click chọn  Mở rộng tiện ích mẫu (  Expand Template Widgets) => Xem vdeo:

5- Tìm (Ctrl +F) thẻ bên dưới:

<data:post.body/> 

- Và thay nó bằng đoạn mã sau đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt;Đọc thêm...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6- Thêm đoạn mã dưới đây vào sau thẻ <head> (hoặc đặt trước thẻ </head>):

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Trong đó bạn thay đổi các thông số cho phù hợp với blog của bạn nha:

• summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện.
• summary_img là số ký tự phần miêu tả cho các bài có hình đại diện.
• img_thumb_height chiều cao của hình đại diện (pixel).
• img_thumb_width chiều rộng của hình đại diện (pixel).

7- Bấm Lưu mẫu lại và về trang chủ của blog để xem kết quả nha.

Tạo nút button bằng css

Nút button được ứng dụng khá nhiều trên các blog có thể làm nút home link, nút RSS... bạn cũng có thể sử dụng để làm menu cho blog. Có nhiều cách để tạo nút bạn có thể dùng phần mềm hoặc tạo trực tuyến từ các trang web. Hôm nay không cần phần mềm hay hổ trợ của web, mình xin chia sẻ cách để bạn có thể tạo nút bằng css dùng để ứng dụng cho blog mình. Thủ thuật này sẽ hình thành nên một nút dạng hình chữ nhật và có hiệu ứng khi rê chuột.

☼ Cách tiến hành:

1- Đăng nhập vào Blog

2- Vào Mẫu

3- Chọn Chỉnh sử HTML (Edit HTML)

4- Chèn code bên dưới vào trước thẻ  ]]></b:skin>

.button{
background: #00ccff; /*màu nền của nút*/
border: 3px #00ccff outset;
padding: 0 2px;
text-decoration: none;
font: bold 10px Verdana; /*kích thước của text*/
color:#ff0000; /*màu text*/
}

.button:hover {
border-style: inset;
background: #33ffff; /*màu nền của nút khi rê chuột*/
padding: 2px 3px 0 5px;
color:#000099; /*màu text khi rê chuột*/
}

.button:visited {
background: #00ffff; /*màu nền của nút sau khi click chuột*/
color:#ff6600; /*màu text khi đã click chuột*/
}

.button:active{
color: white;
}

- Bạn chỉ việc dựa vào chú thích và chỉnh sửa lại cho phù hợp, sau khi chỉnh sửa xong nhớ xóa đi các dòng chú thích màu xanh để không bị lỗi code.

- Bạn có thể xem bảng mã màu TẠI ĐÂY

5- Save template lại

Để tạo nút cho link trong bài đăng hay trên blog, bạn chỉ việc thêm và link đó lệnh "class="button" như bên dưới.

<a class="button" href="http://quangvietmkt.blogspot.com/2011/12/tao-nut-button-bang-css.html">Blog Namkna</a>

Chúc bạn thành công

VTV2

Tạo Auto readmore không sử dụng javascript cho Blogger

Blogger đã có readmore tuy nhiên nó khá thủ công, với blog đã có nhiều bài viết thì việc tạo readmore cho từng bài là rất vất vả và blogger thường tìm đến với auto readmore javascript. Auto readmore javascript thực ra chỉ hiển thị một phần bài viết qua hàm document.write, nội dung cả bài viết vẫn được trình duyệt tải về. Nhược điểm của nó là không thân thiện với các bộ máy tìm kiếm và các công cụ dịch trực tuyến, ngoài ra với bài viết dài nếu không dùng thêm readmore của Blogger thì sẽ gặp lỗi phân trang do Blogger tự ngắt trang. Thủ thuật auto readmore mình giới thiệu sau đây hoàn toàn mới, không sử dụng javascript mà dùng các câu lệnh do chính Blogger cung cấp. Nó sẽ cải thiện tốc độ blog của bạn khi duyệt các trang kiểu index, archive do chỉ tải về trích đoạn nội dung của bài viết.

Hình minh họa

 Cách thực hiện: Mình sẽ giới thiệu 2 cách thực hiện về cơ bản đều gốngn hau cả. các bạn xem bên dưới nha:

Cách 1: Theo Duypham

Bước 1: Thêm class post-thumbnail để hiển thị hình ảnh. Có 2 dạng hiển thị hình ảnh là bên trái hoặc bên phải.

1. Hiển thị hình ảnh bên trái:

Thêm đoạn mã dưới đây vào bên trên thẻ  ]]></b:skin> : 

.post-thumbnail{float:left;margin-right:20px}

2. Hiển thị hình ảnh bên phải:

Thêm đoạn mã dưới đây vào bên trên thẻ   ]]></b:skin> :

.post-thumbnail{float:right;margin-left:20px}

Bước 2: Thêm đoạn mã auto readmore. Có 4 dạng auto readmore để lựa chọn.

1. Auto readmore với hình ảnh:

Thay thế  <data:post.body/>  bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

2. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh:
Thay thế  <data:post.body/>  bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   <b:else/>
    <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN8Wovx-0PqLmu5XIbHRfGZ0ffSN67E1MvlYCK6IPZJtWgRI_3h7-0S4Rrh2FmBBl_rx8ohFMI-u-FQTOXsDFpn2dzqSJUNKyaRlXNkLwFXVLNwWSg631rq40czgG2jv65XfbYCLFlfgMr/' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

3. Auto readmore với hình ảnh. Không readmore với bài viết mới nhất:
Thay thế  <data:post.body/>  bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>  
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

4. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh. Không readmore với bài viết mới nhất:
Thay thế  <data:post.body/>  bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>  
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     <b:else/>
      <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN8Wovx-0PqLmu5XIbHRfGZ0ffSN67E1MvlYCK6IPZJtWgRI_3h7-0S4Rrh2FmBBl_rx8ohFMI-u-FQTOXsDFpn2dzqSJUNKyaRlXNkLwFXVLNwWSg631rq40czgG2jv65XfbYCLFlfgMr/' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    <b:else/>
     <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN8Wovx-0PqLmu5XIbHRfGZ0ffSN67E1MvlYCK6IPZJtWgRI_3h7-0S4Rrh2FmBBl_rx8ohFMI-u-FQTOXsDFpn2dzqSJUNKyaRlXNkLwFXVLNwWSg631rq40czgG2jv65XfbYCLFlfgMr/' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Việc hiển thị trích đoạn nội dung bài viết là thông qua thẻ  <data:post.snippet/>  của Blogger. Như đã từng đề cập tới ở bài đăng trước đoạn trích dẫn của Blogger chỉ gồm 140 ký tự (Blogger vừa update, số lượng ký tự của thẻ <data:post.snippet/> ở widget Blog giờ đây ít hơn số lượng ký tự của thẻ <data:post.snippet/> ở widget PopularPosts), khá là ngắn và việc ngắt ký tự không chú ý tới ký tự trống nên có câu bị mất vài từ trở nên vô nghĩa.

Hình ảnh được lấy thông qua lệnh data:post.thumbnailUrl. Đây là đường dẫn ảnh thứ nhất trong bài viết đã được Blogger resize về kích thước 72x72 pixels. Cần chú ý là ảnh của bài viết phải được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện. Thủ thuật trên đã thêm thuộc tính alt là tiêu đề bài viết cho hình ảnh, nó giúp tăng khả năng SEO cho blog của bạn.

Trước khi thực hiện thủ thuật auto readmore này bạn cần loại bỏ đoạn mã auto readmore javascript nếu đang dùng nhé.

Cách 2: theo thuthuatblogger.

- Cách này có ưu thế là căn đều 2 bên của văn bản nhìn xẽ đẹp hơn.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.
Đặt đoạn code sau đây trước dòng  ]]></b:skin> .

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

- Thay float:left; thành float:right; nếu muốn nó hiển thị bên phải

Bước 2. Tìm  <data:post.body/>  và thay nó bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span> 
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lưu Template là OK.

Điểm chú ý trong code  cách 2 có tùy biến là phần mô tả tóm tắt bài viết (snippet), văn bản được căn đều hai bên (nhờ sử dụng class item-snippet có định dạng text-align:justify).

Chúc thành công!