Cara Membuat Efek Love Berwarna-warni Saat Diklik di Blogspot Terbaru 2026

 


Cara Membuat Efek Love Berwarna-warni Saat Diklik di Blogspot

Halo, Sobat Blogger!

Pada kesempatan kali ini, saya akan membagikan tutorial mengenai cara membuat efek love berwarna-warni saat layar blog diklik. Efek ini akan menampilkan ikon hati kecil dengan warna yang berbeda-beda setiap kali pengunjung mengeklik bagian mana pun pada halaman blog.

Efek love ini sangat cocok digunakan untuk mempercantik tampilan blog pribadi, blog tutorial, blog hiburan, blog romantis, blog quotes, maupun website yang ingin tampil lebih interaktif.

Ketika pengunjung mengeklik layar, ikon love akan muncul pada posisi yang diklik. Ikon tersebut kemudian bergerak perlahan ke atas, membesar, lalu menghilang secara otomatis.

Menariknya, warna love yang muncul akan dipilih secara acak. Jadi, setiap klik dapat menghasilkan warna yang berbeda-beda.

Tampilan Efek Love Saat Blog Diklik

Setelah kode dipasang, efek yang akan muncul kurang lebih seperti berikut:

  • Ikon love muncul pada titik yang diklik.
  • Warna ikon love berubah secara acak.
  • Love bergerak perlahan ke arah atas.
  • Ukuran love akan sedikit membesar.
  • Love menghilang secara halus.
  • Efek bekerja pada komputer maupun smartphone.

Tutorial ini tidak memerlukan pemasangan plugin tambahan karena kita hanya menggunakan kode JavaScript dan CSS sederhana.

Kelebihan Efek Love Berwarna-warni

Selain membuat blog terlihat lebih menarik, efek ini mempunyai beberapa kelebihan, di antaranya:

  1. Mudah dipasang di Blogger.
  2. Tidak membutuhkan gambar tambahan.
  3. Warna love berubah secara otomatis.
  4. Dapat bekerja pada berbagai jenis template.
  5. Tidak menggunakan library eksternal.
  6. Efek akan muncul setiap kali halaman diklik.
  7. Dapat dihapus kapan saja melalui menu Tema Blogger.

Meskipun demikian, sebaiknya jangan memasang terlalu banyak efek animasi pada satu blog. Penggunaan animasi yang berlebihan dapat mengganggu kenyamanan pengunjung dan membuat halaman terasa lebih berat.

Cara Membuat Efek Love Berwarna-warni di Blogspot

Sebelum mengedit kode template, sebaiknya lakukan pencadangan terlebih dahulu. Hal ini penting agar template dapat dikembalikan apabila terjadi kesalahan saat pemasangan kode.

Berikut langkah-langkah pemasangannya.

1. Masuk ke Dashboard Blogger

Silakan login ke akun Blogger, kemudian pilih blog yang ingin diberikan efek love.

Setelah itu, masuk ke menu:

Tema → Klik ikon panah → Edit HTML

Sebelum melanjutkan, Anda juga dapat mencadangkan template dengan memilih menu:

Tema → Cadangkan

Simpan file template di perangkat Anda.

2. Cari Tag Penutup Body

Setelah halaman Edit HTML terbuka, klik bagian dalam kode template.

Gunakan kombinasi tombol berikut untuk membuka kolom pencarian:

CTRL + F

Kemudian cari kode:

</body>

Biasanya kode </body> berada di bagian paling bawah template Blogger.

3. Pasang Kode Efek Love

Salin seluruh kode berikut, kemudian letakkan tepat di atas kode penutup </body>.

<script type='text/javascript'>
//<![CDATA[
(function (window, document) {
  var hearts = [];

  window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (callback) {
        setTimeout(callback, 1000 / 60);
      };
  })();

  function randomColor() {
    return 'rgb(' +
      Math.floor(255 * Math.random()) + ',' +
      Math.floor(255 * Math.random()) + ',' +
      Math.floor(255 * Math.random()) + ')';
  }

  function createStyle() {
    var css = `
      .heart-click-effect {
        width: 10px;
        height: 10px;
        position: fixed;
        background: #ff0000;
        transform: rotate(45deg);
        pointer-events: none;
      }

      .heart-click-effect::before,
      .heart-click-effect::after {
        content: '';
        width: inherit;
        height: inherit;
        position: absolute;
        background: inherit;
        border-radius: 50%;
      }

      .heart-click-effect::before {
        left: -5px;
      }

      .heart-click-effect::after {
        top: -5px;
      }
    `;

    var style = document.createElement('style');
    style.type = 'text/css';

    try {
      style.appendChild(document.createTextNode(css));
    } catch (error) {
      style.styleSheet.cssText = css;
    }

    document.getElementsByTagName('head')[0].appendChild(style);
  }

  function createHeart(event) {
    var heart = document.createElement('div');

    heart.className = 'heart-click-effect';

    hearts.push({
      element: heart,
      x: event.clientX - 5,
      y: event.clientY - 5,
      scale: 1,
      opacity: 1,
      color: randomColor()
    });

    document.body.appendChild(heart);
  }

  function animateHearts() {
    for (var i = 0; i < hearts.length; i++) {
      var item = hearts[i];

      if (item.opacity <= 0) {
        document.body.removeChild(item.element);
        hearts.splice(i, 1);
        i--;
        continue;
      }

      item.y--;
      item.scale += 0.004;
      item.opacity -= 0.013;

      item.element.style.cssText =
        'left:' + item.x + 'px;' +
        'top:' + item.y + 'px;' +
        'opacity:' + item.opacity + ';' +
        'transform:scale(' + item.scale + ') rotate(45deg);' +
        'background:' + item.color + ';' +
        'z-index:99999;' +
        'pointer-events:none;';
    }

    requestAnimationFrame(animateHearts);
  }

  function startEffect() {
    createStyle();

    document.addEventListener('click', function (event) {
      createHeart(event);
    });

    animateHearts();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', startEffect);
  } else {
    startEffect();
  }
})(window, document);
//]]>
</script>

