Hiệu ứng Click chuột đẹp cho Blogspot – Share Code Particle Explosion Full

Trong quá trình làm đẹp giao diện Blogspot, hiệu ứng click chuột (mouse click effect) là một chi tiết nhỏ nhưng giúp tăng trải nghiệm người dùng đáng kể. Bài viết này mình sẽ chia sẻ cho bạn code hiệu ứng click chuột dạng pháo hoa (particle explosion) cực đẹp, siêu nhẹ và hoàn toàn tương thích với mọi giao diện Blogger.

Hiệu ứng Click chuột đẹp cho Blogspot – Share Code Particle Explosion Full

1. Hiệu ứng click chuột trên Blogspot là gì?

Hiệu ứng click chuột (Click Effect) là một đoạn mã CSS + JavaScript được thêm vào Blogspot để tạo các hạt ánh sáng nhỏ bắn ra như pháo hoa khi người dùng click vào màn hình.

Nó giúp:

• Tăng tính trực quan và tương tác cho website
• Làm Blogspot trông chuyên nghiệp và sinh động hơn
• Hoạt động mượt trên cả desktop lẫn mobile
• Không ảnh hưởng tốc độ tải trang

Hiệu ứng này có thể được sử dụng cho blog cá nhân, trang chia sẻ code, blog thủ thuật, blog tin tức, v.v.

2. Demo hiệu ứng

Khi người dùng click vào bất kỳ vị trí nào trên trang, sẽ xuất hiện những hạt sáng nhỏ đủ màu sắc bay ra theo nhiều hướng — giống như hiệu ứng pháo hoa mini.

3. Hướng dẫn chèn hiệu ứng click chuột vào Blogspot

Bạn chỉ cần làm vài bước như dưới đây:

➤ Bước 1: Vào giao diện Blogger

Blogger → Bố cục → Thêm widget HTML/Javascript (hoặc chỉnh sửa widget có sẵn)

➤ Bước 2: Chèn tất cả code dưới đây vào widget:

