Hướng Dẫn Thêm Hiệu Ứng Particle Background Cho Blogger

Particle Là Gì?

Hướng Dẫn Chi Tiết

1. Đăng Nhập Vào Quản Lý Của Blogger.Com
2. Chọn Chủ Đề > Chỉnh Sửa HTML
3. Sao Chép Đoạn Particle.JS Bên Dưới và Dán Bên Trên Thẻ HEAD

   <script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'/>

4. Sao Chép Tiếp Đoạn CSS Bên Dưới và Dán Bên Trên Thẻ ]]></b:skin>

   #particles-js {position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;background-color: var(--lightBg);}

Lưu Ý!
Ở Phần var(--lightBg) Bạn Có Thể Thay Đổi Màu Theo Ý Thích Nhé.

5. Tiếp Tục Sao Chép Đoạn JS Bên Dưới và Dán Trên Thẻ </body>

   <div id='particles-js'/>
   <script>
   particlesJS("particles-js", {
     "particles": {
       "number": {
         "value": 88,
         "density": {
           "enable": true,
           "value_area": 700
         }
       },
       "color": {
         "value": ["#004DFF", "#D80032", "#FFAA00", "#00FF00"]
       },
       "shape": {
         "type": "circle",
         "stroke": {
           "width": 0,
           "color": "#ffffff"
         },
         "polygon": {
           "nb_sides": 15
         }
       },
       "opacity": {
         "value": 0.5,
         "random": false,
         "anim": {
           "enable": false,
           "speed": 1.5,
           "opacity_min": 0.15,
           "sync": false
         }
       },
       "size": {
         "value": 2.5,
         "random": false,
         "anim": {
           "enable": true,
           "speed": 2,
           "size_min": 0.15,
           "sync": false
         }
       },
       "line_linked": {
         "enable": true,
         "distance": 110,
         "color": "#00BFFF",
         "opacity": 0.4,
         "width": 1.25
       },
       "move": {
         "enable": true,
         "speed": 1.6,
         "direction": "none",
         "random": false,
         "straight": false,
         "out_mode": "out",
         "bounce": false,
         "attract": {
           "enable": false,
           "rotateX": 600,
           "rotateY": 1200
         }
       }
     },
     "interactivity": {
       "detect_on": "canvas",
       "events": {
         "onhover": {
           "enable": false,
           "mode": "repulse"
         },
         "onclick": {
           "enable": false,
           "mode": "push"
         },
         "resize": true
       },
       "modes": {
         "grab": {
           "distance": 400,
           "line_linked": {
             "opacity": 1
           }
         },
         "bubble": {
           "distance": 400,
           "size": 40,
           "duration": 2,
           "opacity": 8,
           "speed": 3
         },
         "repulse": {
           "distance": 200,
           "duration": 0.4
         },
         "push": {
           "particles_nb": 4
         },
         "remove": {
           "particles_nb": 2
         }
       }
     },
     "retina_detect": true
   });
   </script>

6. Cuối Cùng Lưu Lại (Save) Và Quay Lại Blogger/Website Của Bạn Xem Thành Quả.

Lưu Ý!
Những thông số về chuyển động hoặc tốc độ cũng như màu sắc, mọi người có thể tùy ý thay đổi theo ý muốn của mọi người nhé.

FAQ