1/4/12

Hướng dẫn chèn đoạn mã JavaScript vào Blogger (lá vàng rơi, tuyết đổ...)

21:13  Unknown  3 comments


Tháng 11, lá vàng rơi trên từng góc phố. Mùa thu kết thúc nhường chỗ cho mùa đông lạnh lẽo. Chiều cơn gió đông uốn mình đuổi theo cô gái Sài Gòn mặt chiếc áo mỏng chạy xe trên đường. Chiếc lá thu cuối cùng rơi đầy trên trang nhật ký điện tử, như kéo hồn tôi vào góc kỷ niệm của một thời thơ dại...Hì hì sến quá! Các bạn mến, hôm nay tôi giới thiệu cách đưa đoạn JavaScript hiệu ứng lá vàng rơi nói riêng và cách đưa đoạn JavaScript nói chung lên blog. Bạn biết đấy, JavaScript là một ngôn ngữ kịch bản tuyệt vời, bởi sự tiện lợi, lạ và đẹp mắt theo ý đồ của người lập trình. Ngôn ngữ này có thể làm gần như tất cả những gì bạn muốn trên nền web. Nào chúng ta sẽ bắt tay vào tìm hiểu.

Hình thức đoạn JavaScript trên blog? 

Cách 1. Nhiều đoạn mã JavaScript có thể chèn trực tiếp như hướng dẫn dưới. Tuy nhiên đây không phải là cách tối ưu, chưa kể giữa Blogger cũ và mới khác nhau về cấu trúc nên bạn có thể sẽ gặp lỗi khi sử dụng cách này.

Cách 2. Lưu đoạn JavaScript thành tệp tin .js và đưa lên một trang lưu trữ miễn phí như Google Pages(Tài khoản cùng với Gmail) sau đó lấy link thay cho link_đến_file_JavaScript.

<script src='link_đến_file_JavaScript' type='text/javascript'/>

Trong đó link_đến_file_JavaScript có dạng http://d.v.nhan.googlepages.com/leavesfall.js. Và như vậy bạn sẽ có đoạn mã (Đây là đoạn mã mà tôi đang dùng cho hiệu ứng lá vàng rơi mà bạn đang thấy vào thời điểm bài hướng dẫn này):

<script src='http://d.v.nhan.googlepages.com/leavesfall.js' type='text/javascript'/>

Cách chèn vào Blogger

Để chèn vào blog bạn chỉ cần sử dụng đoạn mã hoàn chỉnh như ở cách 2 đưa vào liền kề phía dưới thẻ <body> hoặc phía trên thẻ </body> nếu muốn xuất hiện ngay khi trang hiển thị hoặc sau khi trang hiện lên đầy đủ trên cửa sổ trình duyệt. Xem hình.



Cách tạo tệp tin .js
Nếu bạn có kiến thức về JavaScript, bạn có thể viết đoạn mã theo ý thích của mình để đưa lên blog. Và khi đó bạn có thể dùng các trình soạn thảo web như Dreamweaver lưu lại thành tệp tin .js (Hỗ trợ Unicode). Trường hợp bạn tham khảo từ những trang web trên mạng, hãy copy vào Notepad (Start-> All Programs -> Accessories -> Notepad) và thay đổi một vài thông tin như sau:

1. Thay đổi liên kết đến hình ảnh hoặc nội dung văn bản hiển thị của đoạn mã. Ví dụ ở đây tôi sẽ đổi link đến hình ảnh bông tuyết (snow.gif) bằnghttp://i240.photobucket.com/albums/ff259/thuthuatblog/jseff/snow.gif

2. Bỏ đi đoạn văn bản khai báo (<script type="text/javascript">) và đóng lại (</script>) JavaScript trước khi lưu lại tệp tin .js.

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50);  // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() {  // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

</script>

Sau khi thay đổi đoạn code nằm trong tệp tin .js của bạn sẽ có dạng như sau:

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc="http://i240.photobucket.com/albums/ff259/thuthuatblog/jseff/snow.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50);  // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() {  // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

Cách lưu thành tập tin .js cũng giống như cách thành tập tin .wpl mà tôi đã giới thiệu.

Dưới đây là một số tập tin .js hoàn chỉnh với các hiệu ứng rơi hiển thị trên Firefox (FF) cũng như Internet Explorer (IE). Hãy click phải chuột chọn Save Target As (IE) hay Save Link As (FF) để tải về trước khi đưa lên Google Pages của bạn.

Các hiệu ứng rơi:

- Dollar rơi (Mau nặt dùm đem đổi ngân hàng nhé! ;-) ): Tải về | Xem trước.

- Lá rơi, nhiều lá cùng màu và kích thước: Tải về | Xem trước.

- Lá rơi, nhiều lá cùng màu và khác kích thước: Tải về | Xem trước.

- Lá rơi, nhiều lá khác màu và kích thước: Tải về | Xem trước.

- Hình trái tim rơi (Ôi tình yêu của tôi!): Tải về | Xem trước.

- Sao rơi: Tải về | Xem trước.

Các hiệu ứng bay:

- Máy bay bay: Tải về | Xem trước.

- Bướm bay: Tải về | Xem trước.

- Đôi mắt dõi theo con trỏ chuột: Tải về | Xem trước.

- Sủi bọt (Không có bay đâu nhé!): Tải về | Xem trước.

