Adv Recent Posts - Load nhiều tiện ích RP cùng 1 lúc

Adv recent posts đơn giản chỉ là tiện ích recent posts thông thường, nhưng được mở rộng ra hơn 1 chút là có thể hiển được nhiều tiện ích recent posts với 1 lần load so với cách cũ là mỗi lần load chỉ hiển thị 1 tiện ích recent posts. Và 1 điểm nữa là chỉ sử dụng link feeed chính của blog, mà không cần dùng link feed theo từng nhãn.

Xem DEMO

Cập nhật thêm DEMO:

Tiện ích VnE TabNews với Adv Recent Posts : XEM

Ở bài viết trước mình đã giới thiệu sơ qua về thủ thuật này rồi, nên mình sẽ không nói lại. Và 1 lưu ý nữa là : ở thủ thuật này mình sẽ chỉ giới thiệu đoạn mã javascript và cách chỉnh sửa nó, còn việc thực hiện bố cục hiển thị cũng như thiết kế giao diện cho từng tiện ích thì mình sẽ không giới thiệu.

Hình ảnh minh họa
(click vào ảnh để xem với kích thước thật)

- Trước tiên thực hiện thủ thuật, các bạn phải xác định vị trí hiển thị cho các tiện ích recent posts. Ví dụ như mình có 4 tiện ích recent posts, và mình muốn chúng hiển thị ở phần main, và có bố cục như bên dưới (như trong demo) thì mình sẽ phải tạo 1 widget HTML/javascript (ví dụ HTML1) và nó có nội dung như bên dưới :

+ Hình minh họa:

+ Code mẫu của widget HTML:

<table>
<tbody>
<tr>
<td>
<div id="a11">
<h3>Blogger Tips</h3>
<div id="label1"></div>
</div>

<div id="a22">
<h3>Thong bao</h3>
<div id="label2"></div>
</div>
</td>
</tr>

<tr>
<td>
<div id="a33">
<h3>BlOg FD</h3>
<div id="label3"></div>
</div>

<div id="a44">
<h3>jQuery</h3>
<div id="label4"></div>
</div>

</td>
</tr>
</tbody>
</table>

- Ngoài ra các bạn cũng có thể đặt 1 cái RP ở Sidebar, và 4 cái ở phần main cũng được, nhưng quan trọng là bạn hãy nhớ các id : label1, label2, ... label5. Như vậy thì ở phần sidebar ta sẽ có 1 cái widget HTML/javascript có nội dụng như sau tương tự như sau:

<div id="a55">
<h3>Film</h3>
<div id="label5"></div>
</div>

- Các bạn sẽ thắc mắc tại sao nội dung nó chỉ là các thẻ div rỗng. Thẻ div rỗng nãy sẽ là địa chỉ mà mã javascript sẽ hiển thị bài viết vào, dựa vào các id đã được đặt sẵn. Như vậy quan trọng chỉ là thẻ các thẻ div : <div id="label1"></div> , <div id="label2"></div> , ... <div id="label5"></div> .
- Phần tạo bố cục và xác định vị trí cho các tiện ích hiển thị thì mình sẽ chỉ hướng dẫn được như vậy thôi, phần còn lại (viết code CSS và HTML) thì mình để lại cho các bạn. Bởi mình có hướng dẫn cụ thể 1 bố cục hoặc 1 giao diện nào đó thì cũng khó mà "tông/tông" với blog của mỗi người.

Và bây giờ là code của thủ thuật :
- Đầu tiên các bạn sẽ chèn đoạn mã script này vào trước thẻ </head>

