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>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!