• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tiện ích Nhận xét mới nhất không dùng Javascript

10
02/07/2011

Để một blogspot có tốc độ load trang nhanh nhất trong một chừng mực nào đó thì việc sử dụng các tiện ích không dùng đến hoặc hạn chế dùng javascript là một giải pháp tối ưu nhất. Mình đã từng giới thiệu các tiện ích Bài viết mới nhất cho cả blog và Bài viết mới nhất cho từng nhãn, Auto Readmore không dùng javascript. Để thêm vào bộ tiện ích không javascript này, hôm nay xin giới thiệu tiếp một tiện ích không dùng javascript, đó là tiện ích Nhận xét mới nhất không dùng javascript (Recent Comments without Javascript).

Để tạo tiện ích này, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expadn Widget Templates. Tìm đến một thẻ đóng </b:widget> tại khu vực một tiện ích nào đó mà bạn định đặt tiện ích Nhận xét mới nhất gần với tiện ích đó. Đặt sau thẻ </b:widget> với đoạn code bên dưới.

<b:widget id='BlogList100' locked='false' title='Nhận xét mới nhất' type='BlogList'>
<b:includable id='main'>
<!-- Recent Comments without Javascript by Huynh Nhat Ha -->
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:items' var='item'>
<li>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Lưu Template.

Bước 2. Vào Page Elements, tìm đến widget có tiêu đề Nhận xét mới nhất, chọn Edit để chỉnh sửa. Nhấn ADD TO LIST rồi lần lượt dán các URL theo thứ tự bên dưới:

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=1

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=2

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=3

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=4

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=5

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=6

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=7

Chú ý thay huynh-nhat-ha bằng tên blogspot của bạn. Nhấn SAVE để lưu tiện ích.

Đến đây có thể hoàn thành một tiện ích Nhận xét mới nhất không dùng javascript, tiện ích này hiển thị một list các tiêu đề nhận xét với thuộc tính title hiển thị đoạn trích dẫn nhận xét (khi rê trỏ vào tiêu đề nhận xét).

Bạn có thể so sánh 2 URL sau đây để xác định một vấn đề quan trọng:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default (1)

http://huynh-nhat-ha.blogspot.com/feeds/comments/default (2)

So sánh 2 URL trên bạn có thể thấy URL (1) là feed của bài viết, trong feed này có thumbnail, URL (2) là feed của nhận xét, trong feed này không có thumbnail. Chính vì vậy mà tiện ích Nhận xét mới nhất không dùng javascript không thể hiện thị thumbnail. Nếu sau này trong feed của nhận xét trên blogspot có sự cải tiến để hiển thị Avatar thì lúc đó tiện ích Nhận xét mới nhất không dùng javascript này có thể hiện thị Avatar.

Nếu bạn muốn tiện ích Nhận xét mới nhất không dùng Javascript có hiệu ứng màu sắc và đánh số như trên trang chủ của Bloggerism thì bạn có thể áp dụng thêm Bước 3.

Bước 3. Vào Edit HTML. Đặt đoạn code dưới đây vào trước thẻ </head>.

<style type='text/css'>
#BlogList100 {
width:280px;
margin: 40px 0 0;
}
#BlogList100 ul{
list-style-type: none;
margin: 0 0 10px;
padding: 0;
}
#BlogList100 ul li {
width:280px;
height:50px;
margin: 5px 0 ;
padding: 10px;
list-style:none;
}
.red1 { background: #8787ff; }
.red2 { background: #9797ff;width:97% !important;}
.red3 { background: #a7a7ff;width:94% !important;}
.red4 { background: #b7b7ff;width:91% !important;}
.red5 { background: #c7c7ff;width:88% !important;}
.red6 { background: #d7d7ff;width:85% !important;}
.red7 { background: #e7e7ff;width:82% !important;}
.red8 { background: #f0f0ff;width:79% !important;}
.num {font-size:60px; margin: 15px 5px 15px -5px; float:left; color:#f5f5f5;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js ' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#BlogList100 ul&#39;).children(&#39;li&#39;).addClass(function (i) {
return &#39;red&#39; + (i+1);
});
$(&quot;#BlogList100 ul&quot;).each(function() {
$(&quot;li&quot;, this).each(function (i) {
$(this).prepend(&quot;<span class='num'>&quot; + (i+1) + &quot;</span>&quot;);
});
});
});
</script>

Ở đây mình dùng thêm jQuery để tạo hiệu ứng màu sắc cho tiện ích thêm vẻ độc đáo. Hy vọng tiện ích này sẽ giúp bạn hài lòng với tiêu chí vừa nhẹ mà vừa đẹp lại vừa đủ tính năng (ráng chờ Blogger cải tiến để thêm Avatar nhé bạn).

{10 bình luậnAdd yours ?}

20:06:00, 2 thg 7, 2011

good

Reply
23:31:00, 2 thg 7, 2011

cái này cũng hay, cơ mà vẫn bị phụ thuộc vào start-index nên dài nhỉ

Reply
11:27:00, 3 thg 7, 2011

đã áp dụng thành công. Cảm ơn bạn rất nhiều :55)

Reply
23:12:00, 4 thg 7, 2011

blog cau nhanh nhi :53)

Reply
01:39:00, 30 thg 8, 2011

Nghe pác nói cái này nhẹ nên em dùng,đa tạ pác

Reply
15:59:00, 30 thg 8, 2011

Hu hu,nó sao hiển thị bình luận chậm quá trời luôn,bình luân xong cả giờ sau mới hiện lên

Reply
17:59:00, 30 thg 11, 2011

Cám ơn anh Hà. Nhưng sao không thấy hiện tên blog lên anh nhể ? :A)

Reply
22:49:00, 30 thg 11, 2011

nói k dùng script, vậy nói cũng được sao bác

Reply
23:00:00, 30 thg 11, 2011

vẫn là bác hà thích dài dòng.
nếu muốn hiển thị nhận xét mới cho blogspot ,thì tạo tiện ích nguồn cấp rss ,
đưa url,của blog mình vào là đươc rồi,
ví dụ,http://me.blogspot.com/feeds/comments/default

Reply
22:27:00, 3 thg 10, 2016

vi vu, vui ơi là vui

hiep dam

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn