Menambahkan Efek Love Warna - warni saat di Klik pada Blog

Menambahkan Efek Love Warna - warni saat di Klik pada Blog

Cara menambahkan animasi love warna - warni, efek animasi heart click pada blogger

Efek Heart click pada Blog- Penambahan animasi pada halaman blog mungkin sudah ramai digunakan beberapa tahun belakangan, namun pada saat sekarang ini justru penggunaan animasi tambahan ini cenderung kurang diminati.

Alasan kenapa penambahan efek animasi tidak lagi diminati oleh para blogger diantaranya adalah karena memasang animasi berlebihan bisa membebani loading/speed Blog, merusak struktur data blog dan bahkan penambahan animasi yang tidak sesuai justru akan membuat tampilan blog kita terkesan norak dan mengganggu kenyamanan pengunjung.

Apa itu efek heart click

Seperti namanya efek heart click atau memunculkan efek hati/love pada blog saat pengunjung melakukan click pada cursor. Cursor ini bisa mouse atau sentuhan jari pada smartphone.

Setiap satu klik/sentuhan menghasilkan warna efek yang berbeda. Untuk demonya bisa kalian coba klik di area mana saja pada Halaman ini dan lihat efek yang muncul.

Apakah penambahan efek heart click memberatkan loading blog?

Penambahan efek animasi heart click atau efek love warna - warni ini menggunakan full javascript tanpa tambahan library seperti jQuery. Jadi tidak akan membebani loading/speed blog Kalian. Disini saya juga memakai efek ini dan bisa Kalian rasakan pada kecepatan loading blog ini.

Apakah bentuk animasi bisa diubah?

Efek animasi yang dihasilkan dari penambahan javascript diatas tidak menggunakan gambar ataupun svg. Jika Kalian paham CSS maka Kalian bisa melakukan modifikasi pada bentuk efek yang dihasilkan dengan mengubah sedikit source code nya.

Cara menambahkan efek heart click pada blog

Bagi kalian yang ingin menambahkan efek heart klik pada blog Kalian. Maka bisa mengikuti tutorial yang akan saya bagikan berikut ini.

Penting!

Sebelum melanjutkan ke tahap edit script HTML ada baiknya Kalian melakukan backup template terlebih dahulu

Pada dashboard Blogger pilih Tema/Theme kemudian Backup. Jika sudah silahkan ikuti langkah berikut.

Step 1 : Silahkan masuk ke Dashboard Blogger Kalian

Step 2 : Pilih menu Tema kemudian Edit HTML

Step 3 : Sekarang tambahkan Kode Javascript berikut tepat di atas untuk </body>. Atau jika tidak ada silahkan cari kode <!--</body>--></body> atau &lt;/body&gt;

    <!--[Heart Click Animation]-->
    <script>/*<![CDATA[*/
    ! function(e, t, a) {
        function n() {
            c(".heart{width: 12px;height: 12px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -8px;}.heart:before{left: -8px;}"), o(), r()
        }

        function r() {
            for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
            requestAnimationFrame(r)
        }

        function o() {
            var t = "function" == typeof e.onclick && e.onclick;
            e.onclick = function(e) {
                t && t(), i(e)
            }
        }

        function i(e) {
            var a = t.createElement("div");
            a.className = "heart", d.push({
                el: a,
                x: e.clientX - 5,
                y: e.clientY - 5,
                scale: 1,
                alpha: 1,
                color: s()
            }), t.body.appendChild(a)
        }

        function c(e) {
            var a = t.createElement("style");
            a.type = "text/css";
            try {
                a.appendChild(t.createTextNode(e))
            } catch (t) {
                a.styleSheet.cssText = e
            }
            t.getElementsByTagName("head")[0].appendChild(a)
        }

        function s() {
            return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        }
        var d = [];
        e.requestAnimationFrame = function() {
            return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
                setTimeout(e, 1e3 / 60)
            }
        }(), n()
    }(window, document);
/*]]>*/</script>

Step 4 :Simpan dan lihat hasilnya.

Itu saja? Iya memang hanya kode itu yang perlu ditambahkan

Untuk lebih mempermudah setiap penambahan script pada blog, jangan lupa tambahankan komentar sebagai penanda dibagian atas script jika suatu saat Kalian ingin merubah atau menghapusnya.

    <!--[Heart Click Animation]-->
    

Penutup

Sekian cara menambakan efek animasi love/heart click pada blog semoga bermanfaat.

Baca Juga

Advertisement

hello world('print')

4 komentar

  1. Thanks mas, izin mengunduh scriptnya.
    1. Siap. Sama-sama mas. Semoga bermanfaat
  2. Boleh dicoba nih
    1. Makasih udah nampir, silahkan dicoba mas semoga bermanfaat
Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code

Advertisement