How To Add Love Calculator Box In Blogger Blog

💖 Love Calculator 💖

❤️

Add Love Calculator Pop-Up Box In Blogger Blog:

• 1.) Go to www.blogger.com.

• 2.) Login using your Gmail Account.

• 3.) After login, the Blogger Dashboard will open

• 4.) Click and Select The Blog where you want to add the code

• 5.) From the left menu, click on Layout and go to layout 

• 6.) Click +Add a Gadget where you want to show the widget (Sidebar / Footer / Header)

• 7.) From the gadget list, click HTML/JavaScript

Enter a Title (optional)

Copy the HTML/JavaScript code provided below and paste it into the Content Box.

• 8.) Click Save.

• 9.) Click Save Arrangement.

• 10.)  Click View Blog and Check Your Blog.

• 11.) Your HTML / JavaScript widget is Now Live.

Love Calculator Pop-Up Box HTML javascript Code: 

<!-- 💖 Love Calculator For Blogger (No Popup Version) -->

<style>

.love-calculator-box{

  max-width:420px;

  width:100%;

  margin:40px auto;

  padding:25px;

  border-radius:18px;

  background: linear-gradient(135deg, #ff9a9e, #fad0c4);

  box-shadow:0 10px 25px rgba(0,0,0,0.2);

  text-align:center;

  font-family:'Segoe UI', sans-serif;

}

.love-calculator-box h2{

  color:#fff;

  margin-bottom:20px;

  font-size:26px;

  text-shadow:2px 2px 6px rgba(0,0,0,0.3);

}

.love-calculator-box input{

  width:85%;

  padding:12px;

  margin:10px 0;

  border-radius:10px;

  border:none;

  outline:none;

  text-align:center;

  font-size:16px;

}

.love-calculator-box button{

  margin-top:15px;

  padding:12px 25px;

  border:none;

  border-radius:25px;

  background:#ff4e50;

  color:white;

  font-size:16px;

  cursor:pointer;

}

.love-calculator-box button:hover{

  background:#fc6076;

}

#result{

  margin-top:20px;

  font-size:20px;

  font-weight:bold;

  color:#fff;

  text-shadow:1px 1px 4px rgba(0,0,0,0.5);

}

.heart{

  font-size:40px;

  color:red;

  animation:heartbeat 1s infinite;

  margin-top:10px;

}

@keyframes heartbeat{

  0%,100%{transform:scale(1);}

  50%{transform:scale(1.3);}

}

.flying-heart{

  position:absolute;

  font-size:24px;

  color:red;

  animation:fly 2s linear forwards;

}

@keyframes fly{

  0%{transform:translateY(0) scale(1);opacity:1;}

  100%{transform:translateY(-200px) scale(1.5);opacity:0;}

}

</style>

<div class="love-calculator-box" id="loveBox">

  <h2>💖 Love Calculator 💖</h2>

  <input type="text" id="name1" placeholder="Your Name">

  <input type="text" id="name2" placeholder="Partner's Name">

  <br>

  <button onclick="calculateLove()">Calculate Love %</button>

  <div id="result"></div>

  <div class="heart">❤️</div>

</div>

<script>

let heartInterval;

function createFlyingHeart(){

  let heart=document.createElement("div");

  heart.classList.add("flying-heart");

  heart.innerHTML="❤️";

  document.getElementById("loveBox").appendChild(heart);

  

  heart.style.left=Math.random()*90+"%";

  heart.style.bottom="10px";

  

  setTimeout(()=>{heart.remove();},2000);

}

function startLoadingHearts(){

  heartInterval=setInterval(createFlyingHeart,200);

}

function stopLoadingHearts(){

  clearInterval(heartInterval);

}

function calculateLove(){

  var name1=document.getElementById("name1").value.trim();

  var name2=document.getElementById("name2").value.trim();

  var resultDiv=document.getElementById("result");

  if(name1===""||name2===""){

    resultDiv.innerHTML="Please enter both names! 💕";

    return;

  }

  resultDiv.innerHTML="Calculating... 💘";

  startLoadingHearts();

  setTimeout(()=>{

    stopLoadingHearts();

    var loveScore=Math.floor(Math.random()*100)+1;

    let msg=loveScore>80?"🔥 Perfect Match! 💞":

            loveScore>50?"💖 Great Connection!":

            "🙂 Keep nurturing your bond!";

    resultDiv.innerHTML=name1+" ❤️ "+name2+" = "+loveScore+"% Love<br>"+msg;

  },3000);

}

</script>