//<![CDATA[
function stripHtmlTags(s,max){
s=s.replace(/<br.*?>/ig, ' ');
return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')
}
function showadvrp(json) {
img = new Array();
var n1 = 0;
var n2 = 0;
var n3 = 0;
var n4 = 0;

for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;

var pcm ;
var posturl;


if("media$thumbnail" in entry){
var thumburl = entry.media$thumbnail.url;
}
else{ var thumburl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh855mfLHlvTGOJZ1t8vaWy7hJmaU_lDiCiwPstlpqOQp4aYn6d-IXAssmz0CDx0TS3TwP8GmWT8E-cDgxpMokCv5F6k0J0mF1oGTJMbgmhWr3RsQEArGNGKKBfDpT8cRJbMBLUouH22BeX/"};


for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

if ("thr$total" in entry) {pcm=entry.thr$total.$t;}
else {pcm="none";}

if (pcm==0) {var comment = 'No comment';}
else if (pcm=='none') {var comment = '<span style="color:#f00;">Do not comment here</span>';}
else {var comment = '<font style="color:#0082ff;">'+ pcm +'</font> Comments';}


var plabel = new Array();
var textlabel = 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.fandung.com/search/label/'+entry.category[k].term+'">'+entry.category[k].term+'</a> ';
textlabel [k]=entry.category[k].term;
}
var condlabel=textlabel.join(" ");
}
else {plabel = "No label";}

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/AVvXsEjnI09RTXTrasc4f8rvDONRtMuZub5D_4l6-jQ1WGCn_8ymvjT2nNIavXtOACIrb6dz1BJV4PfPAV_1u8_tnKsJTRBHQ29ECHCq1nIHUN0gwadTkHWjVXthbDzNXaAnO37MJmaFIwI4gpI/s400/noimage.png";}

var advrc = '<li class="adv-rc-list"><img src="'+thumburl+'" style="width:40px; float:left;padding:1px; border:1px solid #ccc;margin-right:5px;" /><a href="'+posturl+'">'+posttitle+'</a><br/><i style="color:#888;">('+comment+')</i></li>';
var advrc_0 = '<li class="adv-rc-list-0"><img src="'+img[i]+'" style="width:100px;height:90px; float:left;padding:1px; border:1px solid #ccc;margin-right:5px;" /><a href="'+posturl+'"><b>'+posttitle+'</b></a><br/><i style="color:#888;">('+comment+')</i><br/>'+stripHtmlTags(postcontent,32)+' ...<p style="border-bottom:1px dashed #f80;margin:7px 0;"></p></li>';
var advrc_01 = '<li class="adv-rc-list-01"><a href="'+posturl+'"><b>'+posttitle+'</b></a> - <i style="color:#888;">('+comment+')</i><br/><img src="'+img[i]+'" style="width:100px;height:90px; float:left;padding:1px; border:1px solid #ccc;margin-right:5px;" />'+stripHtmlTags(postcontent,32)+' ...</li><p style="border-bottom:1px dashed #f80;margin:7px 0;"></p>';
var advrc_1 = '<li class="adv-rc-list-1"><a href="'+posturl+'"><b>'+posttitle+'</b></a><br/><i style="color:#888;">('+comment+')</i><br/><img src="'+img[i]+'" style="width:270px;height:100px;padding:1px; border:1px solid #ccc;margin-right:5px;" /><br/>'+stripHtmlTags(postcontent,32)+' ...<p style="border-bottom:1px dashed #f80;margin:8px 0;"></p></li>';
var advrc_2 = '<li class="adv-rc-list-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglfZIWpZRmI29aEo_rsYBVWxPldZlIw96u7Z_EVbmcX4hrayMDuHOn8lCQL_hXSSerm_ak1c4VCfywiZLN1uYlBazlf23wUzEK6-u8YMeuUwdkct9o-MqUCePjujekzhsg5S-7vvkdR0S/" /> <a href="'+posturl+'"><b>'+posttitle+'</b></a> - <i style="color:#888;">('+comment+')</i></li>';
var advrc_3 = '<li class="adv-rc-list-3"><span class="listcm">'+pcm+'</span> <a href="'+posturl+'"><b>'+posttitle+'</b></a></li>';

if ((condlabel.match("Thu Thuat Blog"))&&(n1<adv_num1)) {
n1=n1+1;
if (n1==1) {document.getElementById('label1').innerHTML += advrc_0;}
else {document.getElementById('label1').innerHTML += advrc;}
}
else if ((condlabel.match("Announcement"))&&(n2<adv_num2)) {
n2=n2+1;
document.getElementById('label2').innerHTML += advrc;
}
else if ((condlabel.match("BlOgFD"))&&(n3<adv_num3)) {
n3=n3+1;
if (n3==1) {document.getElementById('label3').innerHTML += advrc_1;}
else {document.getElementById('label3').innerHTML += advrc_2;}
}
else if ((condlabel.match("jQuery"))&&(n4<adv_num4)) {
n4=n4+1;
if (n4==1) {document.getElementById('label4').innerHTML += advrc_01;}
else {document.getElementById('label4').innerHTML += advrc_3;}
}
var n1234 = n1 + n2 + n3 + n4;
var ncond = adv_num1 + adv_num2 + adv_num3 + adv_num4;
if (n1234==ncond) {break;} else if (i == json.feed.entry.length) {break;}
}
}
//]]>

