Kode Welcome Banner For Blogger / WordPress

Welcome Banner

Ini merupakan kode Script Welcome Banner, berfungsi untuk meningkatkan CTA (Call To Action) bagi anda yang menyediakan jasa.

📄 HTML CODE

<style>
#welcomeOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 99999;
  display: none;
}

#welcomePopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  width: 90%;
  max-width: 420px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
  animation: popupFade 0.4s ease;
  font-family: Arial, sans-serif;
}

#welcomePopup img {
  width: 100%;
  display: block;
}

#welcomeContent {
  padding: 20px;
  text-align: center;
}

#welcomeContent h3 {
  margin: 0 0 10px;
  font-size: 22px;
}

#welcomeContent p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.welcomeBtn {
  display: inline-block;
  padding: 10px 22px;
  background: #007bff;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

.welcomeClose {
  margin-top: 15px;
  font-size: 13px;
  cursor: pointer;
  color: #666;
}

@keyframes popupFade {
  from {opacity:0; transform:translate(-50%,-55%) scale(0.95);}
  to {opacity:1; transform:translate(-50%,-50%) scale(1);}
}
</style>

<!-- WELCOME BANNER START  -->
<div id="welcomeOverlay">
  <div id="welcomePopup">
    <!-- GANTI GAMBAR DI BAWAH -->
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZ4vGvcUvPRif25Cdcb88eRjr9y8VelN-vmLjuf7pfACEWkPPGcRVXb1GAKSYQQ8gIXf9fZISSCcq02mv2BbFj6_fTGawSdjxF6HAmXrX3Btvk-WzKDRgDc1NYcN81E7LE5x3znDmL_tOCMm8D2-R4BLTr3-LrgWVsl4rVGHpTfYi89k_GMaAu1BDOxr-/s635/GISTARIAU.png" alt="Welcome Banner" />

    <div id="welcomeContent">
      <h3>Selamat Datang Di GISTARIAU</h3>
      <p>GISTARIAU - Menyediakan Jasa Survey dan Pemetaan Lahan Terbaik Di Provinsi Riau.</p>

      <!-- GANTI LINK CTA -->
      <a href="https://wa.me/6282285566772" class="welcomeBtn">Hubungi Kami</a>

      <div class="welcomeClose" onclick="closeWelcome()">Jelajahi Yang Lain</div>
    </div>
  </div>
</div>

<script>
(function(){
  if(!localStorage.getItem('welcomePopupShown')){
    setTimeout(function(){
      document.getElementById('welcomeOverlay').style.display='flex';
    }, 800);
  }
})();

function closeWelcome(){
  document.getElementById('welcomeOverlay').style.display='none';
  localStorage.setItem('welcomePopupShown','yes');
}
</script>
<!-- WELCOME BANNER END  -->

🔍 Live Preview