How To Create A Stylish Quote Popup Box In Blogger (With Close Button)

Create A Stylish Quote Popup Box In Blogger (With Close Button)

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

 A Stylish Quote Popup Box In Blogger (With Close Button) HTML javascript Code 

<!-- 🧠 Mind Quote Popup Box with Close Button -->

<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: 400px;

  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 p {

  color: #222;

  font-size: 18px;

  font-weight: bold;

  margin: 0;

}

#popup-close {

  position: absolute;

  top: 12px;

  right: 15px;

  font-size: 22px;

  font-weight: bold;

  color: #222;

  cursor: pointer;

  transition: 0.3s;

}

#popup-close:hover {

  color: #ff4500;

}

@keyframes fadeIn {

  from {opacity: 0;}

  to {opacity: 1;}

}

@keyframes popUp {

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

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

}

</style>

<div id="popup-love">

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

    <span id="popup-close">&times;</span>

    <p>"The one who conquers the mind, conquers the world."</p>

  </div>

</div>

<script>

document.getElementById('popup-close').onclick = function() {

  document.getElementById('popup-love').style.display = 'none';

};

</script>

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