Cara Membuat Efek Klik Ripple di Blogger

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat efek klik ripple keren di blogger , saat ini sobat sering melihat efek ripple di beberapa situs blog dan sobat mungkin berpikir tentang cara membuat efek klik ripple itu ke situs sobat. jadi dalam tutorial ini, kita akan membuat efek klik ripple di blog. 

Ketika pengunjung mengklik dimana saja maka akan muncul efek ripple dimana pengunjung mengklik. Ini mungkin mempercantik tampilan situs blog atau web sobat dan pengunjung mungkin bertanya kepada sobat bagaimana cara membuanya. Dengan mengikuti tutorial ini sobat dapat dengan mudah membuatnya sendiri. 

untuk melihat demonya silakan klik tombol demo di bawah ini.

Demo

Membuat Efek Klik Ripple di Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Silahkan sobat cari kode </head>  atau &lt;!--<head/>-&gt;&lt;/head&gt; dan pastekan kode jquery dibawah ini tepat DIATAS kode tersebut.

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

4. Kemudian sobat cari kode berikut ini ]]></b:skin>  atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

.clicker {width:60px;height:60px;margin-left:-30px;margin-top:-30px;background:#204ecf;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)}

5. Selanjutnya sobat cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan tambahkan javascript dibawah ini tepat DIATAS kode tersebut

<script>
/*<![CDATA[*/ 
(function(){var i=function(n,t){return window.setTimeout(t,n)},o={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. Silahkan Sobat SIMPAN TEMA.

Nah, itulah tutorial Cara Membuat Efek Klik Ripple di Blogger atau Web Menggunakan Javascript. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Pin Share