How to Add Alert Box In Blogger Website

 Blogger pe Alert Box banane ke liye aap HTML, CSS aur JavaScript ka use kar sakte hain. Alert Box ek aisi window hoti hai jo users ko important information, warnings ya notifications display karti hai. Yahaan ek simple example diya gaya hai:

Steps to Add an Alert Box in Blogger:

1. Blogger Dashboard me Login Karein:

   • Apne blog ko select karein aur "Theme" section par jaayein.

2. HTML Me Code Add Karein:

   • "Customize" ke niche "Edit HTML" ka option choose karein.

3. HTML/JavaScript Widget Add Karein:

   • Sidebar ya desired area me widget add karne ke liye "Layout" par jaakar "Add a Gadget" par click karein aur "HTML/JavaScript" select karein.

Example Code for Alert Box:

<div id="alertBox" style="display:none; background-color: #ffcccb; color: black; padding: 15px; border: 1px solid red; border-radius: 5px; margin: 10px 0;">
  <strong>Warning!</strong> This is an alert message.
  <span onclick="closeAlert()" style="float:right; cursor:pointer;">&times;</span>
</div>

<script>
  function showAlert() {
    document.getElementById('alertBox').style.display = 'block';
  }

  function closeAlert() {
    document.getElementById('alertBox').style.display = 'none';
  }
</script>

<button onclick="showAlert()">Show Alert</button>

Explanation:

1. HTML Structure:
   • div element for the alert box content.
   • A close button (×) to hide the alert.
2. CSS Styling (Inline Style):
   • background-color, border, and padding for the alert design.
3. JavaScript Functions:
   • showAlert() to display the alert box.
   • closeAlert() to hide it when the close button is clicked.

Customization Ideas:

• Change the background-color and border for different alert types (e.g., green for success, yellow for warning).
• Modify the button text and styles.

Yeh code simple hai aur aap ise apne blog ki needs ke mutabik customize kar sakte hain.

A neon-colored alert box in Blogger can add an eye-catching and vibrant look to your blog. You can use HTML, CSS, and JavaScript to create this effect. Below is an example of how you can create a neon-styled alert box:

Code for Neon Alert Box:

<div id="neonAlertBox" style="display:none; padding: 15px; border-radius: 5px; margin: 10px 0; text-align: center; color: white; font-weight: bold; box-shadow: 0 0 20px #39ff14, 0 0 30px #39ff14;">
  <strong>Neon Alert!</strong> This is a neon alert box.
  <span onclick="closeNeonAlert()" style="float:right; cursor:pointer; color: white;">&times;</span>
</div>

<script>
  function showNeonAlert() {
    document.getElementById('neonAlertBox').style.display = 'block';
  }

  function closeNeonAlert() {
    document.getElementById('neonAlertBox').style.display = 'none';
  }
</script>

<button onclick="showNeonAlert()" style="padding: 10px 20px; background-color: black; color: white; border: none; cursor: pointer; margin-top: 10px;">
  Show Neon Alert
</button>

Explanation:

1. HTML Structure:

   • div contains the alert message and a close button (×).
   • button is used to trigger the alert.

2. CSS Styling (Inline):

   • color: white for the text.
   • box-shadow gives the neon glow effect using #39ff14 (neon green color).
   • border-radius for rounded corners.

3. JavaScript Functions:

   • showNeonAlert() displays the alert box.
   • closeNeonAlert() hides the alert box when clicked.

Customization:

• Change Colors: Replace #39ff14 with other neon colors like:
  • Pink: #ff00ff
  • Blue: #00ffff
  • Orange: #ff4500
• Font Style: Add custom fonts to enhance the neon effect.

This setup will make your alert box visually appealing and unique with a neon glow effect.

Demo