Update Comment Section Code

Agar tum Blogger ke comments section me fancy emoji reactions chahte ho, toh neeche ek professional & stylish UI ke saath animated emoji reaction system ka code diya gaya hai. Yeh Telegram-style smooth animation aur glassmorphism effect use karta hai.

✨ Features

✔ Fancy UI (Glass Effect, Shadows, Animation)
✔ Smooth Emoji Click Effect (Pulse Animation)
✔ Live Reaction Count Update
✔ Blogger-Friendly (No External Plugins)
✔ Mobile Responsive & Lightweight

📌 Step 1: Blogger Me Add Karna

Blogger Dashboard → Theme → Customize
Edit HTML par click karo
Head Section me CSS Code paste karo
Comment Section Ke Baad JavaScript Code paste karo
Save Theme karo

🎨 Step 2: Fancy CSS Code (Head Section Me Paste Karo)

<style>
  /* Fancy Glassmorphism Style */
  .comment-reactions {
      display: flex;
      gap: 12px;
      margin-top: 15px;
      padding: 8px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      justify-content: center;
      transition: transform 0.2s ease-in-out;
  }
  
  .comment-reactions span {
      font-size: 20px;
      padding: 8px 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.3s ease;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .comment-reactions span:hover {
      background: rgba(255, 255, 255, 0.5);
      transform: scale(1.1);
  }
  
  .reaction-count {
      font-size: 14px;
      font-weight: bold;
      color: #555;
  }

  /* Pulse Animation */
  .pulse {
      animation: pulse 0.3s ease-in-out;
  }

  @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
  }
</style>

⚡ Step 3: Animated JavaScript Code (Comment Section Ke Baad Paste Karo)

<script>
document.addEventListener("DOMContentLoaded", function () {
    let comments = document.querySelectorAll(".comment-content"); // Sabhi comments dhoondo

    comments.forEach(comment => {
        let reactionBox = document.createElement("div");
        reactionBox.classList.add("comment-reactions");
        
        let reactions = ["🔥", "👍", "😂", "❤️", "😲", "👎"];
        
        reactions.forEach(emoji => {
            let span = document.createElement("span");
            span.innerHTML = emoji + ' <span class="reaction-count">0</span>';
            span.onclick = function () {
                let count = span.querySelector(".reaction-count");
                count.innerText = parseInt(count.innerText) + 1;
                span.classList.add("pulse"); // Pulse Animation
                setTimeout(() => span.classList.remove("pulse"), 300);
            };
            reactionBox.appendChild(span);
        });

        comment.parentElement.appendChild(reactionBox);
    });
});
</script>

🌟 Fancy Look & Features

✅ Glassmorphism Effect – Semi-transparent background with blur
✅ Hover Effects – Smooth scaling effect on hover
✅ Pulse Animation – Jab emoji click hoga toh ek pulse effect aayega
✅ Live Count Update – Har emoji ka count badhta rahega
✅ Mobile-Friendly & Lightweight – Blogger ke liye optimized

🛠️ Customization Options

🎨 Naye Emojis Add Karne Ke Liye:
JavaScript code me "🔥", "👍", "😂", "❤️", "😲", "👎" wali list me naye emojis add karo.

⚡ Animation Customize Karne Ke Liye:
CSS me "@keyframes pulse" ka duration aur scale change karo.

🌈 Background Style Change Karne Ke Liye:
CSS me .comment-reactions ke background aur box-shadow ko modify karo.

Agar aur zyada fancy chahiye ya koi modification chahiye, batao! 🚀

Go to Link

Learna The Teaching Hub