Tạo Script liệt kê và gọi script cho blog

Đăng bởi Admin | 5/8/13 | 0 nhận xét

Trong quá trình thiết kế weblog trên nền tảng Blogspot, hẳn bạn đã, đang và sẽ vọc rất nhiều script, dẫn đến thực tế là gắn nhiều script vào Template sẽ gây ảnh hưởng đến tốc độ load trang. Có một yêu cầu của bạn đọc về việc làm sao có script gọi được script, tức là gom các file script vào một chỗ rồi đến lúc nào cần script đó hoạt động thì mới gọi nó ra, chứ không cho nó load hết toàn bộ trong trang.

Mình có thể mô tả thủ thuật này như sau: Trước hết mình tạo một tiện ích để chứa các file script và mình đặt tiện ích này lên trên tiện ích Header để dễ bề quản lý, sau đó mình dùng script liệt kê tất cả các file js cần dùng trong Template rồi đặt vào tiện ích này; mỗi khi cần bất kỳ một file js nào hoạt động thì chỉ cần dùng lệnh gọi script đó ra là được, như vậy sẽ không load tất cả các file js ra cùng một lúc. Nói như thế nghĩa là giả sử mình sử dụng đến 1000 file js trong Template song vẫn không hề ảnh hưởng đến tốc độ load trang của Template.

Đến đây, mình tin rằng bạn sẽ cần đến thủ thuật này hơn bao giờ hết. Vậy thì hãy thực hiện như sau:

Bước 1. Tạo một Widget trên đầu blog.

1- Đăng nhập Blogger
2- vào Mẫu (Template)
3- CHọn CHỉnh sửa HTML (Edit HTML)
4- Chọn Mở rộng tiện ích mẫu (Expand Widget Templates).
5- Tìm sau thẻ <body> rồi đến thẻ <div id='header'> hoặc thẻ <div id='topnavbar'> (nếu Template của bạn có thanh menu đỉnh) và đặt trước thẻ đó bằng đoạn code bên dưới:

<b:section class='scripcontainer' id='scriptcontainer'>
<b:widget id='HTML100' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>

6- Lưu Template.

Bước 2. Thêm Scipt liệt kê và gọi scip cho blogger

1- Vào Bố cục (Lay out)

2- Kéo đến đầu Layout, sát trên phần Header, chọn Edit để chỉnh sửa tiện ích HTML/Javascript (Tiện ích HTML100 được thêm ở bước 1) rồi đặt đoạn code như bên dưới vào đó:
2.1- Trong trường hợp bạn upload các file js có đuôi .js hoặc .txt vào cùng một nguồn lưu trữ file (ví dụ googlecode hoặc host riêng của bạn), đặt URL ngồn (URLBase) cho script. Cứ mỗi lần dùng thêm file js thì bạn chỉ cần thêm số thứ tự theo định dạng như trên.

<script type="text/javascript">
// ScriptListing&Reading Script by www.thuthuatblogger.info
function readScript(index) {
URLBase="http://tenban.googlecode.com/files/";
scriptLIST=new Array(
0,"",
1,"code1.txt",
2,"code2.txt",
3,"code3.txt",
4,"code4.txt",
5,"code5.txt",
6,"code6.txt",
7,"code7.txt",
8,"code8.txt",
9,"code9.txt",
10,"code10.txt",
1000,""
);
regNum = index * 2 +1;
document.write('<script src="' + URLBase + scriptLIST[regNum] + '"><\/script>');
}
</script>

2.2- Nếu bạn upload các file js (lưu tên lộn xộn theo đuôi .js và .txt) lên các host khác nhau thì bạn sử dụng code như sau:

<script type="text/javascript">
// ScriptListing&Reading Script by www.thuthuatblogger.info
function readScript(index) {
scriptLIST=new Array(
// Đây là danh sách các URL dẫn đến nguồn script
0,"", 
1,"http://www.tenmien1.com/files/code1.js",
2,"http://www.tenmien2.com/files/code2.txt",
3,"http://www.tenmien3.com/files/code3.js",
4,"http://www.tenmien4.com/files/code4.txt",
5,"http://www.tenmien5.com/files/code5.js",
6,"http://www.tenmien6.com/files/code6.txt",
7,"http://www.tenmien7.com/files/code7.txt",
8,"http://www.tenmien8.com/files/code8.js",
9,"http://www.tenmien9.com/files/code9.txt",
10,"http://www.tenmien10.com/files/code10.txt",
1000,""
);
regNum = index * 2 +1;
document.write('<script src="' + scriptLIST[regNum] + '"><\/script>');
}
</script>

3- Mỗi khi bạn muốn một script nào đó hoạt động tại vị trí theo ý bạn thì chỉ cần sử dụng lệnh gọi script như sau:

<script>readScript(1);</script>

Hoặc

<script>readScript(2);</script>

Hoặc

<script>readScript(3);</script>

- Cứ như thế chỉ cần thay số thứ tự cho file js cần gọi ra là được.

Tuy code này đơn giản song vẫn hy vọng rằng hiệu quả nó đem lại là vô cùng lớn đối với các bạn.

Theo: thuthuatblog

Thu thuat vi tinh

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

5/8/13