Member Area

Ingin Acara Lebih Berkesan? Pasang Wishing Wall & Sticky Notes Ucapan Interaktif!

đź“Ś Apa itu Wishing Wall Sticky Notes?

Wishing Wall Sticky Notes adalah modul papan doa dan ucapan interaktif dengan tampilan kartu tempel (sticky notes) modern. Setiap kartu memiliki variasi rotasi sudut kemiringan acak dan warna pastel lembut yang memberikan kesan hangat, personal, dan meriah pada perayaan wisuda, ulang tahun, reuni, atau tasyakuran.

đź“–
Skenario Masalah Nyata

Kolom komentar ucapan standar sering kali terlihat kaku dan membosankan. Format kartu sticky notes menghidupkan suasana perayaan sehingga para sahabat, keluarga, dan rekan kerja lebih antusias membaca doa-doa baik yang dikirimkan oleh tamu lainnya.

✨ Keunggulan Wishing Wall

  • Efek Rotasi Pin Miring Alami: Kartu miring halus ke kiri/kanan menyerupai memo tempel asli.
  • Interactive Hover Effect: Kartu yang disentuh kursor/jari akan tegak lurus, membesar, dan terangkat ke depan.
  • Tata Letak Grid Fleksibel: Menyesuaikan otomatis (1 kolom di HP, 2-3 kolom di tablet & desktop).

đź’» Kode Sumber Lengkap (HTML + CSS)

<!-- PAPAN UCAPAN STICKY NOTES -->
<div class="luxee-wall-grid">
  
  <div class="luxee-note note-yellow">
    <div class="note-pin"></div>
    <p class="note-text">“Selamat wisuda sobat! Sukses selalu untuk karir barunya di masa depan!”</p>
    <div class="note-author">— Rizky & Keluarga</div>
    <div class="note-time">10 menit yang lalu</div>
  </div>

  <div class="luxee-note note-pink">
    <div class="note-pin"></div>
    <p class="note-text">“Barakallah fiik, selamat atas rumah barunya ya! Semoga penuh berkah dan kenyamanan.”</p>
    <div class="note-author">— Maya & Dimas</div>
    <div class="note-time">30 menit yang lalu</div>
  </div>

  <div class="luxee-note note-green">
    <div class="note-pin"></div>
    <p class="note-text">“Happy Sweet Seventeen! Semoga impian kuliahnya tercapai dengan gemilang!”</p>
    <div class="note-author">— Teman Sekelas XII-A</div>
    <div class="note-time">1 jam yang lalu</div>
  </div>

</div>

<style>
.luxee-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  padding: 15px 0;
}
.luxee-note {
  padding: 24px 20px 18px 20px;
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.luxee-note:hover {
  transform: scale(1.05) rotate(0deg) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
  z-index: 10;
}
.luxee-note:nth-child(1) { transform: rotate(-2deg); }
.luxee-note:nth-child(2) { transform: rotate(3deg); }
.luxee-note:nth-child(3) { transform: rotate(-1.5deg); }

.note-pin {
  width: 12px;
  height: 12px;
  background: #E28D75;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.note-yellow { background: #FFF8D6; color: #42381F; }
.note-pink { background: #FFE8E8; color: #4A2828; }
.note-green { background: #E8F7EC; color: #204428; }

.note-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 12px 0;
  font-style: italic;
}
.note-author {
  font-weight: 700;
  font-size: 0.85rem;
}
.note-time {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 2px;
}
</style>

đź”— Modul Panduan Terkait

Langkah berikutnya dalam penataan halaman:

đź’ˇ Pertanyaan Sering Ditanya (FAQ)

Gandakan salah satu blok <div class="luxee-note note-yellow">...</div>, lalu ganti teks doa serta nama pengirimnya sesuai ucapan yang masuk.

Tentu. Jika Anda memiliki plugin Luxee WidgetKit (disediakan terpisah), Anda dapat menggunakan widget Wish native yang otomatis memuat ucapan dari form submission secara dinamis.

Bisa. Pada baris CSS .note-text, ganti font-family menjadi Google Fonts handwriting seperti 'Caveat', cursive atau 'Kalam', cursive.

*Terakhir diperbarui: 24-Agustus-2026*