Cara Membuat Efek Love On Click Di Blogger

Cara Membuat Efek Love On Click Di Blogger


Pelajar Design - Pada kesempatan ini saya akan membagikan sebuah tutorial tentang Cara Membuat Efek Love On Click Di Blogger. Jadi saat pengunjung datang dan mengklik artikel atau yang lainnya maka akan muncul Efek Love yang melayang keatas. Untuk demo nya kalian bisa cek dibawah.

Pada awal tahun 2015-2016 tutorial ini sangat lah populer sekali, karena banyak Blogger-Blogger yang meng-custom Cursor Di Blog mereka dengan bentuk ular, logo brand, bentuk orang, animasi, efek-efek dan masih banyak lagi.

Pasti kalian pernah menjumpai Blog tahun 2015-2016 yang memakai Efek tersebut. Karena navigasi dalam sebuah Website Atau Blog sangatlah penting, Bayangkan saja jika sebuah Website Atau Blog tidak memiliki Cursor, lantas bagaimana cara klik-klik nya?

Memasang Efek Love On Click memanglah tidak berpengaruh pada Website Atau Blog kalian, namun dapat mempercantik saja. Tidak pernah ada pembuktian bahwa seseorang yang memasang Efek Love On Click pada Website Atau Blog nya dapat menempatkan Website Atau Blog nya dihalaman Pertama Google.Cara Membuat Efek Love On Click Di Blogger

Cara Membuat Efek Love On Click Di Blogger - Cara 1

1. Masuk ke Blogger.com.
2. Pilih menu TEMA > Edit HTML.
3. Lalu pastekan kode dibawah ini tepat DIATAS kode </body>.

<script type='text/javascript'>
    //<![CDATA[
    ! function (e, t, a) {
        function n() {
            c(".heart{width: 10px;height: 10px;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: -5px;}.heart:before{left: -5px;}"),
                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>

4. Lalu Simpan.

Jika cara diatas tidak berhasil, silahkan gunakan cara dibawah.

Cara Membuat Efek Love On Click Di Blogger - Cara 2

1. Masuk ke Blogger.com.
2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Lalu pastekan kode dibawah ini pada kolom Konten / Content.

<script type='text/javascript'>
    //<![CDATA[
    ! function (e, t, a) {
        function n() {
            c(".heart{width: 10px;height: 10px;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: -5px;}.heart:before{left: -5px;}"),
                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>

4. Simpan.

Jika berhasil maka hasilnya akan seperti dibawah. Jadi kesimpulannya Efek Love akan muncul apabila pembaca mengklik layar.

Hasil Akhir Dari Efek Love On Click

Bagaimana artikel tentang Cara Membuat Efek Love On Click Di Blogger? Mudah bukan. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya. 

You may like these posts