Tổng Hợp Thủ Thuật Cho IT: Siêu tăng tốc BlogSpot

Như các tín đồ của BlogSpot đã biết, khi vào trang chủ thì nó show hết sạch n bài viết gần đây, trông rất xấu mà lại load rất lâu. Bác Anh Võ ở Việt webguide có nhiều Tut hack để làm đẹp blog, trông giống như Portal mà bây giờ rất nhiều người dùng. Đỉnh cao là tạo Summary post có hỗ trợ ảnh đại diện. Tuy nhiên hack đó chỉ làm gọn blog chứ không cải thiện tốc độ load trang, thậm chí là chậm hơn chút xíu.

Dựa trên hack đó thì Ẹt cải tiến 1 chút. Cụ thể thì anh em nào biết tí xíu code có thể thấy ngay phần thay đổi. Còn anh em không rõ khoản này có thể hiểu đơn giản là: trước đây nếu để 7 bài viết ở trang chủ thì sẽ load đủ cả 7 bài viết với tất cả ảnh trong đó, sau đó sử dụng ảnh đầu tiên và 1 đoạn summary để hiện lên. Còn cải tiến của Ẹt sẽ giúp chỉ load 1 ảnh đầu tiên của bài viết để show, như vậy có thể thấy giảm tải rất nhiều cho trang chủ.

Ví dụ bạn có 7 bài viết, mỗi bài có 10 ảnh. Vậy là vào trang chủ sẽ phải load 70 ảnh, nhưng trang chủ của Ẹt chỉ load 7 ảnh thôi. Nhanh hơn 10 lần kìa =P~

Tất nhiên là thay đổi này có thể kéo theo n lỗi. Nhưng mà ăn chơi sợ j` mưa rơi nhỉ. Nếu bạn nào thích thì cứ thử xem ;))

Bạn nào mới làm quen với blogspot thì nên qua blog bác Anh Võ đọc đã, còn quen rồi thì làm luôn :D

Copy đoạn code sau, save lại thành file speed_summary_post_beta.js rồi up lên host bạn:


/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks

Edited 25-11-2008 by DoTuan: increase loading speed.
demo: http://www.thugian360.com & http://www.histars.net
********************************************/

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
  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);
      }
  }
  strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
pIDpre = pID  + "pre";
var divpre = document.getElementById(pIDpre);

img = divpre.value;
//img = img.toLowerCase();
img = img.replace("<IMG",">img");img = img.replace("HTTP://","http://");
img = img.substr(img.indexOf("img = img.substr(0,img.indexOf(">"));
img = img.substr(img.indexOf("http://"),img.length);
img = img.substr(0,img.indexOf(" "));
img = img.replace('"','');img = img.replace("'","");img = img.replace('“','');img = img.replace('”','');

if(img.length>10) {
imgtag = '';
  summ = summary_img;
}

var summary = imgtag + '' + removeHtmlTag(div.innerHTML,summ) + '
';
div.innerHTML = summary;
}

Vào Template - Edit HTML, Expand widget, tìm đến thẻ và thay nó bằng đoạn code sau:


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'/></div>
<textarea expr:id='"summary" + data:post.id + "pre"' style='display:none;'><data:post.body/></textarea>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>-->đọc tiếp...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Cuối cùng chèn vào giữa 2 thẻ <head>...</head> của template:


<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
&ly;script src='http://your_host/speed_summary_post_beta.js' type='text/javascript'/>

Chúc bạn thành công
Nguồn : Ẹt

Siêu tăng tốc BlogSpot

Đăng nhận xét