Posisi pemasangannya kurang lebih seperti berikut:

<script type='text/javascript'>
  KODE EFEK LOVE
</script>

</body>

4. Simpan Template

Setelah kode berhasil dipasang, klik ikon Simpan pada halaman Edit HTML.

Tunggu sampai proses penyimpanan selesai, kemudian buka blog Anda.

Klik pada bagian mana pun di halaman blog. Jika pemasangan berhasil, akan muncul ikon love berwarna-warni pada area yang diklik.

Cara Mengubah Ukuran Efek Love

Ukuran dasar efek love pada kode tersebut adalah 10 piksel.

Cari kode berikut:

width: 10px;
height: 10px;

Untuk membuat efek love lebih besar, ubah menjadi:

width: 15px;
height: 15px;

Apabila ukuran love diubah, posisi bagian lingkarannya juga perlu disesuaikan.

Untuk ukuran 15 piksel, ubah bagian berikut:

left: -5px;
top: -5px;

menjadi kurang lebih:

left: -7px;
top: -7px;

Namun, ukuran 10 piksel sudah cukup ringan dan tidak terlalu mengganggu pembaca.

Cara Membuat Love Bergerak Lebih Cepat

Kecepatan love bergerak ke atas diatur melalui kode berikut:

item.y--;

Untuk membuatnya bergerak lebih cepat, ubah menjadi:

item.y -= 2;

Semakin besar angkanya, semakin cepat love bergerak ke atas.

Cara Membuat Love Lebih Cepat Menghilang

Kecepatan love menghilang diatur melalui kode:

item.opacity -= 0.013;

Agar lebih cepat menghilang, ubah menjadi:

item.opacity -= 0.02;

Sebaliknya, agar love bertahan lebih lama, gunakan angka yang lebih kecil, misalnya:

item.opacity -= 0.008;

Cara Menggunakan Satu Warna Love

Secara otomatis, kode tersebut akan menghasilkan warna love secara acak.

Apabila Anda hanya ingin menggunakan satu warna, cari bagian berikut:

color: randomColor()

Kemudian ubah menjadi:

color: '#ff0000'

Kode #ff0000 akan menghasilkan love berwarna merah.

Contoh warna lainnya:

#ff1493 = merah muda
#ff0000 = merah
#800080 = ungu
#00bfff = biru
#00cc66 = hijau
#ffa500 = oranye

Cara Menghapus Efek Love

Apabila suatu saat Anda tidak ingin menggunakan efek tersebut lagi, masuk kembali ke:

Blogger → Tema → Edit HTML

Cari kode:

heart-click-effect

Kemudian hapus seluruh kode <script> yang sebelumnya dipasang.

Setelah itu, klik Simpan dan efek love tidak akan muncul lagi.

Mengatasi Efek Love Tidak Muncul

Jika efek tidak bekerja, periksa beberapa hal berikut:

  1. Pastikan seluruh kode sudah disalin tanpa ada bagian yang terpotong.
  2. Pastikan kode dipasang tepat di atas tag </body>.
  3. Pastikan template berhasil disimpan.
  4. Bersihkan cache browser.
  5. Buka blog menggunakan mode samaran atau incognito.
  6. Periksa apakah terdapat kode JavaScript lain yang bermasalah.
  7. Pastikan tag <script> dan </script> tidak terhapus.

Anda juga dapat mencoba membuka blog menggunakan perangkat atau browser lain.

Apakah Efek Love Aman Digunakan?

Efek ini relatif ringan karena tidak mengambil gambar, font, atau library JavaScript dari website lain. Semua bentuk love dibuat menggunakan CSS, sedangkan animasinya dijalankan menggunakan JavaScript.

Namun, setiap kode animasi tetap membutuhkan sedikit sumber daya perangkat. Oleh karena itu, gunakan efek ini secukupnya dan hindari memasang banyak animasi lain dalam satu halaman.

Untuk blog yang mengutamakan kecepatan, SEO, dan pendapatan AdSense, gunakan efek visual dengan bijak agar tidak mengganggu kenyamanan pembaca.

Kesimpulan

Membuat efek love berwarna-warni saat blog diklik ternyata sangat mudah. Kita hanya perlu memasang kode CSS dan JavaScript tepat di atas tag penutup </body> pada template Blogger.

Setelah dipasang, setiap klik pengunjung akan menghasilkan ikon love dengan warna acak. Ikon tersebut akan bergerak ke atas, sedikit membesar, kemudian menghilang secara halus.

Efek ini sangat cocok untuk membuat tampilan blog menjadi lebih menarik, interaktif, dan berbeda dari blog lainnya.

Demikian tutorial mengenai cara membuat efek love berwarna-warni saat diklik di Blogspot. Semoga artikel ini bermanfaat bagi Sobat Blogger semuanya.

Terima kasih dan selamat mencoba!

0 Response to "Cara Membuat Efek Love Berwarna-warni Saat Diklik di Blogspot Terbaru 2026"

Posting Komentar

Silakan berkomentar dengan sopan dan tidak mengandung spam.

Langganan: Posting Komentar (Atom)