Widget Ala Banana AI Slider BANUA Khusus Seperti Toko Online Bedoeit Pangkalpinang

Salam Ngerapik Blog, kita semua sebagai pegelola blog pasti menginginkan tampilan blog kita menarik cantik dan ganteng dilihat bukan teman teman semua?.

Kali ini saya mencoba memberikan ulasan membuat widget untuk mempercantik dan memperganteng tampilan blog sobat layaklah menggunakan Widget Slider.

Dari segi efektifitas sekarang saat saya menanyakan ke Mode Ai ternyata bisa juga dijadikan sebagai wadah untuk berjualan Produk dengan cara menampilkannya melalui tampilan Slider. Salah satunya Ya ini.. SLIDER ALA AI Namanya saya yang kasih..ckckck😅 "Slider BANUA BANANA Ai". Untuk DEMONYA KLIK SAJA LINK INI.

Langsung saja terapkan widget sakti ini ke blogger kesayangan sobat semuanya. Saya bagi menjadi 3-4 kotak biar kodenya tidak terpotong. Cekidot wae..

Kode bagian Pertama:

</> Bagian 1

<div class="banua-slider-wrapper">
  <div class="banua-slider">
    
    
    <div class="banua-slide active">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi_I2OuSSv5jG3W8WE11xvTCDaCLfIwctsDTeOv0IPxJuikoPJA-Sd0Js5GDN-vA0_wd1cFmHVjYsnMkFbpuOHHlBHyt-Q1Syysdfyb2Acz8Y5hsah56v6TVKQOeBK9pr0okVEzxu_lMJDAISwW9k3Dw15BfaxBbw72Pgy89iA9t_faMfEH12-aIJYTDtS/s16000/card_an.webp" class="slider-img" alt="Anime Action Version" />
      <div class="banua-caption">
        <span class="banua-tag">Action Version</span>
        <h3 class="banua-title">Pemesanan Card, Kaos atau Gambar Anime Versi Action</h3>
        <p class="banua-desc">Sinopsis singkat anime pertama untuk memikat pembaca...</p>
        <a href="#" class="banua-btn wa-order-btn" data-tag="Action Version" data-title="Pemesanan Card atau Gambar Anime Versi Action">
          <svg class="wa-btn-icon" viewbox="0 0 512 512" xmlns="http://w3.org"><path d="M256 0c-11.8 0-22.3 8.1-25.2 19.6L201.2 138.1c-14.7 9.1-27.5 20.8-37.9 34.6L44.8 141.2c-11-2.9-22.5 2.6-27.2 13.1s-1.8 22.8 6.9 29.8l98.5 78.8c-1.3 8.6-2 17.4-2 26.2c0 14.5 1.9 28.5 5.5 41.9l-92.4 73.9c-9.2 7.4-12.4 19.7-7.7 30.5s15.3 16.9 26.9 14.9l121.7-21.5c11.9 14.2 26.7 26 43.4 34.8L230.8 492.4c-2.9 11.5 2.7 23.3 13.5 28.2s23.4 1 29.8-9.4l65.1-105.8c9.6 1.4 19.4 2.1 29.3 2.1c11.8 0 23.3-1 34.6-2.9l69.2 92.3c7.2 9.6 19.5 13.2 30.5 8.9s17.3-14.8 15.6-26.6l-17.7-124c15.1-11.3 27.9-25.2 37.6-41.2l111.4 19.7c11.7 2.1 23-4 27.4-14.9s.7-23.4-8.8-30.6l-95.2-71.4c2.5-13 3.8-26.4 3.8-40.1c0-12-1-23.8-3-35.3l98.1-65.4c9.9-6.6 13.7-19 9.3-30s-15-17.3-26.7-15.3L371.3 85.9c-13-13.6-28.5-24.7-45.7-32.5L313 18.5c-5.1-10.7-16-17.6-27.9-18.3S261.3 4.2 256 0zm0 192a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" fill="currentColor"/></path></svg>
          PESAN SEKARANG
        </a>
      </div>
    </div>

