Để người xem dễ dàng xem các bài viết có cùng nhãn là tạo một tab chứa các bài viết liên quan đến vấn đề đang đọc. Và phổ biến nhất là cho tab này hiển thị cuối bài viết. Thủ thuật blogger trước mình đã hướng dẫn các bạn một số cách tạo bài viết liên quan cho Blog, hôm nay Team Blogger xin giới thiệu thủ thuật tạo bài viết mới hơn và cũ hơn cùng chủ đề cho blog.
>>Random Posts - Thủ thuật bài viết ngẫu nhiên cho Blogger Version 1
>>Emoticons - Thủ thuật chèn biểu tượng vào bình luận Blogger
>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh ngang cho Blogger
>>Recent Post - Thủ thuật Recent post load từ trên xuống cho BLogger
>>Recent Post - Thủ thuật Recent Post chạy ngang có ảnh chạy trước cho Blogger
>>Recent Post - Thủ thuật Recent Post chạy ngang cho Blogger
>>Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS
>>Menu - Thủ thuật tạo Menu ngang cho Blogger bằng CSS
>>Back To Top - Thủ thuật nút lên đầu trang trong Blogger
>> Tắt/Mở đèn - Thủ thuật hiệu ứng tắt mở đèn cho Blogger
>>Image - Thủ thuật LazyLoad load ảnh theo trình tự trong bài viết Blogger
Bước 1: Cài đặt bài đăng:
1- Vào phần Bố cục (Layout).
2- Vào chỉnh sửa của Tiện ích "Bài đăng trên blog"
3- Và chỉnh sửa thiết lập như hình bên dưới.
4- Vào Cài đặt ► Định dạng và chọn Định dạng dấu ngày tháng như hình bên trên (xem hình minh họa bên dưới).
5- Blog bạn phải có link feed (nếu chưa có, thì vào cách tạo FeedBurner).
Bước 2- Chèn code vào
1- Đăng nhập Blog.2- Vào Chỉnh sửa HTML3- Nhấp vào Mở Rộng Tiện ích4-Tìm dòng code sau:
<div class='post-footer'>
Chèn ngay sau nó đọan code bên dưới:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.labels'>
<div id='bailienquan'>Đang load dữ liệu...</div>
<span id='label_list_display_none' style='display:none; visibility:hidden'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast
!= "true"'>,</b:if></b:loop></span>
<span id='post_time_stamp' style='display:none; visibility:hidden'><data:post.timestamp/>
</span>
<br/>
</b:if>
</b:if>
Tiếp tục, chèn đoạn code bên dưới vào ngay trên thẻ đóng </body>:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
home_page = "http://www.thietkeblogger.net/";
maxPosts = 10;
feed2js = "http://feed2js.org//feed2js.php";
</script>
<script>
//<![CDATA[
var label = document.getElementById("label_list_display_none").innerHTML;
//label = (label != undefined) ? label.split(",") : "nonoLabel";
label = label.split(",");
var maxPostsPerLabel = Math.round(maxPosts/label.length);
function format(ptime){
s = ptime.split(" ");
sdate = s[0].split("/");
sdate[0] = (parseInt(sdate[0])<10) ? "0"+sdate[0] : sdate[0];
Ddate = sdate[2]+"-"+sdate[0]+"-"+sdate[1]; stime = s[1].split(":");
if(s[2]=="PM"){
if(stime[0]!="12"){
stime[0] = parseInt(stime[0])+12;
}
}
Ttime = stime[0]+":"+stime[1]+":"+stime[2];
T = Ddate+"T"+Ttime;
return T;
}
function v_cblq(vLabel2,what,_mxp) {
var vLabel2 = vLabel2.replace(/ /g,"%20");
vLabel2 = escape(vLabel2);
var p_date2 = format(document.getElementById("post_time_stamp").innerHTML);
document.write('<script language="JavaScript"' + ' src="'+feed2js+'?src=' + escape(home_page) + 'feeds%2Fposts%2Fsummary%2F-%2F' + vLabel2 + '%3Fpublished-'+what+'%3D' + escape(p_date2) + '%26max-results%3D' + _mxp + '&num=' + _mxp + '&date=n&utf=y&pc=y"' + ' type="text/javascript">' + '</scr'+'ipt>');
}
function creattaga(ctag_m){
for (var i=0;i<label.length;i++){
v_cblq(label[i],ctag_m,maxPostsPerLabel);
}
}
//]]>
</script>
<div id='cacbailq1' style='display:none; visibility:hidden; height:0px'>
<script type='text/javascript'>creattaga("min");</script>
</div>
<div id='cacbailq2' style='display:none; visibility:hidden; height:0px'>
<script type='text/javascript'>creattaga("max");</script>
</div>
<div class='cacbailienquan' id='cacbailienquan' style="display:none;">
<script src='http://thietkewebplus.googlecode.com/files/related_posts_02.js'
type='text/javascript'/>
<script type='text/javascript'>
displayCBLQ("cacbailq1","Các bài mới nhất cùng chủ đề:");
displayCBLQ("cacbailq2","Các bài cũ hơn cùng chủ đề:");
</script>
</div>
</b:if>
Trong đó:
- Thay http://www.thietkeblogger.net/ thành URL blog của bạn
- maxPosts = 10; : số bài viết sẽ hiển thị.
Lưu ý : Code chạy rất đẹp với các nhãn tiếng Anh hoặc tiếng Việt không dấu. Với các nhãn tiếng Việt, có một số từ code không hiểu được nó, do đó không lấy được các bài liên quan. Vì thế, các bạn nên sử dụng ít nhãn tiếng Việt trong blogspot thôi, hoặc chỉ nên dùng nhãn tiếng Việt không dấu là tốt nhất.
Đăng nhận xét