Membuat Effect Pointer Mouse Unik di Blogger

Tutorial merubah pointer mouse dengan effect modern di blogger

Membuat 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

Cara membuat effect pointer mouse unik di situs web blogger, sebagai berikut .

1. Masuk ke menu Dashboard Blogger

2. Pilih Tema

3. Masuk ke Edit HTML

4. Cari kode </head> , salin kode script di bawah ini dan tempelkan di atas nya.

<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. Kemudian cari kode </body> , salin kode di bawah ini dan tempelkan di atas nya.

 
<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/AVvXsEhkzL7J_BdzYHEZNObCK9Ij_4jWc09L50rSfIDkztQ9LZPg3Um9220oWcNx64qTd7RuG645yeyTfHImOrfHwl_5Hyz3KPbCK6k3FSojEUCZY1Evwonak6dQnTPE5yBvV5VWZFvWRJgXF7Je/s0/mouse-f1.png&quot;), auto;}
    a:hover{cursor:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkt2_mKUyWyj_rBJ53lxhNCAxADU7yjjQE8HsSdX61d2X6cpRgjb1TdYGyrvz6hgoI09XnRXISiKUIaAb1ppTWldqD5HYg2TL-ypQIaWZEc3vVcC6mvagQhvO59lR_tajJ4Z1OQgrvzRtT/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. Simpan