Hướng dẫn thêm hiệu ứng click chuột hiện trái tim

 

Hướng dẫn thêm hiệu ứng click chuột trái tim

| Mở đầu

Xin chào mọi người, chào mừng quay trở lại với bài viết tiếp theo của mình. Ở bài viết này mình sẽ hướng dẫn mọi người cách thêm hiệu ứng click chuột hiện ra trái tim như các bạn click ở trang này thì sẽ thấy những trái tim xuất hiện. Hiệu ứng này sẽ xuất hiện ở trang web nếu như các bạn click chuột 

Hiệu ứng này được tạo bằng HTML,Css và Javascript, nhưng đã được hợp nhất và chuyển đổi thành JavaScript. Hiệu ứng này đã được nhiều người áp dụng ở các blog hay website nào đó, mình mới tìm hiểu được nên đem về chia sẻ cho mọi người, ngoài ra còn có thể thay đổi các kí hiệu trái tim thành các kí hiệu khác,...

Bên dưới sẽ là cách mình hướng dẫn để thêm hiệu ứng vào Blog nhé.


DEMO Click here


| Hướng dẫn cách thêm hiệu ứng

1. Đầu tiên đăng nhập vào Blogger -> Chủ đề -> Chỉnh sửa HTML -> Tìm tới </body>
 
