Cập nhật 2026: Giao diện mới và hướng đi mới ! Xem chi tiết →

Tạo hiệu ứng hoa mai rơi (tuyết rơi, lá rơi,...) cho Blogspot

Hoàng Nhân Khôi Thứ Hai, 1 tháng 2, 2016
Tạo hiệu ứng hoa mai rơi cho Blogspot
Ngày hết tết tới” mỗi năm tết đến xuân về, trong mỗi con người chúng ta, ai cũng có những cảm xúc riêng của mình (thiết nghĩ riêng Tôi thì không “Nỗi buồn cứ u uất bao vây”), cảm nhận được vẻ đẹp của mùa xuân với cây cối đâm chồi nảy lộc, còn gì thú vị hơn khi bạn đem về trên Blog/Website của chính mình.

Chính vì lẻ trên, hôm nay mình hướng dẫn các bạn hiệu ứng hoa mai rơi giúp cho blog của bạn trở nên đẹp hơn trong không khí ngày Tết cổ truyền của dân tộc. Ngoài ra các hiệu ứng hoa anh đào rơi, hiệu ứng lá rơi (khi trời chuyển sang thu), hiệu ứng tuyết rơi, hiệu ứng sao rơi,…Thì cũng từ một đoạn Code mà ra thôi.

            Đọc thêm:



☼ Giờ bắt đầu thủ thuật cùng Windows2it.

Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </head>Lưu mẫu.

<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwRO0rW8JwhCxnaJbIlkhWn4Iskcy9j_W1AvPIghEOM7MsjAtccESZPEohM0gcOQN8m4UP8i3XJ_bdd38Tru1x31ac0U6afKwGOh-aYSMruWBN1RYUJQMTvUTsHqr8mD89u-AVvcV0ug/s1600/hoamai.png"; //the location of the snowflakes
var pictureWidth = 15; //the width of the snowflakes
var pictureHeight = 15; //the height of the snowflakes
var numFlakes = 10; //the number of snowflakes
var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)
var lrFlakes = 10; //the speed that the snowflakes should swing from side to side


if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }

//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}

//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}

//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}

//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}

window.setInterval('flakeFall();',100);
//]]>
</script>  
☼ Tùy chỉnh.

·        Bạn muốn hoa anh đào rơi hay lá rơi hay tuyết rơi hay sao rơi,…Thì các bạn chỉ cần thay đổi hình ảnh này https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwRO0rW8JwhCxnaJbIlkhWn4Iskcy9j_W1AvPIghEOM7MsjAtccESZPEohM0gcOQN8m4UP8i3XJ_bdd38Tru1x31ac0U6afKwGOh-aYSMruWBN1RYUJQMTvUTsHqr8mD89u-AVvcV0ug/s1600/hoamai.png là xong.

·        15 Chiều rộng của bông.

·        15 Chiều cao của bông.

·        10 Số bông hoa xuất hiện cùng một lúc.

·        0,01 Tốc độ rơi của các bông hoa.

·        10 Tốc độ các bông hoa giao động từ bên trái sang bên phải và ngược lại.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều JJJ


Quá trình cài đặt gặp vấn đề gì cứ để lại Comment !

Bài Viết Liên Quan

Bình Luận (68)

