Thứ Hai, 26 tháng 10, 2015

Thứ Ba, 25 tháng 6, 2013

Bài viết này thủ thuật blogspot cùng chia sẻ đến các bạn blogger thủ thuật tạo "Bài viết liên quan - Related posts" dựa trên nhiều label (nhãn) và đã được sửa lỗi hiển thị font Tiếng Việt của đoạn code gốc. Bằng cách này sẽ hiển thị được nhiều bài viết liên quan đến nhiều label hơn, hướng visitor đến những bài cùng chủ đề tốt hơn.
Demo online ngay tại blog này
Các bạn có thể xem qua ảnh để thấy được kết quả hiển thị của thủ thuật rất hay này.
Bài viết liên quan theo nhiều label cho Blogspot
☼ quy trình 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 Mở rộng tiện ích mẫu (Expand Widget Templates)
5- Tìm đoạn code <data:post.body/> (thường chọn là vị trí đầu tiên nếu có nhiều kết quả). Và gắn vào sau nó đoạn code bên dưới.

<!-- related post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-content'>
<h2>Các bài liên quan</h2>
<div id='saliproit183'/><br/><br/>
&lt;script type=&quot;text/javascript&quot;&gt;
homeUrl3 = &quot;thu-thuatblog.blogspot.com&quot;;maxNumberOfPostsPerLabel = 10;maxNumberOfLabels = 6;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+21);
label = decodeURIComponent(label);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;h4&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;saliproit183&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
&lt;/script&gt;
</div>
</b:if><br/><!-- /related post -->
Chú ý:
Bạn sẽ pải thay đổi cho phù hợp với cách sắp xếp hiển thị bài viết liên quan theo nhãn phù hợp
Thay http://thuthuatblog2013.blogspot.com/ bằng địa chỉ blog của bạn, lưu ý không có "/" ở cuối nhé.
maxNumberOfPostsPerLabel là tối đa số bài viết hiển thị ở mỗi nhãn (label).
maxNumberOfLabels là số nhãn (label) sẽ được hiển thị.

Chủ Nhật, 23 tháng 6, 2013

Blogger vừa bổ sung mẫu form liên hệ chính thức của riêng mình cho người dùng thông qua một tiện ích mới có tên gọi Biểu mẫu liên hệ (Contact form). Trước đây chúng ta đều phải sử dụng dịch vụ của một bên thứ ba. Nay thì mọi thứ đơn giản hơn, bạn có thể nhận tin nhắn từ người đọc ngay trong email mà không cần cung cấp địa chỉ email ra bên ngoài. 

Để sử dụng form này bạn chỉ cần đăng nhập Blogger > Bố cục > Thêm tiện ích > Tiện ích khác >Biểu mẫu liên hệ (Xem lần lượt các hình 1, 2, 3)

Hình 1
Hình 2



Hình 3

Sau khi lưu lại, nhớ kéo và thả vào vị trí bạn muốn rồi chọn Lưu sắp xếp.

Hạn chế của mẫu form chỉ xuất hiện trên sidebar hoặc footer ở nơi mà bạn vừa lưu lúc nãy. Thông thường mẫu form liên hệ người ta đặt trong một trang riêng ở đó ghi các thông tin liên hệ và kèm mẫu form bên dưới. 

Nếu muốn đặt nó vào phần trang của Blogger thì bạn làm theo gợi ý tiếp theo. 

Bước 1. Giữ nguyên mẫu form liên hệ mà bạn vừa tạo lúc nãy.

Bước 2. Nhấn Mẫu > Chỉnh sửa HTML 

Hình 4
Bước 3. Nhấp Chuyển đến tiện ích > ContactForm1  
Hình 5
Bước 4. Nhấp chuột vào mũi tên phía đầu dòng tiện ích có id='ContactForm1' như hình

Hình 6
Bước 5. Xóa hết đoạn code bên trong nó, như bạn nhìn thấy dưới đây, còn lại như hình 7 và sau đóLưu mẫu.

<b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/> </div> </form> </div> </div> <b:include name='quickedit'/>

Hình 7

Bước 6. Thêm trang mới. Nhấn Trang > Trang mới > Trang trống để tạo. Nếu bạn đã có trang liên hệ rồi thì không cần tạo nữa.


