Cara Membuat Efek Love on Click pada Blog (Klik Kursor ada Love-Love nya)

Pilihan Editor :

Cara Membuat Efek Love on Click pada Blog (Klik Kursor ada Love-Love nya)

KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya bagikan informasi mengenai Cara Membuat Efek Love on Click pada Blog (Klik Kursor ada Love-Love nya), hasil jadi dari tutorial kali ini adalah munculnya efek love atau hearts melayang keatas ketika terjadi klik pada daerah blog (termasuk daerah kosong). Demo efek ini bisa langsung kalian lihat disini dengan cara  klik daerah kosong.

Cara Membuat Efek Love on Click pada Blog (Klik Kursor ada Love-Love nya)

1. Copy kode JavaScript dibawah ini :
<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>
2. Paste atau letakkan kedalam template blog kalian.

Peletakan kode nya bisa dilakukan melalui salah satu dari 2 cara berikut ini :
1. Melalui menu Tata Letak > tambah gadget baru > pilih HTML/JavaScript > Paste > Simpan
2. atau Melalui menu Tema > Edit HTML > Paste diatas kode </body> > Simpan Template

Cukup mudah bukan?!

Itulah informasi mengenai "Cara Membuat Efek Love on Click pada Blog (Klik Kursor ada Love-Love nya)", selamat mencoba dan semoga bermanfaat. Goodluck!
BACA JUGA ARTIKEL MENARIK LAINNYA:

Tidak ada komentar :

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.