Nặc danh
Nặc danh lúc 18:24 5 tháng 2, 2016
rất đẹp... đã áp dụng :)
Game Ecchi
Game Ecchi lúc 23:07 6 tháng 2, 2016
Có không khí tết chứ hôm nay giao thừa rồi :)
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 23:48 6 tháng 2, 2016
không khí giao thừa tràng ngập rùi mà :) ... Mà bạn sống ở tp HCM à
Unknown
Unknown lúc 07:34 8 tháng 2, 2016
muốn thêm hinh anh hoa đào mai rơi cung 1 lúc giống fshare thì làm sao ad
http://ungdungmaytinhaz.blogspot.com/
Game Ecchi
Game Ecchi lúc 18:55 8 tháng 2, 2016
Không mình ở Vũng Tàu lận
Game Ecchi
Game Ecchi lúc 18:55 8 tháng 2, 2016
Không mình ở Vũng Tàu lận
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 22:36 8 tháng 2, 2016
Muốn giống như fshare bạn dùng Code này nhé : http://codepen.io/anon/pen/OMaOQX

Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 22:38 8 tháng 2, 2016
ồ... Mình cũng ở Vũng Tàu.. Tự Bác giới thiệu ở Tp HCM mới tưởng Bác sống ở Tp HCM
Unknown
Unknown lúc 02:33 9 tháng 2, 2016
Minh lam dc roi cam ơn ad nhiều
Demo ungdungmaytinhaz.blogspot.com
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 03:17 9 tháng 2, 2016
:)
Unknown
Unknown lúc 03:45 9 tháng 2, 2016
hihi ad giúp đở rất nhiệt tình tết ko đi đâu chơi hả ad
Unknown
Unknown lúc 03:48 9 tháng 2, 2016
ad ơi blog mình nó có 2 cái main trong bố cục giờ muốn xóa 1 main đi thì làm sao ta
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 03:49 9 tháng 2, 2016
ở nhà tự kỉ ... ăn tết có vui ko bạn
Unknown
Unknown lúc 04:02 9 tháng 2, 2016
mình củng giống ad nhà có tang nên mồng 4 mới đi chơi hj
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 04:15 9 tháng 2, 2016
Blog bạn có 1 cột site main và 2 cột sidebar ....
Unknown
Unknown lúc 04:20 9 tháng 2, 2016
trong cot site main nó lại có 2 main lun ad ơi lam sao ẩn đi 1 cái main ad ơi
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 04:28 9 tháng 2, 2016
à.... Bạn coi ở phần id="main" nó có 2 id con id="Blog1"id="Blog2" Bạn Xóa toàn bộ id="Blog2" đi là được à :)
Unknown
Unknown lúc 05:15 9 tháng 2, 2016
uk nhỉ delete element la song hi vay ma cung nghĩ ko ra thanks ad :D
Game Ecchi
Game Ecchi lúc 19:40 9 tháng 2, 2016
Giới thiệu là 1 đằng còn sống là một chổ mà với lại code này không cần thêm vào HTML mà thêm vào HTML/Javascrip được mà
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 23:26 9 tháng 2, 2016
Ukm, các thẻ Javascrip, CSS đều chằn được trong HTML/Javascrip .. ngoài trừ các thể meta ....
Game Ecchi
Game Ecchi lúc 23:51 10 tháng 2, 2016
Bạn chỉ mình chuyển màu nền blog từ màu trắng thành màu khác được không ?
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 00:04 11 tháng 2, 2016
Nếu muốn đổi màu nền cho Blog của bạn tìm đoạn CSS này:

#outer-wrapper {
background: #fff; thay đổi thành mã màu #fff thành mã màu bạn muốn
width: 1170px;
text-align: left;
font: 12px Arial;
margin: 0 auto;
padding: 10px;
margin-top: 10px;
}

>>> bảng mã màu đây nhé: https://sites.google.com/site/wwwcaotongvn/css
Game Ecchi
Game Ecchi lúc 01:12 11 tháng 2, 2016
Cám ơn nhé
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 02:14 11 tháng 2, 2016
:) ___ :)
Game Ecchi
Game Ecchi lúc 21:42 11 tháng 2, 2016
Lúc nào cũng cười chỉ có thế :)
Game Ecchi
Game Ecchi lúc 21:53 11 tháng 2, 2016
Mà đổi rồi cũng vậy à có đổi màu đâu ?
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 22:06 11 tháng 2, 2016
Blog nền đang là màu trắng mình thay đổi thành màu đen được rùi nè @! chắc đây là Blog của bạn: www.nguyenhoangngaily.tk

https://www.facebook.com/photo.php?fbid=688347534640280&set=a.330833443725026.1073741828.100003951181644&type=3&theater

>>> Nền Blog chia theo vùng. Nên việc thay màu nền có thể tùy biến nhiều vùng khác nhau .. Cái này Bạn phải biết thêm một tí về CSS là oke ngay (là đẹp ngay)
Game Ecchi
Game Ecchi lúc 23:53 11 tháng 2, 2016
Mình gửi lời mời kết bạn qua facebook rùi ý mình là cái viền ngoài màu đen còn cái viền trong màu trắng muốn đổi thành màu khác phải làm sao tại mình thấy có blog làm được

