Cara Membuat WIDGET MULTI WhatsApp Keren untuk Blogspot

Banyak versi kode widget whatsapp untuk di tampailkan di blogger sobat semua. ada yang versi bulat melayang, ada yang didalam kotak share dan sebagainya. Kali ini saya dibantu Mode Ai membuat versi widget dengan multi whatsapp artinya ada dua whatssap CS yang bisa dihubungi. Untuk demonya silahkan berkunjung ke Toko Bedoeit Online dan untuk jelasnya silahkan lihat gambar dibawah ini:

Nah, menarik bukan diterapkan di blog sobat blogger semuanya, apalagi blogger teman teman semua menyajikan blog yang menampilkan produk untuk berjualan. Sangat rekomended mengaplikasikan widget Multi Whatsapp. langsung saja penerapan kode nya untuk sobat blogger. Cekidot wae..!

Saya akan membagikan kode ini dalam tiga bagian ya teman teman silahkan penerapan dan pengaplikasiannya kode pertama dahulu, lalu kode kedua dibawah tepat kode pertama dan terakhir kode ke tiga tepat dibawah kode kedua.

Kode bagian Pertama:

</> Bagian 1 CSS

/* Kotak Chatbox Utama */
  .ai-wa-box {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 320px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    font-family: Arial, sans-serif;
    overflow: hidden;
    z-index: 99999;
    animation: aiFadeIn 0.3s ease;
  }
  @keyframes aiFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* Bagian Header Biru */
  .ai-wa-header {
    background: #80147E;
    color: #ffffff;
    padding: 20px;
    position: relative;
  }
  .ai-wa-header h3 { margin: 0 0 5px 0; font-size: 18px; font-weight: bold; }
  .ai-wa-header p { margin: 0; font-size: 13px; opacity: 0.9; line-height: 1.4; }
  .ai-wa-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.7;
  }
  .ai-wa-close:hover { opacity: 1; }

/* Bagian Daftar Admin/CS */
  .ai-wa-body { padding: 15px; background: #f8fafc; }
  .ai-wa-list { display: flex; flex-direction: column; gap: 10px; }
  
  /* Item Link Admin */
  .ai-wa-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #334155;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
  }
  .ai-wa-item:hover { border-color: #3b82f6; background: #f0fdf4; transform: translateY(-2px); }
  
  /* Avatar Bulat */
  .ai-wa-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .ai-wa-info { display: flex; flex-direction: column; }
  .ai-wa-title { font-size: 12px; color: #64748b; font-weight: 500; }
  .ai-wa-name { font-size: 14px; font-weight: bold; color: #1e293b; margin-top: 2px; }
</style>

Kode bagian Kedua:

</> Bagian 2

<button class="ai-wa-trigger" onclick="toggleAiWa()">
  <svg width="18" height="18" viewbox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.713-1.457L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.965C16.528 1.977 14.053.953 11.42.951 5.983.951 1.558 5.323 1.554 10.75c-.001 1.724.453 3.41 1.32 4.933l-.991 3.613 3.708-.946zm10.967-7.417c-.31-.156-1.837-.906-2.122-1.01-.284-.103-.49-.156-.695.156-.205.312-.794 1.01-.973 1.217-.179.206-.357.23-.667.074-1.037-.518-1.729-.92-2.422-2.11-.183-.314-.183-.51-.03-.664.137-.138.31-.36.465-.541.155-.181.206-.31.31-.516.103-.206.052-.387-.026-.541-.077-.156-.695-1.678-.953-2.302-.25-.604-.506-.522-.695-.532-.18-.008-.387-.01-.593-.01-.207 0-.542.078-.826.388-.284.31-1.084 1.06-1.084 2.587 0 1.527 1.11 3.001 1.265 3.207.155.206 2.184 3.334 5.292 4.675.739.319 1.317.51 1.768.653.743.236 1.419.203 1.953.124.596-.089 1.838-.751 2.096-1.44.258-.689.258-1.28.181-1.41-.078-.131-.284-.21-.595-.368z"/></path></svg>
  Ada yang bisa dibantu?
</button>

<div class="ai-wa-box" id="aiWaBox">
  <div class="ai-wa-header">
    <button class="ai-wa-close" onclick="toggleAiWa()">×</button>
    <h3>Halo!</h3>
    <p>Silakan klik salah satu Admin kami di bawah ini untuk memulai percakapan di WhatsApp.</p>
  </div>
  <div class="ai-wa-body">
    <div class="ai-wa-list">
      
      
      <a class="ai-wa-item" href="https://wa.me/6285764565479" target="_blank">
        <div class="ai-wa-avatar" style="background: #e0f2fe;">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpiE_JYmQt-t_EEwJKK5JUBQ50PnCfFMmccw&s" alt="CS Pria" style="width: 28px; height: 28px; object-fit: contain;"/>
</div>

<div class="ai-wa-info">
          <span class="ai-wa-title">Online</span>
          <span class="ai-wa-name">Customer Service 1</span>
        </div>
      </a>

<a class="ai-wa-item" href="https://wa.me/6285268999995" target="_blank">
        <div class="ai-wa-avatar" style="background: #fce7f3;">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpiE_JYmQt-t_EEwJKK5JUBQ50PnCfFMmccw&s" alt="CS Wanita" style="width: 28px; height: 28px; object-fit: contain;"/>
</div>

<div class="ai-wa-info">
          <span class="ai-wa-title">Online</span>
          <span class="ai-wa-name">Customer Service 2</span>
        </div>
      </a>

</div>
  </div>
</div>

Kode bagian Ketiga:

</> Bagian 3 Script

PENTING DALAM PENGAPLIKASIAN KODE

Rubah dan ganti kode dibawah ini dengan kesesuaian data sobat blogger:

Kode ini ditempel atau diletakan dengan mode HTML baik di Tata Letak, Edit HTML Template ataupun di mode Psotingan atau Halaman
Ganti dan rubah kode:

<a class="ai-wa-item" href="https://wa.me/6285764565479" target="_blank">
<a class="ai-wa-item" href="https://wa.me/6285268999995" target="_blank"> //dengan nomor Whatsapp yang sibat blogger inginkan

Ganti dan rubah kode: <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpiE_JYmQt-t_EEwJKK5JUBQ50PnCfFMmccw&s" //dengan icon gambar yang sobat inginkan

Mudah bukan sobat blogger semuanya, selamat berkreasi mempercantik dan memperganteng blogger teman teman semua. Demikianlah artikel saya tentang "Cara Membuat WIDGET MULTI WhatsApp Keren untuk Blogspot", apabila ada yang mau ditanyakan, silahkan di kotak komen Disqus dibawah ya.. Salam Ngerapik Blog..!

Cara Membuat WIDGET MULTI WhatsApp Keren untuk Blogspot

Posting Komentar

Formulir Kontak