Bước 7. Chọn chế độ soạn HTML rồi dán đoạn code này vào chỗ viết bài, sửa lại một số tùy chọn và đặt tên bài viết rồi nhấn Xuất bản.

<form name="contact-form"> <p></p> Name <br> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text"> <p></p> Email <span style="font-weight: bolder;">*</span> <br> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text"> <p></p> Message <span style="font-weight: bolder;">*</span> <br> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <p></p> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button"> <p></p> <div style="text-align: center; max-width: 222px; width: 100%"> <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p> <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p> </div> </form>

Nếu cần thiết bạn có thể Việt hóa những chữ màu nổi bật: Name -> Tên; Message -> Lời nhắn (Thông điệp) 


Bước 8: Điều chỉnh kích thước form
Để điều chỉnh kích thước bạn cần chèn thêm đoạn CSS sau đây phía trên thẻ ]]></b:skin>

.contact-form-name,.contact-form-email { max-width: 200px; width: 100%; }  .contact-form-email-message { max-width: 500px; width: 100%; height: 200px; }

Có thể điều chỉnh kích thước trên cho cân đối với kích thước phần bài viết của blog.Như vậy bạn đã có form riêng hệ của riêng mình.
Google AdSense đã chính thức hỗ trợ nội dung tiếng Việt! Quả là tin vui đối với cộng đồng blogger Việt Nam nói chung và những người dùng Google Blogger như chúng ta nói riêng.

Như bạn đã biết, Google AdSense luôn được xem là chương trình quảng cáo hấp dẫn của những người kiếm tiền trên mạng. Trước đây, chương trình này chỉ cho phép các trang tiếng Việt đặt công cụ tìm kiếm, chủ nhân trang sẽ kiếm được tiền nếu người dùng nhấn vào quảng cáo trên kết quả tìm kiếm. Thường thì thu nhập từ đây rất ít do đó hầu hết mọi người đều viết bằng những ngôn ngữ được hỗ trợ mà phổ biến nhất là tiếng Anh để được tham gia quảng cáo nội dung.

AdSense tiếng Việt

Nay thì rào cản lớn nhất đã được xóa bỏ! Bạn có thể tham gia chương trình ngay trên blog tiếng Việt của mình. Các bước đăng ký:


Lời khuyên dành cho những người chuẩn bị đăng ký AdSense:

  • Không nên đăng ký Google AdSense với một blog thiết kế sơ xài chỉ với một vài bài viết.
  • Không nên sao chép bài viết của người khác lấy làm bài viết của mình. Google đủ thông minh để biết bài viết đó có nguồn gốc từ đâu.
  • Thay vào đó hãy phát triển blog để thu hút càng nhiều người xem càng tốt, bằng cách đăng nhiều nội dung do chính bạn viết, chia sẻ nội dung lên các mạng xã hội (Facebook, Google+, Twitter, Zing Me, Linkhay...), tham gia thảo luận trên các diễn đàn về chủ đề bạn viết... 
  • Nên nhớ rằng bạn viết blog để thu hút người đọc chứ không phải để đăng ký AdSense. Vì một lý do đơn giản, có người xem blog mới có người nhấn quảng cáo và bạn mới có tiền!

Ý kiến của bạn như thế nào? Xin để lại dưới phần nhận xét. Từ hôm nay, bạn phải có tài khoản Google+ mới có thể đăng nhận xét trên trang này.

Anh em Blogger đâu? Chuẩn bị blog chiến thôi!

Thứ Bảy, 22 tháng 6, 2013

Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến

PopularPosts là 1 widget có sẵn được Blogger đưa vào dùng thử nghiệm gần đây và được nhiều người đón nhận, đây là widget cho biết những bài đăng phổ biến được nhiều người đọc.
 Ngoài 3 dạng thống kê: 7 ngày qua, 30 ngày qua và mọi lúc nó có 4 kiểu hiển thị là: chỉ mình tiêu đề bài đăng, tiêu đề bài đăng và đoạn trích dẫn, tiêu đề bài đăng và hình ảnh, tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. 