Ngoài ra bạn có thể tìm kiếm các loại khác như đồng hồ theo con chuột, hiệu ứng rơi, nhồi bóng ... tại Dynamic Drive , eChip, Éditeur JavaScript và nhiều địa chỉ khác. Một số hiệu ứng có cách đưa vào blog hơi khác một chút, nếu bạn không rõ hãy liên hệ email để được giúp đỡ.

Chúc thành công!

Posted in: ,,

3 nhận xét:



Thuốc Giảm Cân Chiết Xuất Từ Thiên Nhiên An Toàn Dành Cho Người Muốn Giảm Cân
Thuốc Giảm Cân Hiệu Quả Cao Dành Cho Người Béo
Thuốc giảm cân hiệu quả!
Theo các nghiên cứu, việc giảm cân được can thiệp bởi ba tác động chính: điều chỉnh chế độ ăn uống hợp lý, tập thể dục và sử dụng thuốc giảm cân. Với cuộc sống hiện đại như ngày nay thì việc điều chỉnh chế độ ăn uống và tập thể dục trở nên khá khó khăn khi phần lớn quỹ thời gian đều dành cho công việc. Vì thế, thuốc giảm cân ra đời như một phương pháp để có thể giảm cân theo mong muốn.
Thuốc giảm cân hiện rất đa dạng nhưng ở các nước tiên tiến như Mỹ và châu Âu thì giảm cân từ sản phẩm thiên nhiên đang là ưu thế thời thượng vì tính hiệu quả an toàn và không có tác dụng phụ của nó. Thuốc giảm cân là một quá trình lâu dài nên tính an toàn của những sản phẩm này phải được đòi hỏi rất cao để sau khi ngưng sử dụng sẽ không có sự xáo trộn nào cho cơ thể. Trước đây, có nhiều sản phẩm giảm cân cấp tốc được quảng cáo nhưng không đưa đến hiệu quả thực sự mà còn có tác dụng phụ gây thiệt hại cho người tiêu dùng. Vì thế, sự xuất hiện của sản thuốc giảm cân có nguồn gốc từ thiên nhiên giúp cho người tiêu dùng có thêm lựa chọn trong kế hoạch giảm cân của mình.

Thuốc giảm cân tham khảo tại: http://nuochoamypham.vn
Cơ sở I: 677H8 Tân mai - Q. Hoàng Mai - Hà Nội
Cơ sở II: 34/10 Nguyễn Ngọc Lộc - P15 - Q. 10 - TP. HCM
Cơ sở III: TC3, Mỹ Phước, Bến Cát, Bình Dương, Việt Nam
VP tại Singapore: 14 Robinson Road, #13-00 Far East Finance Building Singapore Tel: +65 6725 8085
Since: 07-09-2003

ĐT: 04.6674.0603
Hotline: 090.214.2260 or 097.360.1980

Nuochoamypham.vn là thành viên thuộc Cty TNHH TM & CN Phú Đạt
Địa chỉ đăng kí 677H8 Tân Mai - Thịnh Liệt - Hoàng Mai - Hà Nội
GPKD: 0105424528 do Sở kế hoạch đầu tư TP Hà Nội cấp.


CỬA HÀNG TEMPLATE XIN GIỚI THIỆU DỊCH VỤ TẠO WEB BẰNG BLOGSPOT VỚI GIÁ CỰC RẺ CHỈ TỪ 400K BẠN ĐÃ CÓ 1 TRANG WEB ƯNG Ý VỚI ĐẦY ĐỦ TÍNH NĂNG VÀ ĐẶC BIỆT LÀ CHUẨN SEO
Với mong muốn các bạn sử dụng Blogspot sẽ ngày càng nhiều hơn, mình lập ra chuyên mục "Hướng dẫn về Blogspot" để chia sẻ với tất cả những thủ thuật từ dễ đến khó, cho người mới bắt đầu đến người đã thành thạo về Blogspot. Nào, chúng ta cùng đi từ những thứ cơ bản nhất.



THAM KHẢO MỘT SỐ GIAO DIỆN ĐÃ THIẾT KẾ: KHO GIAO DIỆN SHOP DEAL:http://www.cuahangtemplate.com/searc...op-online-deal KHO GIAO DIỆN BẤT ĐỘNG SẢNhttp://www.cuahangtemplate.com/searc...l/bat-dong-sanKHO GIAO DIỆN BLOGSPOT TIN TỨChttp://www.cuahangtemplate.com/searc...ogspot-tin-tucKHO GIAO DIỆN BLOGSPOT BÁN HÀNGhttp://www.cuahangtemplate.com/searc...plate-dien-may

VỚI CÁC MẪU BLOGSPOT VÔ CÙNG ĐA DẠNG VÀ ĐẸP ĐÁP ỨNG ĐẦY ĐỦ NHU CẦU CỦA NGƯỜI BÁN HÀNG ONLINE CHÚNG TÔI TIN RẰNG SẼ MANG ĐẾN CHO BAN CHẤT LƯỢNG DỊCH VỤ TỐT NHẤT

MỌI Ý KIẾN XIN LIÊN LẠC LẠI PHONE : 0167 561 3351

TRANG CHỦ: http://www.cuahangtemplate.com/

Read more: http://www.24hlamgiau.com/xem/267173-tut-chia-se-kho-giao-dien-blogspot-chuan-seo-tut-chia-se-kho-giao-dien-blogspot-chuan-seo.html#ixzz3pIvqoy5w

Truyện cổ tích hay
https://truyencotichvietnam-thegioi.blogspot.com

Đăng nhận xét

Share

Twitter Facebook Favorites More