- Ở đoạn script trên có các biến : advrc, advrc_0, .., advrc_3. Đây là các biến để tạo giao diện riêng cho các tiện ích recent posts. Và các biến adv_num1, ...adv_num4 là số bài viết hiển thị ở mỗi tiện ích recent posts (tương ứng với các thẻ div có id lần lượt là : label1, ... label4).
- Để hiểu rõ hơn mình sẽ mô tả cách hoạt động chính của đoạn javascript trên. Đoạn code chính của thủ thuật chính là đoạn code bên dưới :

if ((condlabel.match("Thu Thuat Blog"))&&(n1<adv_num1)) {
n1=n1+1;
if (n1==1) {document.getElementById('label1').innerHTML += advrc_0;}
else {document.getElementById('label1').innerHTML += advrc;}
}
else if ((condlabel.match("Announcement"))&&(n2<adv_num2)) {
n2=n2+1;
document.getElementById('label2').innerHTML += advrc;
}
else if ((condlabel.match("BlOgFD"))&&(n3<adv_num3)) {
n3=n3+1;
if (n3==1) {document.getElementById('label3').innerHTML += advrc_1;}
else {document.getElementById('label3').innerHTML += advrc_2;}
}
else if ((condlabel.match("jQuery"))&&(n4<adv_num4)) {
n4=n4+1;
if (n4==1) {document.getElementById('label4').innerHTML += advrc_01;}
else {document.getElementById('label4').innerHTML += advrc_3;}
}
var n1234 = n1 + n2 + n3 + n4;
var ncond = adv_num1 + adv_num2 + adv_num3 + adv_num4;
if (n1234==ncond) {break;} else if (i == json.feed.entry.length) {break;}
}

- Bắt đầu vòng lặp, đoạn secript sẽ kiểm tra bài viết có nhãn Thu Thuat Blog hay ko (đây là giá trị bạn cần thay đổi), nếu bài viết có nhãn này, thì bài viết đó sẽ được hiện thị trong thẻ div có id="label1". Và nếu là bài viết đầu tiên thì sẽ với style biến advrc_0, ngoài ra thì sẽ hiển thị kiểu advrc. Cứ tiếp tục như thế, sang bài viết thứ 2 nếu bài viết ko có nhãn Thu Thuat Blog thì lập tức nó sẽ kiểm tra sang các nhãn khác như Announcement, BlOgFD, jQuery.
- Ở các kiểu hiển thị advrc, advrc_0, .., advrc_3, mình dùng các thẻ <li> để tạo giao diện cho các tiện ích. Các bạn có thể thay đổi giá trị của các biến này để tạo ra các giao diện khác nhau cho mỗi tiện ích.
- Ví dụ như :

advrc ='<li> ... Mã HTML để tạo giao diện cho mỗi bài viết ở mỗi tiện ích ... </li>

- Ở đoạn javascript trên chỉ có 1 label2 (Announcement) là các bài viết trong tiện ích có chung 1 kiểu hiển thị, ngoài ra 3 label còn lại thì được hiển thị theo kiểu nổi bật bài đầu tiên.
- Ở code mẫu trên là chỉ sử dụng cho việc hiển thị 4 tiện ích, nếu muốn hiển thị thêm nhiều tiện ích nữa thì các bạn thêm mã tương tự như đoạn code highlight như bên dưới :

