Cara Membuat Animasi Klik Berbentuk Hati Pada Blogger

Halo sahabat blogger, ketemu lagi dengan artikel saya, pada artikel kali ini saya akan membagikan kepada kalian, sebuah animasi keren yaitu animasi berbentuk hati ketika kalian menyentuh bagian blog.

Animasi ini akan menciptakan sebuah efek yang berbentuk hati atau love, yang nantinya akan muncul ketika kamu menyentuh atau mengklik pada bagian blog kamu.

Sebenernya efek klik pada blog sangat banyak, tetapi disini saya akan membagikan hanya berbentuk love, karena lebih keren dan ceria.

Buat yang sudah tidak sabar, langsung saja menuju tutorialnya dibawah ini.

Cara Membuat Animasi Klik Hati Pada Blogger

1. Langkah pertama masuk ke Blogger > Thema > Edit HTML

2. Kemudian kalian cari kode <body/> atau &lt;!--<body/>--&gt;

3. Tahap selanjutnya silahkan kalian salin kode dibawah ini, kemudian pastekan sebelum kode yang saya sebutkan dilangkah nomor 2.

 

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

4. Langkah terakhir klik simpan, kemudian lihat hasilnya pada blog kalian.

:: :: ::

Demikianlah cara singkat untuk menambahkan animasi klik berbentuk hati pada blogger, semoga artikel ini bermanfaat.

Jika ada yang ingin kalian tanyakan, jangan sungkan untuk menghubungi saya, melalui komentar di bawah. Terimakasih

Klik Tombol Dibawah Untuk Menuju Link Anda

CONTINUE