Blogger Comment

Blogger ke comments section me emoji reactions add karne ke liye tum ek custom JavaScript aur CSS code use kar sakte ho. Yeh method kisi bhi Blogger template me kaam karega.

Features:

✅ Emoji Reactions (🔥👍👎😂❤️)
✅ Live Count Update
✅ Blogger-Friendly & Responsive
✅ No External Plugin Needed

Step 1: Blogger Me Add Karna

Blogger Dashboard → Theme → Customize
Edit HTML par click karo
<head> ke andar CSS code add karo
Comment Section Ke Baad JavaScript add karo
Save Theme karo

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

<style>
  .comment-reactions {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      font-size: 18px;
  }
  .comment-reactions span {
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 5px;
      background: #f1f1f1;
      transition: transform 0.2s, background 0.3s;
  }
  .comment-reactions span:hover {
      background: #ddd;
      transform: scale(1.2);
  }
  .reaction-count {
      font-size: 14px;
      color: #555;
      margin-left: 5px;
  }
</style>

Step 3: 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.style.transform = "scale(1.3)";
                setTimeout(() => span.style.transform = "scale(1)", 200);
            };
            reactionBox.appendChild(span);
        });

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

Kaise Kaam Karega?

✅ Blogger ke har comment ke neeche reactions dikhai denge
✅ Jab koi user emoji click karega, uska count increase hoga
✅ 🔥👍👎😂❤️ reactions Blogger ke comment section me dynamically add ho jayenge
✅ Yeh Blogger ki existing comment structure ke saath kaam karega

Extra Customization

Agar naye emojis chahiye, toh JavaScript me let reactions = [...] wali list me add kar sakte ho
Agar hover effect change karna ho, toh CSS me .comment-reactions span:hover modify karo

Agar koi aur modification chahiye ya error aaye toh batao!

Go to Link

Learna The Teaching Hub