2. Các bạn sao chép code JavaScript bên dưới và dán lên trên thẻ </body>
<!-- Heart Click Animation Design By www.khaiphinguyen.com -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1 3(d,e){2 f=7();5 3=1(a,b){a=a-i;2 c=f[a];5 c},3(d,e)}1 7(){2 a=[\';j:8(\',\'1c\',\'G\',\'1d\',\'1e/1f\',\'H\',\'1g\',\'1h\',\'1i\',\'1j\',\'.6{I:J;K:J;L:M;n:#1k;j:o(k);-N-j:o(k);-O-j:o(k)}.6:P,.6:Q{1l:\\R\\R;I:p;K:p;n:p;q-r:s%;-N-q-r:s%;-O-q-r:s%;L:M}.6:P{S:-T}.6:Q{U:-T}\',\'1m\',\'1n\',\'1o\',\'V\',\'1p\',\'1q\',\'1r\',\'1s\',\'W;1t:\',\'1u\',\'X\',\'8\',\';z-1v:1w\',\'1x\',\'1y(\',\'1z\',\'1A\',\'6\',\'1B\',\'1C\',\'Y\',\'1D\',\'1E\',\'t\',\'1F\',\'1G\',\'W;S:\',\'1H\',\'1I\',\'1J\',\'1K\',\'1L\'];7=1(){5 a};5 7()}(1(a,b){2 c=3,9=a();1M(!![]){Z{2 d=4(c(1N))/l+-4(c(1O))/1P+4(c(1Q))/1R+4(c(1S))/1T*(-4(c(1U))/u)+-4(c(1V))/1W*(-4(c(1X))/1Y)+4(c(1Z))/20*(-4(c(21))/22)+-4(c(23))/24*(-4(c(25))/26);27(d===b)28;29 9[\'t\'](9[\'10\']())}11(2a){9[\'t\'](9[\'10\']())}}}(7,2b),!1(c,d,e){2 f=3;1 12(){2 a=3;13(a(2c)),14(),v()}1 v(){2 a=3;2d(2 b=w;b<g[a(2e)];b++)g[b][a(A)]<=w?(d[\'Y\'][a(2f)](g[b][\'B\']),g[\'2g\'](b,l)):(g[b][\'y\']--,g[b][\'8\']+=0.2h,g[b][a(A)]-=0.2i,g[b][\'B\'][a(15)][a(16)]=\'U:\'+g[b][\'x\']+a(2j)+g[b][\'y\']+a(2k)+g[b][a(A)]+a(2l)+g[b][\'8\']+\',\'+g[b][a(2m)]+\')\\2n(k);n:\'+g[b][a(2o)]+a(2p));H(v)}1 14(){2 b=3,C=\'1\'==2q c[b(D)]&&c[b(D)];c[b(D)]=1(a){C&&C(),17(a)}}1 17(a){2 b=3,m=d[b(18)](b(2r));m[b(2s)]=b(2t),g[b(2u)]({\'B\':m,\'x\':a[b(2v)]-u,\'y\':a[\'2w\']-u,\'8\':l,\'V\':l,\'G\':19()}),d[b(2x)][b(i)](m)}1 13(a){2 b=3,h=d[b(18)](b(15));h[\'2y\']=b(2z);Z{h[b(i)](d[b(2A)](a))}11(2B){h[b(2C)][b(16)]=a}d[b(2D)](b(2E))[w][b(i)](h)}1 19(){2 a=3;5 a(2F)+~~(E*F[a(1a)]())+\',\'+~~(E*F[a(1a)]())+\',\'+~~(E*F[\'X\']())+\')\'}2 g=[];c[f(1b)]=(1(){2 b=f;5 c[b(1b)]||c[b(2G)]||c[b(2H)]||c[\'2I\']||c[b(2J)]||1(a){2K(a,2L/2M)}}()),12()}(2N,2O));',62,175,'|function|var|_0x4ebe|parseInt|return|heart|_0x2932|scale|_0x1492cf||||||||_0x5e9794|0x15d|transform|45deg|0x1|_0x2fb14f|background|rotate|inherit|border|radius|50|push|0x5|_0x5cfee1|0x0||||0x168|el|_0x10fb73|0x178|0xff|Math|color|requestAnimationFrame|width|10px|height|position|fixed|webkit|moz|after|before|x27|top|5px|left|alpha|px|random|body|try|shift|catch|_0x26b52c|_0x5d3b76|_0x463a56|0x175|0x177|_0xe5a57d|0x16e|_0x4d2514|0x16f|0x15f|1289286CLfNrp|appendChild|text|css|27012giukSn|getElementsByTagName|410650LwNHtO|createTextNode|f00|content|66bkfZWy|msRequestAnimationFrame|20uNlxpR|707290lMHbwK|styleSheet|div|className|opacity|createElement|index|99999|806418ZlZFdn|rgb|104khBHEk|style|cssText|onclick|head|mozRequestAnimationFrame|length|webkitRequestAnimationFrame|190098sbotYW|203wpHHLS|removeChild|441998NfSDaw|clientX|while|0x183|0x172|0x2|0x186|0x3|0x167|0x4|0x162|0x160|0x6|0x181|0x7|0x174|0x8|0x180|0x9|0x169|0xa|0x165|0xb|if|break|else|_0x17b76c|0x52947|0x164|for|0x17d|0x182|splice|004|013|0x17f|0x16d|0x185|0x170|x20rotate|0x187|0x171|typeof|0x16b|0x16c|0x176|0x17c|0x184|clientY|0x179|type|0x15e|0x163|_0x59fcca|0x16a|0x161|0x17a|0x173|0x17e|0x17b|oRequestAnimationFrame|0x166|setTimeout|0x3e8|0x3c|window|document'.split('|'),0,{}));str='stm3Cstm64stm69stm76stm20stm73stm74stm79stm6Cstm65stm3Dstm27stm74stm65stm78stm74stm2Dstm61stm6Cstm69stm67stm6Estm3Astm63stm65stm6Estm74stm65stm72stm3Bstm64stm69stm73stm70stm6Cstm61stm79stm3Astm6Estm6Fstm6Estm65stm3Bstm27stm3Estm44stm65stm73stm69stm67stm6Estm20stm42stm79stm20stm3Cstm61stm20stm68stm72stm65stm66stm3Dstm27stm68stm74stm74stm70stm73stm3Astm2Fstm2Fstm77stm77stm77stm2Estm73stm6Dstm61stm72stm74stm74stm65stm63stm68stm6Dstm75stm6Bstm65stm73stm68stm2Estm6Fstm6Estm6Cstm69stm6Estm65stm27stm3Estm53stm6Dstm61stm72stm74stm20stm54stm65stm63stm68stm20stm4Dstm75stm6Bstm65stm73stm68stm3Cstm2Fstm61stm3Estm3Cstm2Fstm64stm69stm76stm3E'; document.write(unescape(str.replace(/stm/g,'%')));
//]]>
</script>
Cuối cùng bấm Lưu và xem kết quả nhé!

| Lời kết

Cảm ơn các bạn đã xem, hy vọng tiện ích này sẽ có hữu ích với Blog của bạn. Chúc các bạn thành công và một ngày tốt lành.
Nguyễn Phi Khải

Xin chào, đây là lời nhắn tự động. Mình là Nguyễn Phi Khải, người có trách nhiệm quản lý website khaiphinguyen, bạn có thắc mắc gì hãy bình luận bên dưới để được hỗ trợ nhé.

2 Nhận xét

Mới hơn Cũ hơn