Cara Bikin Widget Maskot Ngoceh

Cara Bikin Widget Maskot Ngoceh Melayang di Blog Auto Kocak

Bosen sama blog yang diem aja? Bikin rame pake widget maskot yang bisa ngoceh sendiri.

Widget "Ngoceh" ini posisinya fixed di pojok kiri atas. Jadi pas pengunjung scroll, dia tetep ngikut dan ngajakin ngobrol. Dijamin blog kamu jadi lebih hidup dan gak ngebosenin.

Fitur Kerennya:

• Animasi Melayang Bebas: Maskotnya muter + naik turun sendiri tiap 8 detik.
• Mulut Otomatis Ngomong: Animasi mulut buka tutup terus.
• Kata Random: Ada 22 kata kocak yang ganti otomatis tiap 3 detik.
• Desain 3D Simple: Wajah kuning pake efek gradient dan shadow.
• Ringan: Cuma pake HTML + CSS + JS doang. Gak bikin blog lemot.

Cara Pasang: Copy kode di bawah ini, lalu paste di atas tag </body> (di HTML TEMA), atau pastekan di paling bawah postingan (di HTML Postingan).

Kode HTML Widget Maskot Ngoceh

<style>
.ngoceh-widget {
    position: fixed;
    top: 80px;
    left: 20px;
    width: 90px;
    height: 90px;
    z-index: 9999;
    animation: melayangBebas 8s ease-in-out infinite;
  }
.wajah {
    width: 70px;
    height: 70px;
    background: radial-gradient(circle at 30% 30%, #FFF176, #FFD93D);
    border-radius: 50%;
    border: 3px solid #000;
    position: relative;
    box-shadow: 4px 4px 0px #000, inset -3px -3px 5px rgba(0,0,0,0.2);
    margin: 0 auto;
  }
.wajah::before,.wajah::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 22px;
  }
.wajah::before { left: 16px; }
.wajah::after { right: 16px; }
.mulut {
    width: 22px;
    height: 12px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    animation: ngomong 0.25s infinite alternate;
  }
  @keyframes ngomong {
    0% { height: 4px; width: 18px; }
    100% { height: 14px; width: 24px; }
  }
.balon {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 2px solid #000;
    border-radius: 15px;
    padding: 6px 10px;
    font-family: 'Comic Sans MS', sans-serif;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 2px 2px 0 #000;
  }
.balon::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;
  }
  @keyframes melayangBebas {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    25% { transform: translate(15px, -20px) rotate(5deg); }
    50% { transform: translate(-10px, 15px) rotate(-5deg); }
    75% { transform: translate(20px, 10px) rotate(3deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
  }
</style>

<div class="ngoceh-widget">
  <div class="balon" id="teksNgoceh">Selamat datang!</div>
  <div class="wajah">
    <div class="mulut"></div>
  </div>
</div>

<script>
  const kataKocak = [ "Selamat datang!",
    "Udah ngopi belom?",
    "Woy! apa Lo!",
    "Ramein dong blognya",
    "Buset dah keren bet",
    "Scroll terus woy",
    "Jangan diem aja",
    "Ngak gak sih?",
    "Share ke temen lu",
    "Lagi gabut ya?",
    "Mantap jiwa",
    "Klik klik",
    "Halo para suhu",
    "Salam kenal",
    "Jangan lupa komen",
    "Kopi mana kopi",
    "Keren banget",
    "Blog ini kece",
    "Salam dari Lampung",
    "Balik lagi yaa",
    "Kamu nanyeak...",
    "Pinjam 100",];
  const teks = document.getElementById("teksNgoceh");
  setInterval(() => {
    teks.innerText = kataKocak[Math.floor(Math.random() * kataKocak.length)];
  }, 3000);
</script>

Hasilnya lihat icon emoticon yang melayang layang di atas postingan ini.

Selamat datang!

Tips Edit:

1. Ganti Kata-kata: Edit bagian const kataKocak
2. Pindah Posisi: Ganti top: 80px; left: 20px;
3. Ganti Kecepatan: Ubah 3000 jadi 2000