if ((condlabel.match("Thu Thuat Blog"))&&(n1<adv_num1)) {
n1=n1+1;
if (n1==1) {document.getElementById('label1').innerHTML += advrc_0;}
else {document.getElementById('label1').innerHTML += advrc;}
}
else if ((condlabel.match("Announcement"))&&(n2<adv_num2)) {
n2=n2+1;
document.getElementById('label2').innerHTML += advrc;
}
else if ((condlabel.match("BlOgFD"))&&(n3<adv_num3)) {
n3=n3+1;
if (n3==1) {document.getElementById('label3').innerHTML += advrc_1;}
else {document.getElementById('label3').innerHTML += advrc_2;}
}
else if ((condlabel.match("jQuery"))&&(n4<adv_num4)) {
n4=n4+1;
if (n4==1) {document.getElementById('label4').innerHTML += advrc_01;}
else {document.getElementById('label4').innerHTML += advrc_3;}
}

else if ((condlabel.match("Nhãn thứ 5"))&&(n5<adv_num5)) {
n5=n5+1;
if (n5==1) {document.getElementById('label5').innerHTML += advrc_01;}
else {document.getElementById('label5').innerHTML += advrc_3;}
}
var n1234 = n1 + n2 + n3 + n4 + n5;
var ncond = adv_num1 + adv_num2 + adv_num3 + adv_num4 + adv_num5;
if (n1234==ncond) {break;} else if (i == json.feed.entry.length) {break;}
}

- Và tất nhiên phải điều chỉnh thêm ở phần đầu của code javascript như bên dưới:

function showadvrp(json) {
img = new Array();
var n1 = 0;
var n2 = 0;
var n3 = 0;
var n4 = 0;
var n5 = 0;

- Như vậy cơ bản đã hoàn thành, bây giờ là phần cuối cùng. Ở phần cuối cùng này sẽ là phần truy xuất link feed. Để thủ thuật chạy được, phần cuối cùng này phải đặt sau cùng. Tức là phải đặt sau các thẻ div có id : label1, label2,... label5. Tốt nhất là đặt nó ở dưới cùng trong phần nội dung của tiện ích HTML/javascript chứa thẻ div cuối cùng, ví dụ như thẻ div có id="label5" chẳng hạn. Và đây là đoan code sau cùng :

<script type="text/javascript">
numposts = 100;
adv_num1 = 4;
adv_num2 = 5;
adv_num3 = 4;
adv_num4 = 6;
adv_num5 = 6; // chèn thêm nếu có 5 tiện ích
</script>
<script src="http://Yourblogname.blogspot.com/feeds/posts/default?&max-results=100&orderby=published&alt=json-in-script&callback=showadvrp"></script>

- Giá trị max-results phải lớn hơn hoặc bằng giá trị numposts. Tùy theo số bài hiển thị mà bạn thay đổi 2 giá trị này cho hợp lý và cho bài viết được hiển thị đủ như mình muốn.
- Như ở bài giới thiệu trước, mình có nói tới việc nếu tỉ lệ xuất bản bài viết ở mỗi nhãn đều nhau thì tiện ích sẽ load nhanh hơn. Lấy ví dụ như, ở demo mình thực hiện trên blog của mình, do blog mình xuất bản chủ yếu là bài viết về thủ thuật blog, nên vì thế mà trong tiện ích yêu cầu hiển thị 19 bài viết, nhưng lặp đủ 100 lần mà vẫn chỉ được 18 bài, tức là vẫn còn thiếu 1 bài. Như hình minh họa bên dưới :

- Tuy nhiên nếu các bạn xuất bản đều đặn ở mỗi nhãn thì cho dù bạn set vòng lặp là 100 hay 200 thì khi đã lấy đủ bài viết thì vòng lặp sẽ dừng lại. Và đây là đoạn mã đó :

var n1234 = n1 + n2 + n3 + n4 + n5;
var ncond = adv_num1 + adv_num2 + adv_num3 + adv_num4 + adv_num5;
if (n1234==ncond) {break;} else if (i == json.feed.entry.length) {break;}

biến n1234 là số bài viết mà lấy được qua các lần lặp (thay đổi), còn biến ncond (cố dịnh) là tổng số bài mà bạn chọn hiển thị ở tất cả các tiện ích. Như đã set ở trên. Nếu đã lặp đủ, tức là giá trị của 2 biến n1234, ncond bằng nhau thì vòng lặp dừng lại.

Như vậy đã xong bài hướng dẫn. Mình chỉ có thể hướng dẫn sơ qua như vậy thôi, nếu có thắc mắc hoặc bài mình post có sai sót gì, các bạn comment bên dưới mình sẽ trả lời sau.