<div class="banua-slide">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4019o7-TDd4dd3QZ3f8fg0K7f_8XF2GGpfcVpLadTF8-uZjloYrIATNkE6UKvRyb44Nf28S4BzWdX-utszeb3ElrKioyF71T_FYxxJWlV66OAHSObt6odfodCT6eIkh4iIzu91JxKj1kj8b8Y1H4U0iBcJQwirg0cl-YFpaiolxMDDVBKURuJdY2UeQVI/s16000/action_anime.jpeg" class="slider-img" alt="Anime Fantasy Version" />
      <div class="banua-caption">
        <span class="banua-tag">Fantasy Version</span>
        <h3 class="banua-title">Pemesanan Card, Kaos  atau Gambar Anime Versi Fantasy</h3>
        <p class="banua-desc">Petualangan seru di dunia fantasi yang menakjubkan...</p>
        <a href="#" class="banua-btn wa-order-btn" data-tag="Fantasy Version" data-title="Pemesanan Card atau Gambar Anime Versi Fantasy">
          <svg class="wa-btn-icon" viewbox="0 0 512 512" xmlns="http://w3.org"><path d="M256 0c-11.8 0-22.3 8.1-25.2 19.6L201.2 138.1c-14.7 9.1-27.5 20.8-37.9 34.6L44.8 141.2c-11-2.9-22.5 2.6-27.2 13.1s-1.8 22.8 6.9 29.8l98.5 78.8c-1.3 8.6-2 17.4-2 26.2c0 14.5 1.9 28.5 5.5 41.9l-92.4 73.9c-9.2 7.4-12.4 19.7-7.7 30.5s15.3 16.9 26.9 14.9l121.7-21.5c11.9 14.2 26.7 26 43.4 34.8L230.8 492.4c-2.9 11.5 2.7 23.3 13.5 28.2s23.4 1 29.8-9.4l65.1-105.8c9.6 1.4 19.4 2.1 29.3 2.1c11.8 0 23.3-1 34.6-2.9l69.2 92.3c7.2 9.6 19.5 13.2 30.5 8.9s17.3-14.8 15.6-26.6l-17.7-124c15.1-11.3 27.9-25.2 37.6-41.2l111.4 19.7c11.7 2.1 23-4 27.4-14.9s.7-23.4-8.8-30.6l-95.2-71.4c2.5-13 3.8-26.4 3.8-40.1c0-12-1-23.8-3-35.3l98.1-65.4c9.9-6.6 13.7-19 9.3-30s-15-17.3-26.7-15.3L371.3 85.9c-13-13.6-28.5-24.7-45.7-32.5L313 18.5c-5.1-10.7-16-17.6-27.9-18.3S261.3 4.2 256 0zm0 192a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" fill="currentColor"/></path></svg>
          PESAN SEKARANG
        </a>
      </div>
    </div>

<div class="banua-slide">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUUQSztPaOOi7UeoIn-KxmaoJV5TZmIAL4E9iATBpjWYSVQYbW-xPSg2nT4kHezzJHg3QBEfpMdxcGmUg83vpmeIip98_eWB8DYGOfXprh7jO2NP_bDUulcpb_6QcslTJ-z9YlXkmOeGbbrrMiKsUgtMkVndmb0qanq7daWl7yS4vC40GfFytmL7EVYkrB/s16000/romance_an.webp" class="slider-img" alt="Anime Romance Version" />
      <div class="banua-caption">
        <span class="banua-tag">Romance Version</span>
        <h3 class="banua-title">Pemesanan Card, Kaos  atau Gambar Anime Versi Romance</h3>
        <p class="banua-desc">Kisah drama romantis sekolah yang menyentuh hati...</p>
        <a href="#" class="banua-btn wa-order-btn" data-tag="Romance Version" data-title="Pemesanan Card atau Gambar Anime Versi Romance">
          <svg class="wa-btn-icon" viewbox="0 0 512 512" xmlns="http://w3.org"><path d="M256 0c-11.8 0-22.3 8.1-25.2 19.6L201.2 138.1c-14.7 9.1-27.5 20.8-37.9 34.6L44.8 141.2c-11-2.9-22.5 2.6-27.2 13.1s-1.8 22.8 6.9 29.8l98.5 78.8c-1.3 8.6-2 17.4-2 26.2c0 14.5 1.9 28.5 5.5 41.9l-92.4 73.9c-9.2 7.4-12.4 19.7-7.7 30.5s15.3 16.9 26.9 14.9l121.7-21.5c11.9 14.2 26.7 26 43.4 34.8L230.8 492.4c-2.9 11.5 2.7 23.3 13.5 28.2s23.4 1 29.8-9.4l65.1-105.8c9.6 1.4 19.4 2.1 29.3 2.1c11.8 0 23.3-1 34.6-2.9l69.2 92.3c7.2 9.6 19.5 13.2 30.5 8.9s17.3-14.8 15.6-26.6l-17.7-124c15.1-11.3 27.9-25.2 37.6-41.2l111.4 19.7c11.7 2.1 23-4 27.4-14.9s.7-23.4-8.8-30.6l-95.2-71.4c2.5-13 3.8-26.4 3.8-40.1c0-12-1-23.8-3-35.3l98.1-65.4c9.9-6.6 13.7-19 9.3-30s-15-17.3-26.7-15.3L371.3 85.9c-13-13.6-28.5-24.7-45.7-32.5L313 18.5c-5.1-10.7-16-17.6-27.9-18.3S261.3 4.2 256 0zm0 192a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" fill="currentColor"/></path></svg>
          PESAN SEKARANG
        </a>
      </div>
    </div>

</div>

Kode bagian Kedua:

</> Bagian 2 Untuk CSS

<button class="nav-btn prev-btn" onclick="ubahSlide(-1)">❮</button>
  <button class="nav-btn next-btn" onclick="ubahSlide(1)">❯</button>
</div>