<style>
.click-particle {
  position: fixed;
  pointer-events: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 9999;
  animation: particle-explosion 1.1s ease-out forwards;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.dark .click-particle {
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

@keyframes particle-explosion {
  0% {
    opacity: 1;
    transform: scale(0.4) translate(0, 0);
  }
  15% {
    opacity: 1;
    transform: scale(1.3) translate(var(--dx), var(--dy));
  }
  60% {
    opacity: 0.8;
    transform: scale(1) translate(calc(var(--dx) * 2.5), calc(var(--dy) * 2.5));
  }
  100% {
    opacity: 0;
    transform: scale(0.3) translate(calc(var(--dx) * 3.5), calc(var(--dy) * 3.5));
  }
}

.click-particle.color-1 {
  background: #ffc1cc;
  background: radial-gradient(circle, #ffb3ba 0%, #ffc1cc 100%);
}

.click-particle.color-2 {
  background: #bde4ff;
  background: radial-gradient(circle, #a8d8ff 0%, #bde4ff 100%);
}

.click-particle.color-3 {
  background: #fff2a8;
  background: radial-gradient(circle, #ffe66d 0%, #fff2a8 100%);
}

.click-particle.color-4 {
  background: #e6ccff;
  background: radial-gradient(circle, #d4a5ff 0%, #e6ccff 100%);
}

.click-particle.color-5 {
  background: #c1ffc1;
  background: radial-gradient(circle, #a8e6a8 0%, #c1ffc1 100%);
}

.click-particle.color-6 {
  background: #ffd4a3;
  background: radial-gradient(circle, #ffcc99 0%, #ffd4a3 100%);
}

.click-particle.color-7 {
  background: #c4e8ff;
  background: radial-gradient(circle, #b3deff 0%, #c4e8ff 100%);
}

.click-particle.color-8 {
  background: #f8d7da;
  background: radial-gradient(circle, #f5c2c7 0%, #f8d7da 100%);
}

.click-particle.color-9 {
  background: #d1f2d1;
  background: radial-gradient(circle, #c3e6c3 0%, #d1f2d1 100%);
}

.click-particle.color-10 {
  background: #fff0d4;
  background: radial-gradient(circle, #ffe8b3 0%, #fff0d4 100%);
}

.dark .click-particle.color-1 {
  background: #ff6b8a;
  background: radial-gradient(circle, #ff4757 0%, #ff6b8a 100%);
}

.dark .click-particle.color-2 {
  background: #4fc3f7;
  background: radial-gradient(circle, #29b6f6 0%, #4fc3f7 100%);
}

.dark .click-particle.color-3 {
  background: #ffd54f;
  background: radial-gradient(circle, #ffca28 0%, #ffd54f 100%);
}

.dark .click-particle.color-4 {
  background: #ba68c8;
  background: radial-gradient(circle, #ab47bc 0%, #ba68c8 100%);
}

.dark .click-particle.color-5 {
  background: #81c784;
  background: radial-gradient(circle, #66bb6a 0%, #81c784 100%);
}

.dark .click-particle.color-6 {
  background: #ffb74d;
  background: radial-gradient(circle, #ffa726 0%, #ffb74d 100%);
}

.dark .click-particle.color-7 {
  background: #64b5f6;
  background: radial-gradient(circle, #42a5f5 0%, #64b5f6 100%);
}

.dark .click-particle.color-8 {
  background: #f48fb1;
  background: radial-gradient(circle, #f06292 0%, #f48fb1 100%);
}

.dark .click-particle.color-9 {
  background: #a5d6a7;
  background: radial-gradient(circle, #81c784 0%, #a5d6a7 100%);
}

.dark .click-particle.color-10 {
  background: #ffe082;
  background: radial-gradient(circle, #ffd54f 0%, #ffe082 100%);
}
</style>

<script>//<![CDATA[
document.addEventListener('DOMContentLoaded', () => {
  function createParticle(
    x,
    y,
    angle,
    distance,
    colorIndex
  ) {
    const particle = document.createElement('div')
    particle.className = `click-particle color-${colorIndex}`
    const dx = Math.cos(angle) * distance
    const dy = Math.sin(angle) * distance
    
    particle.style.setProperty('--dx', dx + 'px')
    particle.style.setProperty('--dy', dy + 'px')
    
    particle.style.left = x + 'px'
    particle.style.top = y + 'px'
    
    const size = Math.random() * 6 + 8
    particle.style.width = size + 'px'
    particle.style.height = size + 'px'
    
    document.body.appendChild(particle)
    
    setTimeout(() => {
      if (particle.parentNode) {
        particle.parentNode.removeChild(particle)
      }
    }, 1100)
  }

  document.addEventListener('click', (e) => {
    const particleCount = 10
    const baseDistance = 18
    for (let i = 0; i < particleCount; i++) {
      const angle = ((Math.PI * 2) / particleCount) * i
      const distance = baseDistance + Math.random() * 8
      const colorIndex = (i % 10) + 1
      setTimeout(() => {
        createParticle(e.clientX, e.clientY, angle, distance, colorIndex)
      }, i * 12)
    }
    
    for (let i = 0; i < 4; i++) {
      const randomAngle = Math.random() * Math.PI * 2
      const randomDistance = baseDistance + Math.random() * 10
      const colorIndex = Math.floor(Math.random() * 10) + 1
      setTimeout(
        () => {
          createParticle(e.clientX, e.clientY, randomAngle, randomDistance, colorIndex)
        },
        (particleCount + i) * 12
      )
    }
  })
})
//]]></script>
  

➤ Bước 3: Lưu widget và kiểm tra kết quả thôi. (Lưu ý: Code này các bạn cũng có thể để vào trong Chỉnh sửa HTML của template, đặt trên thẻ </body> nhé)

4. Ưu điểm của hiệu ứng này

• Màu sắc mềm mại, lung linh, phù hợp blog cá nhân
• Animation mượt, không giật lag
• Dễ chỉnh màu, kích thước hoặc số lượng hạt
• Không ảnh hưởng SEO hay tốc độ tải trang
• Tương thích chế độ Dark Mode

5. Một số tùy chỉnh nâng cao (tùy chọn)

Bạn có thể:

• Tăng/giảm particleCount để nhiều hạt hơn
• Đổi màu trong phần .color-X
• Giảm thời gian để hiệu ứng nhanh hơn
• Thêm emoji, trái tim, icon tuỳ sở thích

Xem thêm: Tạo hiệu ứng trái tim khi nhấp chuột bất kỳ vào blogspot

6. Kết luận

Hiệu ứng click chuột trên Blogspot là một chi tiết nhỏ nhưng giúp blog nổi bật và cuốn hút người xem hơn. Với đoạn code Particle Explosion mà mình chia sẻ ở trên, bạn có thể dễ dàng thêm vào bất kỳ giao diện Blogger nào chỉ trong vài phút.

Code được chia sẻ bởi bạn Thịnh, blog: https://blog.inlove.eu.org