Loading post navigation ...
 
 

Pro page

28
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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 = "http://lh6.googleusercontent.com/-8fE2X7kBhWs/Tf96WzivFHI/AAAAAAAAB0s/fItUKGW08gY/no-image.png"};


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/AVvXsEjJ03ojfVK2KgRBcg4NPiC4ODyOT0FcfIzn5E9NOeKq4DeOVQ9PN9gVrI1CWAjxBq4qnOBFZmqemu6ZBu1mkTmP9E0k5fLc_7mPAudxnrZKqjFvVunPeB6HFVw_tjccLIIItP6zpj4jG5I/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="http://lh5.googleusercontent.com/-cDsHnRJxQCE/Tos_-f6ok6I/AAAAAAAAB5c/XH2RE0yjqVw/large_list_icon_black.png" /> <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.


Enter your mail address:

28

Dr.House

bóc tem bài mới của fandung, hiện giờ em đang sd pro tab new của anh http://www.blogktv.net/ , vậy em có làm như hướng dẫn trên được không, với lại anh xem giùm em sao phần bên phải blog của em nó load rất chậm

Phan Dũng

cảm giác load chậm là do 6 cái Protab News của bạn ở phần main đó

Phan Dũng

ah, quên mất. thủ thuật này có thể áp dụng cho 6 cái TabNews mà bạn đang dùng

ABV

Bìa viết dài và chi tiết, em sẽ áp dụng cho Blog của mình xem thế nào hì hì!

Bmaster

Cam on vi bai viet :X

Phan Dũng

@Việt Nam : đã cập nhật thêm DEMO cho bạn tham khảo rồi đó.

DPMNET

Fan Dũng có thể viết thêm nhiều thủ thuật về PHP cho blogspot ko? Blogspot có thêm php mới thực sự Pro

Phan Dũng

@DPMNET : nếu sử dụng php thì chỉ dùng riêng cho mỗi người mà thôi, nếu share nhiều quá không tốt cho sever. Bởi vậy nếu muốn dùng php thì phải có host riêng. Như mình hiện tại dùng 2 file php, 1 cái cho Views và 1 cái cho Post Navigation

BinhTienBeach

Cái này hợp với bạn nào sử dụng nhiểu các pro tab cho các label Dũng nhỉ!

Cũng nhức đầu đấy

DPMNET

Host bây giờ rẻ mà, đã dùng tới php thì ắt phải có host riêng rồi, không biết mình có thể tạo 1 khung comment bằng php cho blogspot ko Dũng?

Khách (ẩn danh)

Có ứng dụng gì để giúp tăng tốc độ của cái Propage không Dzũng :D

Và cái counter dùng php của Dzũng minh dùng bị tèo rồi, không biết tại sao mà nó ghi và đọc loạn xà ngầu nên cũng hiển thị số đếm loạn xà ngầu, cứ như là một con số random vô nghĩa vậy
Bài mới đăng có khi cả trăm k view, bài hot cả tuần rồi mà có gần 100 view @@

Khắc phục được thì giúp mình với :(

Phan Dũng

@Ngân : chà, dạo này blog quảng cáo đc nhiều nhỉ, giàu thế. hehe

- cái propage mình sẽ thử tìm cách tăng tốc nó xem sao.
- còn cái bộ đếm dùng php, bên mình ổn mà ta, đếm cũng gần đúng với thằng blogger, nhưng hơi chậm hơn 1 chút.

Quốc Việt

Hj! Trông Blog của anh lượng truy cập khủng khiếp thế
Nhưng không hiểu sao anh lại không chèn các quảng cáo vào để kiếm tiền nhỉ???
Mời anh truy cập vào
http://www.quocvietpc.com/2011/10/kiem-tien-tu-websiteblog-cua-ban-voi.html để xem cách kiếm tiền HOT nhất cho Blog nhé!
Tks anh!

Phan Dũng

@Quốc việt : quảng cáo của thằng Clicksor dễ ăn ko :D

GIANG

ố là la, em đọc mà như đi giữa sa mạc í, chỗ hiểu chỗ không, lại phải khổ rồi, hix, tình hình là chơi với cá tôm nhiều quá riết chả biết công nghệ là gì =))

