Bài viết liên quan ở sau bài viết quá quyên thuộc với chúng ta rồi. Bài viết này sẽ hướng dẫn các bạn tạo 1 box nhỏ chứa các bài viết liên quan tới bài đang đọc nằm ngày bên cạnh tiêu đề bài viết. Thủ thuật này hiển thị tốt với các bài viết có 1 nhãn , nếu 1 bài viết có nhiều nhãn thì các bài hiển thị trong box này cũng sẽ tăng theo. Ví dụ ta thiết lập cho 1 nhãn hiển thị trong box là 4 bài, thì với 2 nhãn ta sẽ có 8 bài.
Xem Demo:XEM DEMO
Ảnh minh họa:
☼ Bắt đầu thực hiện thủ thuật:
1. Vào Mẫu2. Vào Chỉnh sửa HTML
3. Chọn Mở rộng tiện ích mẫu
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script>
//<![CDATA[
function getRandomPosts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('rp-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
//]]>
</script>
<script type='text/javascript'>
var maxEntries = 4;
</script>
Trong đó: var maxEntries = 4; chính là số bài viết mà bạn muốn hiển thị cho 1 nhãn.5- Thêm đoạn code bên dưới vào trước thẻ ]]></b:skin>:
#rp-pre { float:right; width:150px; padding-left:10px; } #rp-content { border:1px solid #bbb; background:#eee; } #rp-title { text-align: center; background:#bbb; font-weight:bold; color:#F95107; margin:3px; padding-bottom:2px; } #rp-posts { position:relative; left:-20px; } #rp-posts a { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM2SBBpEmMg7OLCQpVjMwbDa6qThmsepPeQ2ouvD6f2nti6fNHnQhIrykBwUez3jh7vQNzVxhhbV1kzA3w_y-2GIDPgkrApPlb3bhsDMPePLqIinKmyUjdOC9CkFVjMsxS0RcnPtYriBU/s1600/icon-related-post-namkna-blogspot-com.gif) no-repeat left; padding-left:13px; } #rp-posts ul li { list-style :none; }
Tùy chỉnh!
- width:150px; là độ rộng của box bài viết liên quan.
- background:#bbb; màu nền chữ bài viết liên quan.
- color:#F95107; Màu chũ tiêu đề bài viết liên quan.
- box hiện thị ở bên phải, nếu bạn muốn nó hiển thị ở bên trái thì sửa code float:right; thành float:left;
<data:post.body/>7. Thêm đoạn code bên dưới vào trước dòng code vừa tìm được:
<b:if cond='data:blog.pageType == "item"'> <div id='rp-pre'> <div id='rp-content'><div id='rp-title'>Bài liên quan</div> <div id='rp-posts'/></div></div> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=getRandomPosts&max-results=999"' type='text/javascript'/> </b:loop> </b:if>8. Lưu mẫu lại và xem kết quả.
Cập nhật
Nếu blog bạn có tiện ích Auto read more thì thêm ngay trước đoạn sau:<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
Fandung.
Nhận xét
Namkna sao khi mình chèn vào code trước ]]bskin thì luôn luôn có lỗi.... Các chữ số và kí hiệu đặc biệt luôn nằm trên góc trên cùng của blog.
Trả lờiXóaNamkna help với !
Bạn để lại cho mình URL blog đã áp dụng thủ thuật này nha.
Xóaneobuxvietnam.blogspot.com
XóaVào mẫu (Không cần mở rộng tiện ích mẫu) Tìm đoạn code có dạng --> nằm trước thẻ ]]></b:skin> và xóa nó đi là Oke.
XóaNamkna chu đáo quá. Tks anh rất nhiều, BLog e phát triển cũng nhờ anh
XóaKhong có gì đâu em! :)
XóaChào bạn! Sao mình áp dụng mà box nằm hết chiều ngang bài đăng chứ không float:right; như bạn HD, bạn xem giúp mình nhé!
Trả lờiXóaNhớ chỉnh lại 2 phần này nha:
Xóa#rp-pre {
float:right;
width:150px;
padding-left:10px;
}
Mình đã tăng và giảm Width nhưng nó vẫn rộng bằng chiều ngang của bài đăng bạn à! Bạn xem lại giúp mình nhé!
XóaTemplate công lý đó có readmorre do vậy chèn code bước 7 ngay sau đoạn này:
Xóa<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
Bạn thân mến! Mình cũng đã làm vậy nhưng vẫn chưa được bạn à!
XóaBạn có thể gửi mẫu vào mail: tavannnam01@gmail.com không. Mình sẽ check kết quả cho.
XóaBạn thân mến bạn đang dùng mẫu Congly template Mẫu này có đôi chút khác biệt về bố cục. Sau khi kiểm tra lại templte Congly Mình đã tìm ra lỗi.
Xóabạn khắc phục bằng cách chèn đoạn code bước 7 vào phí sau đoạn code bên dưới là oke.
<!-- XEM BAI VIET -->
<b:if cond='data:blog.pageType == "item"'>
<div class='post-view'>
<h1><data:post.title/></h1>
<div class='time-view'><i><data:post.dateHeader/></i></div>
<div style='clear: both;'/>
Demo cho bạn: Xem ngay
Thêm một lưu ý: Khi test mình thấy icom bài liên quan bị lẹch khỏi ô bài viết liên quan bạn nhớ chỉnh lại đoạn css sau nha:
Xóa#rp-posts {
position:relative;
left:-20px;
}
- nếu thành công nhớ like để ủng hộ đó nha :)
Chào bạn! Cảm ơn bạn rất nhiều vì sự tận tình của bạn nhé!
XóaKhông có gì rất vui vì có ích với bạn.
Xóamình làm tương tự nhưng sao không thấy nó đâu nhỉ
Trả lờiXóaCó rất nhiều đoạn <data:post.body/> bạn phải chèn đúng vị trí mới hiển thị được.
XóaChào bạn, bạn có thể xem giúp mình tại sao mình không thể cài them các ứng dung sử dung js khác vào blog của mình được không?
Trả lờiXóaXin cảm ơn!
Css của mình đây: https://docs.google.com/file/d/0BxVc3TZJQec3X1Nxcm10bWZxVzQ/edit?usp=sharing.
XóaBạn xem giúp nhé!
Không lien quan đến CSS đâu bạn. Có thể do xung đột với các file Js có sẵn thôi. Muốn biết chính xác phải xem.
Xóa1- Bạn muốn thêm file JS nào.
2- FIle js đó chèn có đúng vị trí không.
3- Có bị trùng lặp js không.
Nam oi làm thế nào để lấp đầy các phần còn lại của tiện ích ! những chỗ còn lại nhìn trống quá
Trả lờiXóaNó tự căn và đẩy chữ lên như demo đó bạn ak. không bị trống đâu.
XóaXin chào bạn Nam. Mong bạn giúp mình với. Mình làm giống như code ở trên mà vẫn không có gì thay đổi. Blog của mình: http://viettruong92.blogspot.com/
Trả lờiXóaMột blog có 3 đoạn:
XóaVà bạn phải chèn đúng vị trí nó mới hiện. Hãy thử ở từng đoạn nha.
Tks Nam. Mình làm dc rồi
Trả lờiXóaKhông có gì :)
Xóabạn Nam Ta có thể giúp mh làm dc ko.sao mh làm ko dc nhỉ,nó ko hiện ra
Trả lờiXóaurl wap mh nhé: http://thienduongmobi.blogspot.com/
mà làm nó ở dưới bài viết như wap bạn ấy nha hi,cảm ơn bạn trước nhé!!
hãy áp dụng để được trợ giúp.
XóaNam Ta giúp mình giờ mình muốn biến popular post thành related post được không, mình muốn related post theo label nắm bên góc phải chỗ widger popular post đó
Trả lờiXóabẠN CHỈ cần dùng tiện ích reecent post là được thôi mà bạn. Bạn có thể chọn một trong các tiện ích ở đây nha: XEM NGAY
Xóacó ai giúp mình với. mình đã áp dụng tất cả các bài trong related post này mà k dc cái nào hết. blog của mình:
Trả lờiXóahttp://vaytindungsaigon.blogspot.com/
mail: tranhoangnam0910@gmail.com
Một blog có nhiều đoạn <data:post.body/> bạn chèn chưa đúng vị trí cần thiết nha.
Xóaanh ơi em làm post đầy dủ làm hết rồi, mà sao vẫn ko hiện được phần bài viết liên qua ạ
Xóahttp://hoclamtest.blogspot.com/
Vị trí em chèn chưa đúng, em chèn vào đoạn code hiện giao diện moblie rồi e kiểm tra lại đi nha.
XóaNam cho hỏi tiện ích này có một điểm chưa được là hiện cả tên chính bài viết đang xem ở related post !! làm sao để không có chính bài đó nữa ?
Trả lờiXóaVới lại: Có cách nào để mà chia các nhãn theo cột dọc không ? Mong Nam giải đáp sớm ! Cảm ơn bạn nhiều !
Nếu nhãn nào có ít bài viết nó sẽ hiển thị như vậy, tuy nhiên.
XóaNếu chia nhãn theo cột dọc thì diện ích nó chiếm sẽ lớn và sẽ không còn vị trí để hiển thị nội dung như vậy không khác gì thủ thuật tạo bài viết liên quan bình thường cả bạn ak.
Bạn ơi mình không tìm thấy mã ]]>: trong code blog của mình.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaMình không tìm thấy bước 5 bạn ah
Trả lờiXóaSao blog mình kg có thẻ này nhỉ ]]>: thẻ này thì có vì thế mà mình kg thể vận dụng thủ thuật bạn chia sẻ đc
Trả lờiXóa