<style>
.banua-slider-wrapper {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 30px;
  overflow: hidden;
  background-color: #111;
}
.banua-slider {
  position: relative;
  height: 480px; 
  width: 100%;
}
.banua-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  z-index: 1;
}
.banua-slide.active {
  opacity: 1;
  z-index: 2;
}
.slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.banua-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 60px calc((100vw - 1100px) / 2) 40px calc((100vw - 1100px) / 2);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
  color: #fff;
  font-family: 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}
.banua-tag {
  background: #ff4757;
  color: #fff;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 4px;
}
.banua-title {
  margin: 10px 0 5px 0;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
.banua-desc {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #ccc;
  max-width: 600px;
  line-height: 1.4;
}
.banua-btn {
  display: inline-flex;       
  align-items: center;        
  gap: 8px;                   
  background: #fff;              
  color: #111;                   
  padding: 10px 24px;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  border-radius: 6px;
  transition: all 0.1s ease;    
  cursor: pointer;
}
.banua-btn:hover {
  background: #ff4757;
  color: #fff;
}
.wa-btn-icon {
  width: 18px;                
  height: 18px;               
  transition: transform 0.4s ease; 
}
.banua-btn:hover .wa-btn-icon {
  transform: rotate(180deg);  
}
.banua-btn:active {
  background: #ff4757 !important; 
  color: #fff !important;         
  transform: scale(0.95);         
}
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.3);
  color: #fff;
  border: none;
  padding: 16px 20px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}
.prev-btn { left: calc((100vw - 1150px) / 2); }
.next-btn { right: calc((100vw - 1150px) / 2); }

@media (max-width: 1200px) {
  .banua-caption { padding: 40px 40px 30px 40px; }
  .prev-btn { left: 20px; }
  .next-btn { right: 20px; }
}
@media (max-width: 600px) {
  .banua-slider { height: 260px; }
  .banua-caption { padding: 20px 20px 15px 20px; }
  .banua-title { font-size: 20px; }
  .banua-desc { display: none; }
  .banua-btn { padding: 6px 14px; font-size: 12px; gap: 5px; }
  .wa-btn-icon { width: 14px; height: 14px; }
  .nav-btn { padding: 10px 14px; font-size: 14px; }
  .prev-btn { left: 10px; }
  .next-btn { right: 10px; }
}
</style>

Kode bagian Ketiga:

</> Bagian 3 script

<script>
let indeksSlide = 0;
const daftarSlide = document.querySelectorAll('.banua-slide');
const durasiGanti = 4000; 
let penandaWaktu = setInterval(geserOtomatis, durasiGanti);

function perbaruiSlide(n) {
  daftarSlide[indeksSlide].classList.remove('active');
  indeksSlide = (n + daftarSlide.length) % daftarSlide.length;
  daftarSlide[indeksSlide].classList.add('active');
}

function geserOtomatis() {
  perbaruiSlide(indeksSlide + 1);
}

function ubahSlide(n) {
  clearInterval(penandaWaktu);
  perbaruiSlide(indeksSlide + n);
  penandaWaktu = setInterval(geserOtomatis, durasiGanti);
}

// === LOGIKA WHATSAPP WA.ME (STRUKTUR BARU ANTI KOSONG) ===
document.querySelectorAll('.wa-order-btn').forEach(button => {
  button.addEventListener('click', function(e) {
    e.preventDefault(); 
    
    // PENTING: Ganti angka di bawah dengan nomor WhatsApp aktif Anda!    
    const nomorToko = "6285764565479"; 
    
    // Mengambil teks otomatis dari slide
    const namaTag = this.getAttribute('data-tag');
    const judulProduk = this.getAttribute('data-title');
    
    // Menyusun draf pesan keterangan produk
    const isiTeks = "Halo Toko Bedoeit, saya ingin memesan produk dari website:\n\n" +
                    "*Kategori:* " + namaTag + "\n" +
                    "*Produk:* " + judulProduk + "\n\n" +
                    "Mohon info detail metode pembayaran dan proses pengerjaannya. Terima kasih!";
    
    // Sistem penyambung manual menggunakan tanda tambah (+) agar format wa.me terbaca sempurna di Firefox
    const tautanWA = "https://wa.me/" + nomorToko + "?text=" + encodeURIComponent(isiTeks);
    
    // Membuka aplikasi WhatsApp
    window.open(tautanWA, '_blank');
  });
});
</script>

NB:

Ganti no. whatsapp (6285764565479) dengan nomor whatsapp Anda diawalai 62 jangan 08
Ganti keterangan produk atau tulisan Pada kotak 1 dengan keinginan anda (terserah apage jadi)

Demikianlah artikel singkat saya kali ini tentang "Widget Ala Banana AI Slider BANUA Khusus Seperti Toko Online Bedoeit Pangkalpinang" semoga dapat bermanfaat serta dapat diaplikasikan pada blog toko online sobat blogger juga semuanya. Selamat mencoba untuk mempercantik dan memperganteng blog teman teman semua. Salam Ngerapik Blog.

Widget Ala Banana AI Slider BANUA Khusus Seperti Toko Online Bedoeit Pangkalpinang

Posting Komentar

Formulir Kontak