GIANG

Anh Dũng cho em hỏi với, ở trên đoạn đó là với code trong widget nếu có chữ Thu Thuat Blog thì sẽ đọc theo nhãn label1 vậy em muốn đổi cái nhãn label1 thành Art chẳng hạn thì phải đổi luôn trong file js hay chỉ cần đổi trong widget HTML vậy anh?

Phan Dũng

@Mr.Winni em hiểu sai rồi, Thu Thuat Blog chính là nhãn mà em muốn hiển thị, ví dụ như nhãn Art bên em đó. Còn label1 chỉ là địa chỉ (vùng) để hiển thị các bài viết thuộc nhãn Thu Thuat Blog (hoặc Art) vào trong đó. Vì vậy em không cần phải đổi lại tên label1 làm gì, cái cần đổi chính là Thu Thuat Blog trong đoạn javascript.

Phan Dũng

em có thể tham khảo source của demo VnE TabNews cái đó giống với blog em đang dùng đó

GIANG

Dạ, em đã làm theo được, nhưng hình như trang xem theo nhãn của em bị lỗi nên có nhãn chỉ hiển thị được 2 bài viết thôi (mặc dù số bài viết trong nhãn đó nhiều hơn)như nhã tin nhanh trong hình chỉ có 2 bài.

GIANG

hự, em quên cái hình: http://3.bp.blogspot.com/-kpzCn9lpdn0/TpUFkw7m8oI/AAAAAAAACfw/RIsw8MK61jc/s1600/d%25C3%25A0.PNG

Điện Tử ChipKool

Hay quá,cái này em phải thử áp dụng vào blog em mới được,temple em lắm js rồi,mà mấy cái RP của em dùng của trang quản trị mạng load chậm.hic hic.anh Dũng vào xem Blog em với.nó chậm quá.http://chipkool.tk

Admin

@Dũng: Re "quảng cáo của thằng Clicksor dễ ăn ko"
=> Cực kỳ bèo với site tiếng Việt, nếu đặt pop-under thì khá hơn nhưng vẫn bèo, còn chỉ đặt banner thì đừng mong kiếm đủ tiền để rút (MIN PAY = 50 $), code Clicksor còn bị các phần mềm Anti Virus cảnh báo mã độc.
p/s: mình sẽ email để hỏi bạn vài điều, mong bạn giúp cho.
Thanks.

Dr.House

bữa giờ mới có tgian ghé vô blog anh Dũng, cảm ơn anh đã tạo demo cho câu hỏi của em ở trên nhưng thật sự thì nghiên cứu 1 hồi em chẳng biết áp dụng thế nào cả. b-(, hix

Khách (ẩn danh)

khó quá anh dũng à

Phan Dũng

@nobita : nếu có 1 chút kiến thức cơ bản về javascript thì cũng ko khó lắm đâu bạn à :D

Quốc Việt

Kiếm tiền với Zeekre Vĩnh cửu nha, Xem hướng dẫn đầy đủ ở đây nhé:
http://www.talkgoldvn.info/2011/10/kiem-tien-voi-zeekreewards-huong-dan-tu.html

Unknown

@Phan Dũng : trước đây em cũng có thử dùng cái này ,thử cả cách dùng feed ,lẫn cách cải tiến cái readmore ,quét hết các bài viết để lọc categories . Tuy nhiên nếu làm template sẽ hơi khó cho người sử dụng ,vì việc set giá trị các biến ,chỉnh sửa trong code hơi khó cho người dùng :D

Nguyễn Việt Phương

Hic, khó quá, ít ra anh Dũng cũng nên cho thêm cái code CSS làm mấu chứ :(, có vậy mới biết phải chỉnh những cái gì:D



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home