Membuat Effect Pointer Mouse Unik di Blogger

Tutorial merubah pointer mouse dengan effect modern di blogger

Effect Pointer Mouse Unik di Blogger

Effect Pointer Mouse

Effect Pointer Mouse adalah mengubah penunjuk mouse yang unik dan menambahkan efek riak saat Anda mengklik area mana pun di blog / situs web. Ada banyak cara dan banyak pilihan untuk mengubah bentuk pointer mouse. Namun, dalam artikel ini akan memandu Anda membuat pointer mouse yang unik.

Tutorial

Bagaimana membuat Effect Pointer Mouse ? Cara membuat Effect Pointer Mouse di Blogger, ikuti langkah-langkahnya sebagai berikut.

Kode Script Effect Pointer Mouse

1. Pertama masuk ke Dashboard Blogger.
2. Pilih Tema.
3. Pilih Edit HTML.
4. Langkah #1 - Cari kode script </head> , kemudian letakkan di atas atau sebelum </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>

5. Langkah #2 - cari kode </body> , salin kode di bawah ini dan tempelkan di atas </body>.

 
<style>
     .clicker {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    background: #21ccc9;
    border-radius: 100%;
    position: absolute;
    transform: scale(0);
    opacity: .3;
    -ms-filter: none;
    filter: none;
    z-index: 9999;
    pointer-events: none
}

.darkMode .clicker {
    background: #fff
}

.clicker.is-active {
    opacity: 0;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    filter: alpha(opacity=0);
    transition: opacity 900ms ease, transform 900ms ease;
    transform: scale(1)
}
html,body{cursor:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKCUa4Zm6VoftlY8gOCUfjUWFJK1ahHDcAA5rUT8xh9TBQWkmvh3-WBlWnwjJIhSTHBqnxuZDgOc6DnF20feQElJ8DIAVgK-gALv3Uja3XIlH92hiY9kxdPUQjR3qvOCJ5PDdRr-INZoOn/s0/mouse-f1.png&quot;), auto;}
    a:hover{cursor:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu5_ed0v6t2xqY0ivhnhtfHI7wcsqncAyPOSldrLBL2k0N7KnnTTY5CBfxo8uVmjbW92z4i9YA08eZNSnKFDZyIYSKiVR5OdN35oBz5KMWo9_XBpf3tRNmszDwoFBLnAel8UOeqnabNgEn/s0/mouse-f2.png&quot;), auto;}
</style>
<script> /*<![CDATA[*/ (function() {
    var i = function(n, t) {
            return window.setTimeout(t, n)
        },
        the = {
            WebkitTransition: "webkitTransitionEnd",
            MozTransition: "transitionend",
            OTransition: "oTransitionEnd otransitionend",
            msTransition: "MSTransitionEnd",
            transition: "transitionend"
        },
        e = function(n, t) {
            var i, o = "touchstart" === n.type.toLowerCase();
            switch (t) {
                case "top":
                    i = "pageY";
                    break;
                case "left":
                    i = "pageX"
            }
            return (o ? n.originalEvent.touches[0] : n)[i]
        };
    $(document).on("mousedown touchstart", function(n) {
        var t = $('<div class="clicker"></div>');
        return t.css({
            left: e(n, "left"),
            top: e(n, "top")
        }), $("body").append(t), i(0, function() {
            return t.on(o[Modernizr.prefixed("transition")], function() {
                return t.remove()
            }), t.addClass("is-active")
        })
    })
}).call(this); /*]]>*/
</script>

6. Terakhir - Pratinjau dan Simpan

Demikian cara membuat effect pointer mouse unik di situs web blogger, semoga bermanfaat.

Go to Link