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

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://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/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://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/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 !
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

56 nhận xét:

  1. rất đẹp... đã áp dụng :)

    ReplyDelete
    Replies
    1. 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ị .



      Delete
  2. Có không khí tết chứ hôm nay giao thừa rồi :)

    ReplyDelete
    Replies
    1. không khí giao thừa tràng ngập rùi mà :) ... Mà bạn sống ở tp HCM à

      Delete
    2. Không mình ở Vũng Tàu lận

      Delete
    3. Không mình ở Vũng Tàu lận

      Delete
    4. ồ... 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

      Delete
    5. 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à

      Delete
    6. Ukm, các thẻ Javascrip, CSS đều chằn được trong HTML/Javascrip .. ngoài trừ các thể meta ....

      Delete
    7. 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 ?

      Delete
    8. 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

      Delete
    9. Lúc nào cũng cười chỉ có thế :)

      Delete
    10. Mà đổi rồi cũng vậy à có đổi màu đâu ?

      Delete
    11. 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)

      Delete
    12. 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

      Delete
    13. 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 :(

      Delete
    14. 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ỉ :)

      Delete
    15. 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) :)

      Delete
    16. Biết mà nên mình tự mò đấy @@

      Delete
    17. Biết mà nên mình tự mò đấy @@

      Delete
    18. mày mò mãi thế nào cũng thành công thôi :)

      Delete
    19. Đổ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 ?

      Delete
    20. Đây nhé! một đoạn JS nhỏ: http://codepen.io/quangmen93/pen/RrdpOa?editors=0010

      Delete
    21. 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

      Delete
    22. thêm vào phía trên thẻ đóng head nhé @! :)

      Delete
    23. bỏ trên thẻ đóng head (thẻ head nó có 1 thẻ đóng 1 thể mở mà bạn)

      Delete
    24. 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

      Delete
    25. 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

      Delete
  3. 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/

    ReplyDelete
    Replies
    1. Muốn giống như fshare bạn dùng Code này nhé : http://codepen.io/anon/pen/OMaOQX

      Delete
  4. Minh lam dc roi cam ơn ad nhiều
    Demo ungdungmaytinhaz.blogspot.com

    ReplyDelete
    Replies
    1. hihi ad giúp đở rất nhiệt tình tết ko đi đâu chơi hả ad

      Delete
    2. 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

      Delete
    3. ở nhà tự kỉ ... ăn tết có vui ko bạn

      Delete
    4. mình củng giống ad nhà có tang nên mồng 4 mới đi chơi hj

      Delete
    5. Blog bạn có 1 cột site main và 2 cột sidebar ....

      Delete
    6. trong cot site main nó lại có 2 main lun ad ơi lam sao ẩn đi 1 cái main ad ơi

      Delete
    7. à.... 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 à :)

      Delete
    8. uk nhỉ delete element la song hi vay ma cung nghĩ ko ra thanks ad :D

      Delete
  5. 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

    ReplyDelete
    Replies
    1. À đơ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 :)

      Delete
  6. mình có cái blogspot mà chưa làm được, can ho river city

    ReplyDelete
  7. Cảm ơn bạn đã chia sẻ, mình làm được rồi the southern dragon

    ReplyDelete
  8. 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

    ReplyDelete
  9. sai gắn code lên giao diện bị lỗi bác ơi

    ReplyDelete
    Replies
    1. vớ vấn làm gì lỗi giao diện :(

      Delete
  10. Bạn ơi, mình không muốn hiển thị trên giao diện di động thì sao hở bạn?

    ReplyDelete
    Replies
    1. dùng thẻ điều kiện cho mobile là xong :)

      Delete
  11. 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

    ReplyDelete
  12. Đẹ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é ^^

    ReplyDelete
  13. 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

    ReplyDelete