[Yêu cầu] - Kwick jQuey cho tiện ích Random posts

Tiện ích bài viết ngẫu nhiên (random posts) nói chung cũng là 1 trong những tiện ích ít người dùng, trước kia mình cũng có post vài bài viết về tiện ích này, mới nhất là ở bên mothuthuat.com, nhưng làm biếng, vẫn chưa rinh về đây. Hôm nay có người yêu cầu, mình sẽ hướng dẫn 1 style mới của tiện ích này, đó là kết hợp hiệu ứng kwick từ jQuery cho tiện ích này.

Xem DEMO

Hiệu ứng Kwick này cũng khá mượt, trước kia mình nhớ là có thấy nó ở trong 1 template nào đó của joomla, sau này lại thấy cộng đồng blogspot Việt dùng. Và mình cũng đã đọc qua 1 bài hướng dẫn chèn cái Kwick này vào blogspot luôn (nhưng giờ thì không nhớ blog nào nữa). Tính qua đó copy code về để chuẩn bị thủ thuật cho nhanh, nhưng ko nhớ, nên phải đi lang thang view source và xào nấu lại.

Hình ảnh minh họa

Theo yêu cầu mình sẽ kết hợp hiệu ứng Kwick này vào tiện ích random posts. Và ở đây tiện ích sẽ giữ nguyên kích thước như bản gốc mà 1 số template đang dùng.

Bài này cũng đơn giản, các bạn chỉ cần tạo 1 tiện ích HTML/javascript và dán code bên dưới vào là được:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src='http://fandung.googlecode.com/svn/trunk/js/noct.js' type='text/javascript'></script>
<style type="text/css">
.kwicks { position:relative;width: 960px; height: 320px;}

.kwicks li{width: 192px;height: 320px;display: block;overflow: hidden;padding: 0px; }
.kwicks li img {width:720px;height:320px;}

.fadeout {
border-right:1px solid #aaa;
display: block;
position: absolute;
right: 0;
width: 300px;
height: 320px;
z-index: 4;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNmD1vNDc5hAkYi86NZvgGmuQeygBAvFgkkz8ppHo-M0IfHKyFkGkBzQ6z3iOFldNsDzMsOZXn8u9e3d6Rdk_PzgrqLRCCJ572XzkPBD7F3_xx5CyeFo-sSnx1zpmYpwdjwaWxHBzSLCxV/) repeat-y scroll top right transparent; }

