• 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 Bài viết liên quan có phân trang

10
14/12/2010

Lấy cảm hứng từ tiện ích Bài viết liên quan có phân trang từ blog Hỗn tạp, tôi có điều chỉnh một số điểm và có hướng dẫn chi tiết hơn để giúp cho tiện ích Bài viết liên quan có phân trang (Related Posts with Navigation) trở nên hoàn thiện hơn.

Xem Demo.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

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

<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px}
#related-posts .widget{margin-bottom:10px}
#related-posts .widget h2,#related-posts h2{height:25px;color:blue;font-size:15px;font-weight:bold;font-family:Arial,Tahoma,Times New Roman,serif;margin:0 4px 0;margin-top:4px;padding:0 0 5px}
#related-posts a{color:blue;text-decoration:none}
#related-posts a:hover{color:blue}
#related-posts ul{list-style-type:none;margin:0 0 0 0;padding:0;text-decoration:bold;font-size:13px;text-color:#000}
#related-posts ul li{display:block;background:url(&quot;http://bit.ly/hjpshO&quot;) no-repeat 0 0;list-style-type:none;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:21px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #ccc}
.related-posts-navi a{border:1px solid #36c;background:#fff;color:#36c;display:block;float:left;margin-right:10px;padding:2px 5px;text-decoration:none}
.related-posts-navi a:hover{background:#36c;color:#fff;text-decoration:none}
.related-posts-navi .related-posts-navi-selected{background:#36c;color:#fff}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
</script>
</b:if>
<!--Related Posts Scripts and Styles End-->

Chú ý trong phần code ở trên, tôi thêm vào đoạn javascript được đánh dấu màu đỏ nhằm giúp cho thư viện jQuery không xung đột với các thư viện khác (nếu blog của bạn chứa các thư viện khác như Scriptaculous chẳng hạn), bởi vì nếu xảy ra sự xung đột thì chức năng phân trang sẽ không hoạt động được.

Bước 2. Tìm dòng <div class='post-footer-line post-footer-line-1'>
rồi đặt trước nó với đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='related-posts'/>
</b:if>

Bước 3. Tìm dòng <b:includable id='feedLinksBody' var='links'>
rồi đặt trước nó với đoạn code sau đây.

<b:includable id='related-posts' var='post'>

<div id='related-posts'>
<h2>Bài viết liên quan</h2>
<ul id='related-posts-list'/>
</div>
<script type='text/javascript'>
var relatedPostsConfig = {
maxPosts: 500,
perLabel: 100,
perPage: 7,
hiddenLabel: [&#39;Label 1&#39;, &#39;Label 2&#39;, &#39;Label 3&#39;]
};

function getRelatedPosts(json) {
var posts = [],
num = 0,
max = (relatedPostsConfig.maxPosts - relatedPostsConfig.count &gt; json.feed.entry.length) ? json.feed.entry.length : (relatedPostsConfig.maxPosts - relatedPostsConfig.count); // max number of entries can be loaded

if (max &lt;= 0) {
return;
}

for (var i = 0; i &lt; max; i++) {
entry = json.feed.entry[i];

posts[num] = {};
posts[num].title = entry.title.$t;
for (var j = 0; j &lt; entry.link.length; j++) {
if (entry.link[j].rel == &quot;alternate&quot;) {
posts[num].url = entry.link[j].href;
break
}
}
num++;
}

relatedPostsConfig.count += max;

for (i = 0; i &lt; num; i++) {
var li = document.createElement(&quot;li&quot;),
a = document.createElement(&quot;a&quot;);
a.href = posts[i].url;
a.title = posts[i].title;
a.appendChild(document.createTextNode(posts[i].title));
if (a.href != location.href) {
li.appendChild(a);
relatedPostsConfig.container.appendChild(li);
}
}
}

(function() {
var obj = {};
for(var i = 0; i &lt; relatedPostsConfig.hiddenLabel.length; i++) {
obj[relatedPostsConfig.hiddenLabel[i]] = &#39;&#39;;
}

relatedPostsConfig.count = 0;
relatedPostsConfig.container = document.getElementById(&quot;related-posts-list&quot;);
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
if (!(&#39;<data:label.name/>&#39; in obj)) {
document.write(&#39;&lt;script type=&quot;text/javascript&quot; src=&quot;/feeds/posts/summary/-/&#39;+&#39;<data:label.name/>&#39;+&#39;?alt=json-in-script&amp;callback=getRelatedPosts&amp;max-results=&#39;+relatedPostsConfig.perLabel+&#39;&quot;&gt;&lt;/&#39; + &#39;script&gt;&#39;);
}
</b:loop>
</b:loop>
})();

$(function(){
var pages = 1;
while ($(&#39;#related-posts-list &gt; li&#39;).length) {
var $ul = $(&#39;&lt;ul/&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
$(&#39;#related-posts-list &gt; li:lt(&#39;+relatedPostsConfig.perPage+&#39;)&#39;).appendTo($ul);
pages++;
}
$(&#39;#related-posts &gt; ul:gt(1)&#39;).hide();
var $div = $(&#39;&lt;div class=&quot;related-posts-navi&quot;/&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
for (var i = 1; i &lt; pages; i++) {
var $a = $(&#39;&lt;a id=&quot;related-posts-page-&#39; + i + &#39;&quot; href=&quot;#&quot;/&gt;&#39;).click(function(){
var id = $(this).attr(&#39;id&#39;).substr(19);
$(&#39;#related-posts &gt; ul&#39;).hide();
$(&#39;#related-posts &gt; ul:eq(&#39; + id + &#39;)&#39;).show();

// change class
$(&#39;.related-posts-navi &gt; a&#39;).removeClass(&#39;related-posts-navi-selected&#39;);
$(this).addClass(&#39;related-posts-navi-selected&#39;);
return false;
}).append(i).appendTo($div);
}
$(&#39;.related-posts-navi &gt; a:first&#39;).addClass(&#39;related-posts-navi-selected&#39;);
$(&#39;&lt;div style=&quot;clear:both&quot; /&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
});
</script>
</b:includable>

Lưu Template là OK.

Chú ý: Trong đoạn code trên, bạn có thể thay đổi những tham số trong những dòng sau đây:

maxPosts: 500,
perLabel: 100,
perPage: 7,
hiddenLabel: [&#39;Label 1&#39;, &#39;Label 2&#39;, &#39;Label 3&#39;]

Trong đó:
- maxPosts: chỉ số lượng bài viết liên quan (tối đa) được hiển thị
- perLabel: chỉ số lượng bài viết liên quan (tối đa) tính theo mỗi label
- perPage: chỉ số lượng bài viết liên quan được liệt kê trong 1 trang
- hiddenLabel: danh sách các label không hiển thị, phân cách bằng dấu phẩy. hiddenLabel được dùng khi bài viết của bạn có nhiều label, trong đó có 1 số label đặc biệt mà bạn không muốn liệt kê các bài viết liên quan nằm trong đó (VD 'Thông báo', 'Tổng hợp', ...). Khi đó bạn chỉ cần liệt kê các label dạng này vào biến hiddenLabel là xong. Nếu muốn hiển thị tất cả các label (không ẩn label) nào thì khai báo: hiddenLabel: []

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

{10 bình luậnAdd yours ?}

15:18:00, 24 thg 1, 2011

Sau mình làm nó không ra dạng phân trang 1--> 4 như bạn mà nó hiển thị hết các tiêu đề trong nhãn ra luôn giúp mình với ):

Reply
21:01:00, 24 thg 1, 2011

@Đinh_Thiên_Hoàn Trong Template bạn có sẳn file jquery.js nên k hoạt động, bạn chỉ nên dùng 1 file jquery.js thôi nhé. :53) :(

Reply
17:48:00, 7 thg 2, 2011

mình đã thử o 1 cái Template hoàn toàn mới nhưng nó vẫn thế bạn xem lại giùm nha

Reply
17:54:00, 7 thg 2, 2011

híc ở cùng 1 Template nhưng khi mình chèn thêm thủ thuật"Tiện ích bài viết mới nhất với hiệu ứng autoscroll bằng Jquery " ở http://www.traidatmui.com/2010/11/tien-ich-bai-viet-moi-nhat-voi-hieu-ung.html thì nó lại hiển thị tốt. khi mình không sử dụng thì nó lại như cũ.:((

Reply
19:41:00, 7 thg 2, 2011

:D mình xoa bỏ đoạn code
< thành &lt;

> thành &gt;

" thành &quot;

' thành &#039;

màu đỏ đi nó lại ok Good :))

Reply
06:11:00, 5 thg 3, 2011

Nó cũng hiện bài trùng lặp nhiều nữa.
Không biết có phải do xóa code màu đỏ ko nhỉ?

Reply
06:14:00, 5 thg 3, 2011

Mà sao trong demo nó lại chạy ngọt ngào thế nhỉ :60)
Mình cũng đâu có dùng thư viện jquery nào khác đâu.

Reply
17:15:00, 21 thg 3, 2011

Ak.Nó hiện lên trên đầu tiên bạn ơi.Mình tưởng nó hiển thị xuống cuối bài chứ nhể.
Có cách nào khắc phục không bạn

Reply
02:17:00, 31 thg 8, 2011

Tớ làm mấy lần mà không được thủ thuật này,mai chỉ giúp mình với nhé.Khuya quá rồi ngủ thui :74)

Reply
02:21:00, 31 thg 8, 2011

Hình như cái Emoticons 4 comment bị lộn hình ,hàng dưới từ trái qua cái số 9 và 10 :73) :74)

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