https://www.facebook.com/photo.php?fbid=212233892459071&set=a.206711303011330.1073741829.100010173843669&type=3&theater
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 01:18 12 tháng 2, 2016
Bạn nên bỏ lệnh chống click chuột phải đi (Đồng nghĩa với chống kiểm tra phần tử)... Chứ đang sữa template để lệnh này khó sữa lắm... >>> Cái viền là viền nào vậy .... nhiều viền quá rối luôn :(
Game Ecchi
Game Ecchi lúc 18:34 12 tháng 2, 2016
Giờ quên cách xóa rồi mình thấy có người tạo blog giống mình đẹp lắm mà hỏi họ không chỉ :)
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 22:31 12 tháng 2, 2016
Họ ko chỉ thì thui quan trọng gì .... Nếu đã có mẫu rồi thì làm theo thui (tạm gọi là ăn cướp vậy) :)
Game Ecchi
Game Ecchi lúc 23:14 13 tháng 2, 2016
Biết mà nên mình tự mò đấy @@
Game Ecchi
Game Ecchi lúc 23:15 13 tháng 2, 2016
Biết mà nên mình tự mò đấy @@
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 23:22 13 tháng 2, 2016
mày mò mãi thế nào cũng thành công thôi :)
Game Ecchi
Game Ecchi lúc 05:36 15 tháng 2, 2016
Đổi mẫu rồi làm mẫu khác cho dễ rồi nâng lên mấy mẫu khó tí cám ơn bạn đã trợ giúp. Cho mình hỏi làm cái link mà nó đổi màu khi trỏ chuột vào phải sử dụng code nào ?
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 07:03 15 tháng 2, 2016
Đây nhé! một đoạn JS nhỏ: http://codepen.io/quangmen93/pen/RrdpOa?editors=0010
Game Ecchi
Game Ecchi lúc 03:28 17 tháng 2, 2016
Cám ơn bạn nhé cón nều mình đưa nó vào trong Chỉnh sửa HTML thì phải bỏ nó ở đâu vậy
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 03:59 17 tháng 2, 2016
thêm vào phía trên thẻ đóng head nhé @! :)
Game Ecchi
Game Ecchi lúc 05:51 17 tháng 2, 2016
Thẻ head nào bạn
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 11:47 17 tháng 2, 2016
bỏ trên thẻ đóng head (thẻ head nó có 1 thẻ đóng 1 thể mở mà bạn)
Game Ecchi
Game Ecchi lúc 04:14 21 tháng 2, 2016
Bạn cho mình hỏi nếu mua tên miền thì có vĩnh viễn không hay mỗi năm phải đóng thuế vậy bạn
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 05:07 21 tháng 2, 2016
Nếu không có khuyến mãi và nếu bạn mua ở VN thì phí hàng năm là 250.000 ngàn/1 năm ... đối với tên miền .com| .net .... Mua ở nước ngoài thỉ rẻ hơn
Unknown
Unknown lúc 06:33 25 tháng 2, 2016
Bạn muốn hoa anh đào rơi hay lá rơi hay tuyết rơi hay sao rơi,…Thì các bạn chỉ cần thay đổi hình ảnh này http://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png , Hiện tại em không hiểu đoạn này của a viết tai em mới bước vào nghề thôi, bây giờ e muốn tuyết rơi hay sao rơi thì sửa doạn này http://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png làm sào? nhờ anh chỉ dùm em
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 06:40 25 tháng 2, 2016
À đơn giản đoạn Code trên là Hoa mai ... Giờ bạn thích sao rơi: Bạn chỉ cần up hình ảnh lên đâu đó mà tốt nhất là lên Blogspot >>> Tiếp đó bạn lấy link hình ngôi sao bạn vừa up thay cho link này là được http://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png

Chú ý: Tất cả đoạn Code rơi đều tùy biến đoạn code này mà ra :)
Unknown
Unknown lúc 21:46 15 tháng 5, 2016
mình có cái blogspot mà chưa làm được, can ho river city
DAVO
DAVO lúc 00:05 16 tháng 5, 2016
Cảm ơn bạn đã chia sẻ, mình làm được rồi the southern dragon
Unknown
Unknown lúc 05:50 31 tháng 5, 2016
e ms bc vao nghề ad cho e hỏi . e cop vô sau head thì chỉ làm thế nào ad ? e cop r mà nó k hiển thị .



