Create Romantic I Love You Popup Using HTML & CSS In Blogger Blog

Add Romantic I Love You Popup Using HTML & CSS In Blogger

• 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.

Romantic I Love You Popup Using HTML & CSS Code :

<!-- ❤️ I Love You Popup Box -->

<style>

#popup-love {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.6); /* dark background */

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  animation: fadeIn 0.6s ease;

}

#popup-love-inner {

  background: #fff3e0; /* background */

  padding: 35px 25px;

  border-radius: 18px;

  max-width: 90%;

  width: 380px;

  text-align: center;

  box-shadow: 0 10px 28px rgba(0,0,0,0.35);

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

  position: relative;

  animation: popUp 0.6s ease;

}

#popup-love-inner h2 {

  color: #d84315;

  font-size: 28px;

  margin-bottom: 15px;

}

#popup-love-inner p {

  color: #444;

  font-size: 16px;

  margin-bottom: 20px;

}

.heart {

  font-size: 45px;

  color: red;

  animation: heartbeat 1s infinite;

}

@keyframes fadeIn {

  from {opacity: 0;}

  to {opacity: 1;}

}

@keyframes popUp {

  0% { transform: scale(0.5); opacity: 0;}

  100% { transform: scale(1); opacity: 1;}

}

@keyframes heartbeat {

  0% { transform: scale(1);}

  25% { transform: scale(1.2);}

  50% { transform: scale(1);}

  75% { transform: scale(1.2);}

  100% { transform: scale(1);}

}

</style>

<div id="popup-love">

  <div id="popup-love-inner">

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

    <h2>I Love You Gayuddy</h2>

    <p>You are the reason behind my smile, my happiness, and my everything. 💕</p>

    <p><strong>Forever Yours "Khadush"</strong></p>

  </div>

</div>

Important : “Where the text is highlighted, you can write something else according to your preference.”