Thủ thuật sau đây sẽ hiển thị PopularPosts với tiêu đề bài đăng và hình ảnh, còn đoạn trích dẫn sẽ hiển thị khi đưa chuột vào tiêu đề.

PopularPosts Title

Để làm được vậy chúng ta quan tâm tới đoạn mã của kiểu hiển thị thứ 4. Hãy xem trên blog của bạn đã có widget PopularPosts này chưa?

đánh dấu vào lựa chọn kèm theo hình ảnh thu nhỏ và trích đoạn. Kiểu thống kê thì tùy bạn chọn 1 trong 3 kiểu: 7 ngày qua, 30 ngày qua hay mọi lúc. Lưu thiết lập và chọn tải template về máy để tiến hành chỉnh sửa 

Mở template và tìm với từ khóa PopularPosts1. Trong đoạn mã của widget này có 4 đoạn mà Blogger đã chú thích: <!-- (1) No snippet/thumbnail --><!-- (2) Show only snippets --><!-- (3) Show only thumbnails --><!-- (4) Show snippets and thumbnails -->

Ở đây chúng ta quan tâm đến đoạn thứ 4, đó là nơi chứa mã của kiểu hiển thị tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Dưới đây là đoạn mã chúng ta cần chú ý:
<!-- (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>
Chú thích:
  • data:post.thumbnail: Địa chỉ của ảnh thứ nhất trong bài đăng được Blogger resize (thays72-c vào đường dẫn).
  • data:thumbnailSize: Kích thước ảnh mà Blogger resize, là ảnh hình vuông nên bao gồm luôn cả chiều cao và chiều rộng.
  • data:post.href: Địa chỉ của bài đăng.
  • data:post.title: Tiêu đề của bài đăng.
  • data:post.snippet: Đoạn trích dẫn của bài đăng.

Hoạt động của đoạn mã này:
Đầu tiên sẽ xem xem có địa chỉ ảnh cho bài đăng phổ biến này hay không qua lệnh diều kiện<b:if cond='data:post.thumbnail'>. Nếu đúng, một thẻ div với thành phần bên trong là thẻ imgchứa địa chỉ ảnh có liên kết tới địa chỉ của bài đăng được xuất hiện, bài đăng nào không có ảnh thì bỏ qua. Tiếp theo sau đó là 2 thẻ div lần lượt chứa tiêu đề bài đăng có liên kết tới địa chỉ của bài đăng <a expr:href='data:post.href'><data:post.title/></a> và đoạn trích dẫn<data:post.snippet/>.

Bây giờ chúng ta sẽ sửa lại đoạn mã này theo hướng hiển thị tiêu đề bài đăng với title là đoạn trích dẫn và hình ảnh với kích thước tùy chọn, loại bỏ đi liên kết tới địa chỉ của bài đăng khi click vào ảnh, thêm thuộc tính alt là tiêu đề bài đăng cho ảnh này. Một vấn đề nữa là khi dùng trình duyệt từ IE7 trở về trước thì tiêu đề bài đăng bị thụt xuống một đoạn so với ảnh.

PopularPosts Eror IE

Nhưng Để hiển thị tốt trên phiên bản trình duyệt này chúng ta đưa hình ảnh và tiêu đề bài đăng vào cùng 1 thẻ div. Đoạn mã trên được viết lại như sau:

<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <div class='item-title'>
        <b:if cond='data:post.thumbnail'>
            <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' border='0' width='38px' height='38px'/>
        </b:if>
        <a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
    </div>
</div>
Lưu lại và tải template lên Blogger.
Ảnh do Blogger resize có kích thước là 72x72 pixels sẽ mất cân đối khi hiển thị chỉ cùng với tiêu đề bài đăng. Đoạn mã trên đặt lại là 38x38 pixels, bạn tùy chỉnh cho phù hợp với blog của mình. Một điều mình mới phát hiện và bổ xung thêm vào đây là ảnh của bài đăng 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ó s1600s800... thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện trên widget PopularPosts.

Bạn Có thể thêm thuộc tính float:right cho class item-thumbnail để ảnh hiển thị bên phải.
Trong 3 kiểu hiển thị còn lại có ít thuộc tính hơn, tùy theo ý thích mà bạn chỉnh sửa cho phù hợp nếu muốn.
Chắc mọi người đều không xa lạ với hiệu ứng trình diễn ảnh chuyển động sử dụng jQuery. 
Hôm nay mình sẽ hướng dẫn áp dụng hiệu ứng này vào widget PopularPosts để trình diễn những bài đăng phổ biến dạng kiểu slider, widget PopularPosts này nằm ở phía trên của bài đăng.
Hình ảnh demo:

slider popular posts
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#gallery{-moz-box-shadow:0 2px 7px #555;-webkit-box-shadow:0 2px 7px #555;box-shadow:0px 2px 7px #555;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;position:relative;margin:0 35px 20px;width:540px;height:126px;background:#F4F4F4}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdtrbKcF54sBjoC9CtBbIJnPI51Xckk1Ecf366wsgRSOvuz_p11XiuQAzWllub-B3Xtl_vg1SXkFMBjbNAluWW6EGANzdGRkpdypbav-iGls0KdixoeHRQgEnBzCga3nNq-kb0YYn64juz/) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://duyphaminfo.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbYNvnMoppcGsXJVYpodepjqttz6E2550chuOAGZj_yiKVksyx0ktb3sU9uAnNyohpHh4zhEFVT8jWLDbvd4YLXrOFPZ54i251BKCizdy4M7u5YDRIX3TbMHMH0gwj75jaSyAcihD8J1J/", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIqax8kq4OLw529eVS0_eMMnYRdSvFDCde_QdmI5POjUrJvkpoi_WC_7Ttoi1jhSYvV9dKNrDvlcYF3ig9EkFELQMcXyJRAW98_NPDuuoslwW45y6wrOVDIejWaiMYtkZNTDk3SGWqPRkE/", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Bước 3: Tìm thẻ <b:section class='main' id='main' showaddelement='yes'/> hoặc <b:section class='main' id='main' showaddelement='no'/> và thêm vào sau nó đoạn mã dưới đây:

<b:widget id='PopularPosts2' locked='false' title='' type='PopularPosts'>
 <b:includable id='main'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbyIFSnFlsApJQckjKRF_jW6NARkjza0epEfQmlJ-27WZ_Xa8-oox_kp6beOdjnKVksYLDl_JjAonWck5ofK8MdnMo6J8f3F8R0q4_PBwYkx1Aj_oAE4Tf2G2uStMwh1cStOl_ox1K6XDM/'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div>
 </b:includable>
</b:widget>

Bước 4: Chuyển qua tab Phần tử trang và chọn chỉnh sửa widget PopularPost2 vừa tạo ở Bước 3. Phần Hiển thị chọn hình ảnh thu nhỏ và Hiển thị tối đa 10 bài đăng.

Lưu thiết lập và test

CHú ý: Để ảnh bài đăng xuất hiện trên widget PopularPosts thì phải có ít nhất 1 ảnh đượ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...
Thread Comment cơ bản đã là trực quan, tuy nhiên một số bạn còn muốn thêm đánh số thứ tự cho nhận xét tạo sự khác biệt. Việc đánh số thứ tự cho nhận xét giúp chỉ đích danh nhận xét đó và bài viết này sẽ giúp bạn làm điều đó. Đánh số theo comment có quy luật:
Số thứ tự được ghi theo thời gian nhận xét, có nghĩa nhận xét nào có trước sẽ được đánh số trước, nhận xét nào có sau sẽ được đánh số sau. 
Vì Thread Comment không sắp xếp theo thời gian nhận xét nên đương nhiên số thứ tự nhận xét cũng không xuất hiện tăng dần.
number comments2222222222
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.comments-number{position:absolute;top:55px;left:-44px;border-radius:10px;background:#d80556;width:20px;height:20px;font-size:10px;line-height:2em;color:#fff;text-align:center}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}

Bước 2: Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây: 

var items_copy=[];
(function() {

Bước 3: Thay thế đoạn mã var items = <data:post.commentJso/>; trong template của bạn bằng đoạn mã dưới đây: 

var items = <data:post.commentJso/>;
items_copy=items;

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn. 

<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b}
//]]>
</script>

Số thứ tự nhận xét có thể khiến khung nhận xét của bạn trở nên rối mắt, hãy cân nhắc trước khi sử dụng.