Cara Buat Efek Klik Pada Blog

PayuBaco

Beberapa waktu yang lalu saya sudah membagikan tutorial mengenai Cara Buat Efek Salju Berjatuhan di Blog dan pada kali ini saya akan memberikan tutorial mengenai Cara Buat Efek Klik Pada Blog, pada dasarnya fungsi dari efek klik ini hanyalah untuk memperindah blog sobat. Jada bagi sobat yang tertarik untuk memperindah blog nya dengan efek ini sangat dianjurkan untuk menyimak tutorial ini dengan seksama.

Pada tutorial kali ini saya akan membagikan 2 cara memberikan efek klik, pertama dengan efek lope lope dan yang kedua dengan efek lingkaran. Tutorial ini saya dapatkan dari salah satu blogger yaitu bang Rafiqi, S.Kom. jadi bagi sobat yang ingin mengunjungi blognya bisa lihat linknya diakhir tutorial ini.

Tutorial Cara Buat Efek Love Pada Saat Melakukan Klik di Blog

  • Buka Blog => Tema => Edit HTML.
  • Cari Kode </body> lalu pastekan kode dibawah ini tepat diatasnya.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'>
</script><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>
  • Terakhir silahkan sobat save templatenya, untuk melihat demonya silahkan klik dibawah ini

Tutorial Cara Buat Efek Lingkaran Pada Saat Melakukan Klik di Blog

  • Buka Blog => Tema => Edit HTML.
  • Cari Kode </body> lalu pastekan kode dibawah ini tepat diatasnya.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>//<![CDATA[
$("body").append($('<span class="rippleff"></span>')),$(document).on("click",function(n){var i=n.clientX,a=n.clientY;$(".rippleff").css({top:a-30,left:i-30}).addClass("active")}),$(".rippleff").on("animationend webkitAnimationEnd oAnimationEnd oanimationend MSAnimationEnd",function(){$(".rippleff").removeClass("active")});
//]]>
</script>
  • Lalu tambahkan kode CSS dibawah ini diatas kode </head>.
<style type="text/css">
.rippleff{width:60px;height:60px;border-radius:99em;border:3px solid #f00;position:fixed;left:50%;transform:scale(0.5);display:none;z-index:999}.rippleff.active{display:block;animation:rippleff 0.4s ease-out forwards}
@keyframes rippleff{from{transform:scale(0.2);opacity:1}to{transform:scale(1);opacity:0}}
</style>
Untuk mengubah warna efek lingkaran yang muncul silahkan sobat ubah kode warna yang saya blog warna Biru sesuai dengan warna yang sobat inginkan. Sobat bisa cek di halaman ini untuk memilih warna.
  • Terakhir silahkan simpan template tersebut, untuk hasilnya bisa lihat dibawah ini

Gimana mudah bukan, mudah tentunya karna tutorial diatas tidak begitu sulit untuk dilakukan bagi blogger pemula seperti kita hehe. Oke itulah tutorial Cara Buat Efek Klik Pada Blog semoga sobat sekalian dapat faham mengenai tutorial yang saya bagikan kali ini, jika sobat mengalami kendala atau ada hal yang ingin ditanyakan silahkan tinggalkan komentar dan jika tutorial ini dirasa bermanfaat silahkan dishare ke sobat yang lain, terima kasih dan sampai jumpa diartikel selanjutnya.

Sumber : https://www.gurudzgn.com/2020/12/cara-membuat-efek-klik-pada-blog-atau-website.html