Nặc danh
Nặc danh lúc 09:41 13 tháng 10, 2016
Halloween có hiệu ứng gì không bác. Đang tính làm 1 cái cho trang thể hình của em
Unknown
Unknown lúc 21:04 31 tháng 12, 2016
sai gắn code lên giao diện bị lỗi bác ơi
soi
soi lúc 22:42 4 tháng 1, 2017
Bạn ơi, mình không muốn hiển thị trên giao diện di động thì sao hở bạn?
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 06:31 8 tháng 1, 2017
dùng thẻ điều kiện cho mobile là xong :)
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 06:31 8 tháng 1, 2017
vớ vấn làm gì lỗi giao diện :(
Unknown
Unknown lúc 15:54 18 tháng 1, 2017
Cám ơn tác giả nhiều. Những bài của tác giả rất hay và chạy rất ổn định
Unknown
Unknown lúc 01:59 7 tháng 3, 2017
Đẹp nhỉ, ^^ bạn nào cần tham khảo thiết kế văn phòng hay đặt mua Bàn Thờ Treo Tường hay là muốn Thi công nhà đẹp thì ghé thăm nhé ^^
SâU Ma'Y Ti'Nh
SâU Ma'Y Ti'Nh lúc 16:05 4 tháng 6, 2017
ad có code mưa không,đang nóng quắt người đây :v,e tìm không ra cái ảnh mưa
Unknown
Unknown lúc 23:02 17 tháng 9, 2017

Unknown
Unknown lúc 19:38 9 tháng 11, 2017
admin ơi có thể cho em xin link ảnh tuyết rơi được không anh. Em kiếm hoài không thấy.
Unknown
Unknown lúc 00:42 22 tháng 12, 2017
up lên blogspot như thế nào thế
Unknown
Unknown lúc 00:45 22 tháng 12, 2017
làm sao để dngf thẻ đó ad ơi
Unknown
Unknown lúc 00:53 22 tháng 12, 2017
làm sao để được hình ảnh hoa mai ở 1 trang như ad vậy
Unknown
Unknown lúc 01:30 22 tháng 12, 2017
cho xin ảnh tuyết rơi đi
Unknown
Unknown lúc 18:49 15 tháng 1, 2018
có video hướng dẩn thì tốt
tình ảo trăng sao
tình ảo trăng sao lúc 08:14 26 tháng 6, 2018
mình phải cài đặt đăng nhập ở đâu ( google, cốc cốc....) để có thẻ </heard . rất cảm ơn bạn
tình ảo trăng sao
tình ảo trăng sao lúc 08:19 26 tháng 6, 2018
mình phải cài đặt đăng nhập ở đâu ( google, cốc cốc....) để có thẻ </heard . rất cảm ơn bạn
Đỗ Huy
Đỗ Huy lúc 20:12 30 tháng 12, 2019
Cái này tạo widget có được không ad? Hay bắt buộc phải dán thẳng vào code luôn?
dichvuinanhanoi
dichvuinanhanoi lúc 02:18 15 tháng 5, 2020
Cảm ơn bài viết rất chi tiết. Mình cũng xin giới thiệu qua dịch vụ in ấn của inlonggia
Với nhiều năm kinh nghiệm trong lĩnh vực in ấn, là địa chỉ có uy tín tại Hà Nội. Công ty In Long Gia luôn đẩy mạnh phát triển dịch vụ in ấn nhất là mảng sản xuất in hộp cứng cao cấp.
Đến với chúng tôi khách hàng sẽ được hỗ trợ tư vấn và thiết kế hoàn toàn miễn phí. Với mục tiêu thỏa mãn mọi nhu cầu của khách hàng. In Long Gia luôn mang đến cho khách hàng những sản phẩm vỏ hộp bìa cứng sang trọng và đẹp mắt nhất.
Là xưởng sản xuất trực tiếp không qua trung gian , sử dụng công nghệ máy móc in ấn hiện đại. Giúp bạn tiết kiệm đến 30% chi phí nhưng vẫn đảm bảo chất lượng.
Unknown
Unknown lúc 01:03 20 tháng 5, 2020
Hay quá. đúng cái đang cần

Đăng nhận xét