Liên hệ đặt quảng cáo

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://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 !
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

68 nhận xét:

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

    Trả lờiXóa
    Trả lời
    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ị .



      Xóa
    2. có video hướng dẩn thì tốt

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

    Trả lờiXóa
    Trả lời
    1. không khí giao thừa tràng ngập rùi mà :) ... Mà bạn sống ở tp HCM à

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

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

      Xóa
    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

      Xóa
    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à

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

      Xóa
    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 ?

      Xóa
    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

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

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

      Xóa
    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)

      Xóa
    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

      Xóa
    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 :(

      Xóa
    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ỉ :)

      Xóa
    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) :)

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

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

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

      Xóa
    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 ?

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

      Xóa
    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

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

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

      Xóa
    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

      Xóa
    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

      Xóa
  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/

    Trả lờiXóa
    Trả lời
    1. Muốn giống như fshare bạn dùng Code này nhé : http://codepen.io/anon/pen/OMaOQX

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

    Trả lờiXóa
    Trả lời
    1. hihi ad giúp đở rất nhiệt tình tết ko đi đâu chơi hả ad

      Xóa
    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

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

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

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

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

      Xóa
    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 à :)

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

      Xóa
  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

    Trả lờiXóa
    Trả lời
    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 :)

      Xóa
    2. up lên blogspot như thế nào thế

      Xóa
    3. làm sao để được hình ảnh hoa mai ở 1 trang như ad vậy

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

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

    Trả lờiXóa
  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

    Trả lờiXóa
  9. sai gắn code lên giao diện bị lỗi bác ơi

    Trả lờiXóa
  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?

    Trả lờiXóa
  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

    Trả lờiXóa
  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é ^^

    Trả lờiXóa
  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

    Trả lờiXóa
  14. 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.

    Trả lờiXóa
  15. 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

    Trả lờiXóa
  16. 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

    Trả lờiXóa
  17. 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?

    Trả lờiXóa
  18. 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.

    Trả lờiXóa