Sliding Newsletter Signup Widget

Yazdir Sliding Newsletter Signup Widget

✉️

Subscribe for Updates

bu kodlama ile istediginiz bir sayfa olusturabilir ve bunu sitniin sag kösesinde gösterebilirsiniz mesela iletisim sayfasi veya tanitmak istediginiz bir sayfayi bu bölüm icerisin gösterebilirsiniz gerekli olan kod




  
  
  <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sliding Newsletter Signup Widget</title>
  <link rel="stylesheet" href="preloader.css">
</head>
<body>

<!-- Preloader -->
<div id="preloader">
  <div class="loader"></div>
</div>

<!-- Sliding Newsletter Signup Widget with Pulse Animation -->
<style>
  /* Floating circular button */
  #newsletterBtn {
    position: fixed;
    top: 65%;
    right: 20px;
    background-color: #16a34a;
    color: white;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: background 0.3s ease;
    animation: pulse 2s infinite;
  }
  #newsletterBtn:hover { background-color: #0f9a2a; }

  @keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(22, 163, 74, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
  }

  #newsletterPanel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 95%;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 15px rgba(0,0,0,0.2);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transition: right 0.4s ease;
  }

  #panelHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #16a34a;
    color: white;
    padding: 12px;
    font-size: 18px;
  }
  #closePanel {
    background: red;
    border: none;
    color: white;
    font-size: 16px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
  }

  #newsletterPanel iframe {
    border: none;
    flex: 1;
    width: 100%;
  }

  #overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
  }
</style>

<!-- Floating Button -->
<div id="newsletterBtn" title="Subscribe">✉️</div>

<!-- Overlay -->
<div id="overlay"></div>

<!-- Sliding Panel -->
<div id="newsletterPanel">
  <div id="panelHeader">
    <span>Subscribe for Updates</span>
    <button id="closePanel">X</button>
  </div>
  <iframe src="https://mailchi.mp/dda1a453c7bd/ai-decoder" loading="lazy"></iframe>
</div>

<script>
  const btn = document.getElementById("newsletterBtn");
  const panel = document.getElementById("newsletterPanel");
  const closeBtn = document.getElementById("closePanel");
  const overlay = document.getElementById("overlay");

  btn.addEventListener("click", () => {
    panel.style.right = "0";
    overlay.style.display = "block";
  });

  closeBtn.addEventListener("click", closePanel);
  overlay.addEventListener("click", closePanel);

  function closePanel() {
    panel.style.right = "-420px";
    overlay.style.display = "none";
  }

  // Hide preloader when page loads
  window.addEventListener("load", () => {
    document.getElementById("preloader").style.display = "none";
  });
</script>
</body>
</html>

Post a Comment

Followers

Sliding Newsletter Signup Widget

Related Posts

Post a Comment

Followers