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.
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/AVvXsEi1ng-xKtFYbPiZTOpzzrSBELdyDLKCbfsxjHWKjXXxK8z9xYgdJcY3WfR-EO8CXFBkCj9cAS-kEmzRCC8ONm4Yluk0AFEL151f5bWZmUdXUiS_vHdfP8lZ6H1Zcc6fJhzIgmXWdp8Rua8o/"};
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/AVvXsEgdtOtS4GRs7EK732Xsnefp38sVmneRsaaQ363G9Jzehknkbj23zvXhScFl_VdeMpDajyYEs4mJCGDPH3cwBwvrK1xEZ7Uc3owLyfWHs09gvH7WUtNVXMfmO3TUoSMxTxBlBExl1GRAlY8/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/AVvXsEiBXfO-sGGpUuKkxfgOkQS4ZyoOqqoUYTjqViIH_-P4v_4Uw8RBB6QYrNcVLEIR0vWcufZ6AnNpB2pv1NbsQ4hGozm4EB3Qwi591xTvbUsMChr8T1eOD1Jh474KSAp6fxriqHZRO9uKn-cu/" /> <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.
Tiếp tục bài học về chuyên mục Thủ thuật Windows 7, hôm nay tôi sẽ giới thiệu với các bạn cách sử dụng Group Policy Editor và System Restore - Hai thành phần quan trọng giúp việc thực hiện các thủ thuật trở nên nhanh nhóng, dễ dàng, đơn giản và cũng an toàn hơn :)
Thêm 1 style mới cho tiện ích bài đăng phổ biến, ưu điểm của style này là giúp tiết kiệm không gian, và không sử dụng javascript mà dùng các lệnh CSS3 để làm đẹp nên rất nhẹ.
Hôm nay, rãnh rỗi chỉnh sửa lại mấy bài viết cũ thì phát hiện 
Như đã nói trong bài viết trước. Hôm nay, tôi sẽ giới thiệu với bạn cách sao lưu và tìm hiểu sơ lược về Registry. Đây là một phần rất quan trọng trong việc thực hiện các thủ thuật trên Windows 7. Mong bạn chú ý xem và thực hiện :)