.cmkwick {position: absolute;right:10px;bottom:80px;font-weight:bold;font-size:60px;line-height: 1;opacity: 0.5;text-shadow: black 0px 0px 5px;cursor: pointer;color:#fff; }

#kwick_5 .fadeout { border-right:none }

.kwicks.horizontal li {margin-right: 0px; float: left; }
.kwicks.vertical li { margin-bottom: 5px; }
.kwicks .excerpt {
background: #fff;
color: #000;
opacity: 0.6;
filter:alpha(opacity=90);
position: absolute;
padding: 10px;
bottom: 0px;
display: block;
width: 100%; }

.excerpt strong {font-family: "Arial",Arial,Helvetica,san-serif;font-weight: normal;letter-spacing: 0.4px;height: 66px;line-height: 26px;font-size: 14px;display:block;text-transform:uppercase; }

.kwick_style {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: absolute;}
#kwick_1 {left: 0px; width: 192px;}
#kwick_2 {width: 192px; left: 192px; }
#kwick_3 {width: 192px; left: 384px; }
#kwick_4 {width: 192px; left: 576px;}
#kwick_5 {right: 0px; width: 192px;}

#jquery-rd-posts-loading {background:#136eab;text-align:center;width:960px;}

</style>

<div id="jquery-rd-posts">
<div id="jquery-rd-posts-loading">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8g-hES54kXSok3Dz3WLEIusEgumZA-0nFKBwaGFhctT82eKwuQ3OsYKvia0QczACn75Brt9fRRfV0rmd3j9gRyBAr32joaC5ELVJK3TqZJFNg33oeQgiAwh6dVuB0ujuAD-tYfm2O3wsy/s550/loading.gif" />
</div>
</div>

- Save widget lại. sau đó vào code template, chèn đoạn code bên dưới vào trước thẻ đóng </body>

<script type="text/javascript">
home_page = "http://www.fandung.com/";
kwlabel = "Film";
</script>
<script src="http://fandung.googlecode.com/svn/trunk/js/jquery-rd-post-v2.js" type="text/javascript"></script>

- Mình chọn chèn vào vị trí cuối cùng để không tạo cảm giác blog load chậm.
- Các bạn thay http://www.fandung.com/ và Film thành tên miền của blog bạn và tên nhãn mà bạn muốn hiển thị bài viết.
- Khuyên cáo : nên chọn 1 nhãn nào đó để hiển thị mà thôi, không nên lấy cả blog để hiển thị, do nếu feed càng nhiều bài viết thì tiện ích load càng chậm.

Read More

[ Yêu Cầu ] - Chèn quảng cáo giữa 2 bài viết bất kỳ trên trang chủ

Việc chèn quảng cáo vào blog cũng khá đơn giản, ta chỉ cần xác định vị trí đặt quảng cáo (như trên header, top main, sidebar, hay là bên dưới footer) rồi tạo 1 widget HTML/javascript để dán code quảng cáo vào. Đó là các vị trí đơn giản, tức là chèn giữa các widget, nhưng còn chèn giữa các bài viết thì sao???

Xem DEMO

Lưu ý : DEMO chỉ xem được khi thủ thuật còn tồn tại trên blog test

Như chúng ta đã biết các bài viết hiển thị ở trang chủ hay các trang label, archive đều nằm trong widget Blog1. Các bài viết đều được lặp tuần tự để hiển thị ra trên các trang này. Nếu ta chèn thẳng code quảng cáo vào trong code của widget Blog1 thì các quảng cáo này cũng sẽ được lặp lại tuần tự. Như thế thì có bao nhiêu bài viết hiển thị thì sẽ có bấy nhiêu quảng cáo xuất hiển, và các quảng cáo này đều giống nhau. Và với bài viết này, với 1 chút thủ thuật nhỏ, mình sẽ hướng dẫn cho các bạn cách chèn vào quảng cáo vào giữa 2 bài viết bất kỳ trên trang chủ. Và ở mỗi vị trí này (tức là giữa các bài viết) ta hoàn toàn có thể chèn các quảng cáo khác nhau.

Sau đây là các bước thực hiện:
- Vào Thiết kế --> Chỉnh sửa code HTML --> nhấp chọn mở rộng mẫu tiện ích
- Tìm đoạn code tương tự như bên dưới (lưu ý : có thể mỗi emplate đoạn code bên dưới sẽ dài ngắn khác nhau, nhưng quan trọng ta tìm đúng vị trí của nó và chú ý đến đoạn code highlight)

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>

</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>

</b:loop>
<data:adEnd/>

</div>

- Sau khi tìm thấy đoạn code như trên, ta thêm đoạn code màu hồng như bên dưới :

<div class='blog-posts hfeed'>

<script type='text/javascript'>
//<![CDATA[
var stt=0;
var ads1='Code của quảng cáo 1';
var ads2='Code của quảng cáo 2';
//]]>
</script>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>

</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>

<script type='text/javascript'>
stt=stt+1;
if (stt==1) {document.write(ads1);}
if (stt==2) {document.write(ads2);}
</script>

</b:loop>
<data:adEnd/>

</div>

- Với :
+ stt = 1: là vị trí giữa bài viết 1 và 2
+ stt = 2: là vị trí giữa bài viết 2 và 3
+ và thực hiện tương tự ta có các vị trí khác.

- Nếu muốn các quảng cáo chỉ xuất hiển ở trang chủ thì ta thay đoạn code bên dưới :

<script type='text/javascript'>
//<![CDATA[
var stt=0;
var ads1='Code của quảng cáo 1';
var ads2='Code của quảng cáo 2';
//]]>
</script>

bằng :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
var stt=0;
var ads1='Code của quảng cáo 1';
var ads2='Code của quảng cáo 2';
//]]>
</script>
</b:if>

Ảnh minh họa ở trang chủ:

Mở rộng hơn, các bạn có thể tùy chỉnh thêm bằng cách cho hiển thị các quảng cáo khác ở trang label hoặc trang archive.
- ví dụ ở trang archive, ta thay quảng cáo ads1 và ads2 thành các quảng cáo ads3, ads4
- để thực hiện ta thay đoạn code ở trên thành code bên dưới :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
var stt=0;
var ads1='Code của quảng cáo 1';
var ads2='Code của quảng cáo 2';
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<script type='text/javascript'>
//<![CDATA[
var stt=0;
var ads1='Code của quảng cáo 3';
var ads2='Code của quảng cáo 4';
//]]>
</script>
</b:if>

Ảnh minh họa ở trang archive:

- Ngoài 2 trang này (trang trang chủ và archive) ta có thể hiển thị các quảng cáo ads5 và ads6 ở các trang còn lại (các trang label và các trang index khác). Để thực hiển thì ta thay đoạn code ở trên bằng đoạn code bên dưới:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
var stt=0;
var ads1='Code của quảng cáo 1';
var ads2='Code của quảng cáo 2';
//]]>
</script>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<script type='text/javascript'>
//<![CDATA[
var stt=0;
var ads1='Code của quảng cáo 3';
var ads2='Code của quảng cáo 4';
//]]>
</script>
<b:else/>
<script type='text/javascript'>
//<![CDATA[
var stt=0;
var ads1='Code của quảng cáo 5';
var ads2='Code của quảng cáo 6';
//]]>
</script>
</b:if>
</b:if>

- Khi thực hiện cách mở rộng tới đây, chúng ta vẫn còn 1 thiếu sót, đó là quảng cáo vẫn có thể sẽ hiển thị ở trang bài viết. nếu vị trí 1 là giữa bài 1 và bài 2 thì quảng cáo sẽ xuất hiện ở trang bài viết. Nếu muốn không cho quảng cáo này hiển thị ở trang bài viết thì các bạn thay đoạn code này :

<script type='text/javascript'>
stt=stt+1;
if (stt==1) {document.write(ads1);}
if (stt==2) {document.write(ads2);}
</script>

thành:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
stt=stt+1;
if (stt==1) {document.write(ads1);}
if (stt==2) {document.write(ads2);}
</script>
</b:if>

Ảnh minh họa ở các trang còn lại, ví dụ trang label:

- Lưu ý : chỉ thay đổi nội dung code của các quảng cáo, còn các biến ads1, ads2 thì phải giữ nguyên, tức là quảng cáo 5 và 6 tên biến vẫn là ads1 và ads2, chứ không phải là ads5, ads6
- Cuối cùng là save template và kiểm tra kết quả.

Read More

[ Yêu cầu ] - Ẩn 1 bài viết bất kỳ trong tiện ích Popular Posts

Tiện ích bài viết xem nhiều (Popular Posts) được cung cấp bởi Blogger. Nó hiển thị các bài viết được xem nhiều nhất trên blog. Giúp cho đọc giả của blog có thể đọc những bài viết được quan tâm nhiều nhất trên blog của bạn. Nhưng vì 1 vấn đề nào đó mà bạn không muốn hiển thị nó trên tiện ích. Khi đó ta hoàn toàn có thể ẩn nó đi 1 cách dễ dàng.

Thủ thuật cũng khá đơn giản nên mình sẽ đi ngay vào hướng dẫn.
- Đầu tiên các bạn phải xác định được link của bài viết cần ẩn.
- Sau đó vào Thiết kế -> vào chỉnh sửa HTML -> nhấp chọn mở rộng mẫu tiện ích, rồi tìm đến đoạn code của tiện ích Bài viết xem nhiều (Popular posts). Rồi thêm các đoạn code highlight như bên dưới :

<b:widget id='PopularPosts1' locked='false' title='Bài đăng Phổ biến' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.href != &quot;LINK BÀI VIẾT CẦN ĐƯỢC ẨN&quot;'>

<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>

</b:if> <!--kết thúc lệnh ẩn 1 bài viết được chỉ định -->

</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

- Thay dòng LINK BÀI VIẾT CẦN ĐƯỢC ẨN thành link bài viết là được.

- Cuối cùng save template lại.

Read More

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/AVvXsEhyCIznT31S10hGGIT5E6Vx32vuONJOEIUegojxm7cZdZ68jOET5JL-oVFkJKEGCQGkYl032g0laaVl1t4EwbSD_D06bMU3Ac5V_mBPkM9ImNlM_AoG-zBS8BL5-g5absPUeihCLkS_cchU/"};


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/AVvXsEjXaisLkk8FX8ZFn3x7hTcJgt0V0wd3MKQiHkVRmd1QjHnmiMYWxejy1ZbhPU2bWruFGhm4Je2aIDkU53pGj3LuQTXwj5n6GzdvRSEyFq32YFbhCOSp1zPO2L7TSmDZMwd5oBXkfjjPR0Q/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/AVvXsEjDjYRLg7zlalw0MLcSny3OWPrG8oSiwQDEvsIzWq4hwtW4jNRAdpDTVOEfE9hO7yXJFPJCZMRJEc2_HIU2GYFJjcYlBZ6FC1L0JspRg5FLjiN9VTWTtumMlzJ9hXkknu1E3LjROmSNOU22/" /> <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.

Read More

[ Thông báo ] - V/v ngừng chia sẻ các file js trên host data.fandung.com

Hiện tại do nhiều người dùng các file js trên host của mình, nhất là các blog post bài và hình ảnh 18+, vì thế mà băng thông của host bị mất nhanh chóng. Vậy nên từ hôm nay mình chính thức ngừng chia sẻ các file js trên host của mình. Các file vẫn được giữ lại trên host, nhưng chúng chỉ chạy trên domain của mình nhằm phụ vụ cho cá nhân và chạy các demo.

Nếu 1 blog nào đó mà dùng file js trên host của mình thì khi load tới file js đó, lập tức sẽ hiển thị thông báo như bên dưới :

Khi hiện lên thông báo này các bạn nên thay link của file js đó và chèn link khác vào. Trước kia mình cũng đã giới thiệu cách dùng google code để lưu trữ file js. Nếu không các bạn cũng có thể dùng các file js mà mình đã up lên google code từ host của mình. Gần như các file js trên host của mình đã được up qua google code.

Các bạn có thể vào đây : http://code.google.com/p/fandung/source/browse/#svn/trunk/js để tìm cho mình file js mà mình cần.

Hiện tại việc khóa chia sẻ mình mới thực hiện ở 1 số file request nhiều. Mình sẽ tiếp tục theo dõi ở các file log, nếu file nào được load nữa mình sẽ tiếp tục khóa.

Read More

[ Giới thiệu ] - Cải thiện tốc độ load cho các trang tin tức

Đa số các blog tin tức (sử dụng blogspot) đều dùng tiện ích recent posts (RP) để hiển thị nội dung trên trang chủ của mình, mà blog tin tức thì tất nhiên sẽ có nhiều chuyên mục, do đó sẽ phải dùng link feed khác nhau để hiển thị, và như thế phần nào ảnh hưởng tới tốc độ load trang.

Hiện tại chúng ta đã quen với việc hiển thị bài viết ở 1 nhãn thì sẽ dùng ngay link feed từ nhãn đó để truy xuất. Đối với 1 blog bình thường thì việc hiển thị 1 hoặc 2 tiện ích RP thì cũng không ảnh hưởng nhiều tới tốc độ load trang. Nhưng còn với blog tin tức thì các tiện ích RP được sử dụng nhiều, và có thể lên con số 10 hoặc hơn. Vì vậy hôm nay mình sẽ giới thiệu cho các bạn cách để cải thiện phần nào tốc độ load trang.

Và cách ở đây mình sử dụng cũng không xa lạ gì, vẫn là dùng tiện ích RP để hiển thị nội dung cho trang tin tức của bạn. Thay vì dùng 5 hoặc 6 tiện ích RP để hiển thị nội dung cho các chuyên mục khác nhau thì nay mình chỉ dùng 1 tiện ích RP để hiển thị cho tất cả.

Ví dụ ta có 4 tiện ích RP và có bố cục như bên dưới. Và bình thường các tiện ích sẽ được load tuần tự từ tiện ích 1 đến tiện ích 4. Như vậy ta sẽ có 4 lần load.

Với 4 lần load tuần tự này ta sẽ có cảm giác blog load chậm. Và tùy theo bố cục các tiện ích của blog được sắp xếp như thế nào thì ta sẽ có cảm giác khác nhau, ví dụ bố cục được sắp xếp theo kiểu cơ bản của blog (theo cột : sidebar1, main, sidebar 2, ...) thì sẽ có cảm giác load chậm hơn so với bố cục z-index (z-index là kiểu sắp xếp bố cục dàn hàng, như chữ Z, load xong hàng 1 xuống hàng 2 load tiếp).

Và với cách của mình thì 4 tiện ích sẽ được load 1 lượt như hình bên dưới :

Thủ thuật chính ở đây là mình dùng link feed của blog để hiển thị bài viết ra nhiều chuyên mục theo từng nhãn. Và tất nhiên sẽ không có chuyện 2 chuyên mục trùng bài viết. Tức là chuyên mục 1 đã có bài viết số 1 thì chuyên mục 2 sẽ không xuất hiện bài viết này nữa, mặc dù bài viết này nằm ở nhiều chuyên mục (bài viết có nhiều nhãn). Do chỉ load 1 link feed nên tốc độ sẽ nhanh hơn so với việc load lần lượt nhiều link feed.

Tuy cách này có thể gôm nhiều tiện ích RP lại để load cùng 1 lúc, nhưng các bạn cũng không nên lạm dụng mà gôm quá nhiều tiệc ích RP để load 1 lúc. Nếu load 10 tiện ích 1 lúc so với 5 tiện ích 1 lúc tất nhiên nó sẽ khác nhau. Do số bài viết được load nhiều hơn. Thế nên ta phải có bố cục hợp lý để chia thành từng nhóm 1 để load các tiện ích 1 lúc.

* Một vài thông tin của thủ thuật:
- Load nhiều tiện ích RP 1 lúc.
- Bố cục hiển thị linh hoạt, và không ảnh hưởng đến tốc độ load. (tức là cho dù bạn xắp xếp nó như thế nào thì nó sẽ vẫn hiển thị 1 lúc)
- Tốc độ load nhanh hơn so với cách thông thường dùng nhiều link feed.
- Không gây lặp bài viết.
- Tuy load chung 1 lúc nhưng các tiện ích RP hoàn toàn có thể có các giao diện khác nhau (kiểu hiển thị, số bài hiển thị ...) mà không nhất thiết phải giống nhau đồng loạt.
- Nếu các nhãn trên blog có tần suất xuất bản đều nhau thì tốc độ load sẽ nhanh hơn. Ví dụ như ở blog mình, bài viết về thủ thuật blog nhiều hơn so với các nhãn khác, vì thế mà sử dụng cách này cũng không tối ưu lắm. Việc này là do thủ thuật mình lọc các bài viết trong feed theo nhãn, nều 1 chuyên mục đã đủ bài hiển thị thì lập tức nó sẽ bỏ qua các bài viết thuộc nhãn này (nếu bài viết có 1 nhãn) và tiếp tục tìm đến bài viết thuộc nhãn khác. Chỉ khi nào số bài viết trong các mục đủ như đã set hoặc tới điểm dừng của vòng lặp thì vòng lặp sẽ dừng lại.

Do hiện tại host của mình có 1 trục trặc nhỏ, nên tạm thời mình chỉ giới thiệu thủ thuật. Còn DEMO và hướng dẫn cụ thể mình sẽ post ở bài viết tiếp theo.

Read More