"Hiển thị bài viết có ảnh thumb và phân trang"

(Traidatmui.com) – Thời gian qua có nhiều bạn đã yêu cầu mình giúp việc hiển thị bài dạng có ảnh thumbnail cho blogspot, và hôm nay mình xin chia sẽ đến các bạn thủ thuật này. Thủ thuật này chắc hẳn là các bạn đã gặp ở bên trang mothuthuat.com, tuy nhiên ở đây có một vài điểm khác biệt. Ở bên mothuthuat.com chỉ hiển thị cho tất cả bài viết trên blog, ở đây mình sẽ giúp các bạn hiển thị bài viết theo từng nhãn riêng trên blog của bạn. Thủ thuật này khá phức tạp, ở đây mình chỉ hướng dẫn các bạn những bước cơ bản và cần thiết không can thiệp nhiều vào các dòng mã script, bạn cần cẩn thận và từng bước thực hiện theo hướng dẫn.

1. Đầu tiên đăng nhập tài khoản Blogger
2. Vào phần thiết kế (Design) chọn chỉnh sửa HTML
3. Thêm ccode bên dưới vào trước thẻ ]]></b:skin>

.clear {clear: both;}
.home-navi {padding-left:8px;width:518px;}
.home-navi h2 {font-family:Times;border-bottom:1px solid #fff;padding-bottom:2px;margin-bottom:0px;}
.home-navi h2 a {color:#0000ff;padding-left:20px;margin-left:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjkJVyptzAajGBL15CeHHyVMTF8Zuzw-tlyW-XM0JLRI9mHjx3azWXf5efX7IQOx2idMQRS4Lal0kBVChmLV2yyAA141UFO9n0d_CHlylWX28qWxvLB60NmknoROYPgBDbZXqiaFF_C9Ej/) no-repeat; font-size:15px;text-decoration:none;}
.home-navi h2 a:hover {color:#ff0000;}
.authorpost {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglzpjt8fHHf-5ainHsCyNC4bFflDm4XJsbVX8SO8HwDT-fGYUef_WSqsrdf4LH3wkZTbf_g-y7MMYDU6trRgF4HO6X7i0u7vkY48H4uspZiReLx0E52b-V3NJLCDV6gi-LAVFNvTc4uLzg/) no-repeat; margin-left:30px;margin-top:3px;padding:0px 0px 0px 18px; font-size:12px;}
.continue{float:right;padding-right:10px;width:90px;text-align:center;}
.continue a {margin-bottom:-10px;}

#page-rc-tooltip {
color:#000099; text-align:center; font-weight:bold; padding-top:5px;padding-bottom:0px;}
#page-rc-tooltip a {color:#000033;text-decoration:none; border:1px solid #fff; padding:2px 5px;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2yXl8564T-K2xJ7gl813IPP3_jEUXZxZUKo7ddjTkLSUkZNhyLGroN-hjERNmITmmSRMugjpHepa430dTk258dix-CKcLoJB-pG7vefuLGTBNAyMq8n5SnIWiJYjIb9KuwZxlzZJSdX8q/') repeat-x scroll 0px 0px;}
#page-rc-tooltip a:hover {color:#0000ff; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6aKx8Ci9mVT2pOnpgfz6coWdVWYKS3VlSeQCcP7HhZ1kcAehG42MlTBVUE7dKO_BsY93AeDlF_dQ0lB7NMEhkedMuH0X7rPLOn2_nuKFH2gElJPcC4klPeDgvXniXQ_YDRcqwszo90_E7/') repeat}
#page-rc-tooltip span {border:1px solid #ccc; padding:2px 5px;background:#fff;}
#page-rc-tooltip span.currentpage {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6aKx8Ci9mVT2pOnpgfz6coWdVWYKS3VlSeQCcP7HhZ1kcAehG42MlTBVUE7dKO_BsY93AeDlF_dQ0lB7NMEhkedMuH0X7rPLOn2_nuKFH2gElJPcC4klPeDgvXniXQ_YDRcqwszo90_E7/');}

Phần css này là những dòng lệnh quen thuộc nên mình không giải thích nhiều nữa, bạn tự chỉnh sửa phần này.

4. Save template lại và trở về phần tử trang
5. Thêm 1 HTML/Javascript và thêm code bên dưới vào tiện ích đó

<script type="text/javascript">
//<![CDATA[
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;

}

function showrecentposts(json) {
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm ;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
var plabel = new Array();
var cate = entry.category;
if(cate) {
for (var k = 0; k < entry.category.length; k++) {
plabel[k] = ' <a class="label-link" href="http://www.traidatmui.com/search/label/'+entry.category[k].term+'">'+entry.category[k].term+'</a> ';
}
}
else {plabel = "No label";}

var authpost = entry.author[0].name.$t;

var postdate = entry.published.$t;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
postDay = day+ "/" + m + "/" + y ;

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else postcontent = "";

s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {img[i] = d;} else {img[i]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_PbfNq1ZfygNa8P2lPxILhyiLFcvoEf5o-4NlbeQVrG0p9dI6tn3cJmX3tnfmjyN9NFc1aWNfmXrU7emLj_A3HMxc-mcOuJPF-nMt5_IJjF7r1GvclfjOu8WYZj2bkoobO9Mj6OGjeDU8/";}

if (pcm==0) {var comment = " No Comment ";}
else {var comment = " "+ pcm + " Comments ";}

var td1 = '<div class="home-navi"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><div class="authorpost">Được đăng bởi <b>'+authpost+'</b> | on '+postDay+' | '+comment+'</div><p><img style="width:100px;height:90px; padding:3px;border:1px solid #fff;margin-right:5px;margin-bottom:5px;float:left;" src="'+img[i]+'" />'+removeHtmlTag(postcontent,500)+' ... </p><div class="continue"><a href="'+posturl+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR0PCeZ6AQloFs8AllsLQBTWSFmFw2bXNa3oDUn_puWa4K0Tvv6WqqW3mFLFzQui5QeChg3q3r5wvbDcDiPZwk4jYmC3JZzyZFwBQPsj8RHgxYUTM6q0Yil39_Vqa9KP2T5V2XEdiG5gza/" alt="Xem tiếp"/></a></div><div class="clear"></div></div>';

document.write(td1);
}
}

//page value

String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var str = location.href;
var page = str.GetValue("page");
if (page==undefined) { page = "1"; }

// get total number of posts
function numberOfPosts(json) {
document.write('<script style=\"text/javascript\">var totalPosts= '+json.feed.openSearch$totalResults.$t+' ;<\/script>');
}
document.write('<script src=\"http://www.traidatmui.com/feeds/posts/default/-/Advanced blogger?alt=json-in-script&callback=numberOfPosts\"><\/script>');

//]]>
</script>
<script type="text/javascript">
var rcpage = new Array();
var numposts = 5; // số bài viết hiển thị trong tiện ích này
var numpage=totalPosts/numposts;
var lastnum = totalPosts%numposts;
if (lastnum==0) {numpage=numpage+1;}

for (var m=1;m<numpage;m++) {
var start=numposts*(m-1)+1;
rcpage[m] ="<script src=\"http://www.traidatmui.com/feeds/posts/default/-/Advanced blogger?start-index="+start+"&max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>";
}
if ((page>numpage)&&(page<numpage+1)) {
var numposts=lastnum;
start = totalPosts-lastnum+1;
document.write("<script src=\"http://www.traidatmui.com/feeds/posts/default/-/Advanced blogger?start-index="+start+"&max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
}
else if (page>numpage){document.write("<div style=\"width:450px;color:#f00;font-weight:bold;padding:10px; border:1px #ccc solid;\">This page does not exist. Please check link again<\/div>"); }
else {document.write(rcpage[page]); }
</script>
<script type="text/javascript">
if (lastnum==0) {var pagelist=totalPosts/numposts;} else {var pagelist=numpage+1;}
var pagelist1 = parseInt(pagelist);

var npage = parseFloat(page);

if (page<=parseInt(pagelist)) {

if ((pagelist>2)&&(pagelist1<6)) {

document.write("<div id=\"page-rc-tooltip\">Page ("+page+"/"+parseInt(pagelist)+") : ");
for (var n=1;n<pagelist1+1;n++) {
if (n==npage) {var navpage=" <span class=\"currentpage\" >"+n+"<\/span>";} else {var navpage=" <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+n+"\">"+n+"<\/a>";}
document.write(navpage);
}
document.write(" | "+totalPosts+" posts<\/div>");
}

if ((pagelist>=6)&&(page<4)) {
document.write("<div id=\"page-rc-tooltip\">Page ("+page+"/"+parseInt(pagelist)+") : ");
for (var n=1;n<6;n++) {
if (n==npage) {var navpage=" <span class=\"currentpage\" >"+n+"<\/span>";} else {var navpage=" <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+n+"\">"+n+"<\/a>";}
document.write(navpage);
}
if (parseInt(pagelist)>5) { document.write("... <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+parseInt(pagelist)+"\">Last<\/a> | "+totalPosts+" posts<\/div>"); } else {document.write(" | "+totalPosts+" posts<\/div>");}
}

else if ((pagelist>=6)&&(page>3)&&(page<parseInt(pagelist)-2)) {
var first = page-2;
var last = first+5;
document.write("<div id=\"page-rc-tooltip\">Page ("+page+"/"+parseInt(pagelist)+") : <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page=1\">First<\/a> ...");
for (var n=first;n<last;n++) {
if (n==npage) {var navpage=" <span class=\"currentpage\" >"+n+"<\/span>";} else {var navpage=" <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+n+"\">"+n+"<\/a>";}
document.write(navpage);
}
document.write("... <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+parseInt(pagelist)+"\">Last<\/a> | "+totalPosts+" posts<\/div>");
}

else if ((pagelist>=6)&&(page>3)&&(page>parseInt(pagelist)-3)) {
var first = parseInt(pagelist)-4;
var last = parseInt(pagelist)+1;
document.write("<div id=\"page-rc-tooltip\">Page ("+page+"/"+parseInt(pagelist)+") : <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page=1\">First<\/a> ...");
for (var n=first;n<last;n++) {
if (n==npage) {var navpage=" <span class=\"currentpage\" >"+n+"<\/span>";} else {var navpage=" <a href=\"http://www.traidatmui.com/2010/02/blogger-nang-cao.html?page="+n+"\">"+n+"<\/a>";}
document.write(navpage);
}
document.write(" | "+totalPosts+" posts<\/div>");
}
}
</script>

Chỉnh sửa code:
- Bạn hãy thay địa chỉ http://www.traidatmui.com trong code trên (màu xanh đậm) thành địa chỉ site của bạn.
- Dòng màu đỏ đậm trong code chính là nhãn bài viết Advanced blogger, bạn thay thành tên nhãn bài viết mà bạn muốn hiển thị.
- Các dòng màu cam là nơi bạn đặt tiện ích này http://www.traidatmui.com/2010/02/blogger-nang-cao.html, bạn hãy thay thành địa chỉ nơi mà bạn đặt tiện ích này trên trang của bạn. Bạn nhớ thay toàn bộ dòng màu cam ở trên nếu không phần phân trang của bạn sẽ bị lỗi, không sử dụng được.

6. Cuối cùng là save tiện ích lại

Ở trên là phần mình đã hướng dẫn các bạn hiển thị bài viết theo tùng nhãn cho tiện ích, tuy nhiên nếu bạn muốn hiển thị cho toàn bộ bài viết trên trang của bạn thì bạn thực hiện thêm bước sau

A. Tìm đến tên nhãn trong code ở bước 5 Advanced blogger và bạn tiến hành xóa tên nhãn đi, lưu ý bạn phải xóa tên nhãn cùng với dấu "/-/" trước nó đi, nếu không nó sẽ không hiển thị được. Ví dụ ban đầu ta có

http://www.traidatmui.com/feeds/posts/default/-/Advanced blogger

Sau khi xóa sẽ còn lại như bên dưới

http://www.traidatmui.com/feeds/posts/default

Bạn cần thực hiện việc xóa này ở 3 vị trí có chứa tên nhãn (xóa tương tự như trên. Bạn cần phải cẩn thận xóa cho đúng, nếu không code sẽ bị lỗi.

B. Sau khi xóa xong bạn save lại là xong

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