Hình động chạy theo trỏ chuột

Để blog thêm phần sinh động, bắt mắt bạn có thể cho hình ảnh chạy theo con chuột trên blog của mình. Bạn hãy làm theo chỉ dẫn đơn giản sau
Cách 1:Blogger > Bố Cục > Thêm một tiện ích HTML/Javascript và dán vào form Nội Dung đoạn code sau
Cách 2: Blogger > Mẫu > Chỉnh sửa HTML và dán code bên dưới vào sau thẻ đóng </head> rồi lưu lại

Demo tại bài viết này

<script type='text/javascript'>
/* <![CDATA[ */
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8-6VTu3k7VhzUKIhZE2YKosqhOiM7ZgwE0xWefrEAXxaXMS6nToV3qrcM-egKNrnx55BMoLrAAl3wIe6z4WybKhE8CCaJo0IooXsv8vDlBE4ys5dXo9K9y_idN43ox6VZv0KHScbq5GII/h120/conmeo.gif";
var p_img = new Image();
p_img.src = "";
var idx = document.images.length;
if ( document.getElementById("pic"+idx) ||
document.getElementById("ppl1"+idx) ||
document.getElementById("ppl2"+idx)) idx++;
document.write('<img id="eyblls'+idx+'" src="'+e_img.src+'" alt="" style="position:absolute;top:0px;left:0px;width:70px;height:38px"/>'
+'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:0px;left:0px;width:0px;height:0px"/>'
+'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:0px;left:0px;width:0px;height:0px"/>');
var h,w,r,eyeballs,pupil1,pupil2;
var d = document;
var my = 0;
var mx = 0;
var fy = 0;
var fx = 0;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}}
function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
my = e.pageY - msy;
mx = e.pageX;
}
else{
my = e.clientY - msy;
mx = e.clientX;
}}
function makefollow(){
var sy = scrl(0);
var sx = scrl(1);
//Keep eyes on screen.
var chy = Math.floor(fy-50);
if (chy <= 0) chy = 0;
if (chy >= h-50) chy = h-50;
var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= w-69) chx = w-69;
//eyeball1 centre.
var c1y = chy+17;
var c1x = chx+17;
//eyeball2 centre.
var c2y = chy+17;
var c2x = chx+52;
var dy1 = my - c1y;
var dx1 = mx - c1x;//80
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = my - c2y;
var dx2 = mx - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = my - c1y;
var ax1 = mx - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = my - c2y;
var ax2 = mx - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
eyeballs.top = chy+sy+pix;
eyeballs.left = chx+sx+pix;
pupil1.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)+sy+pix;
pupil1.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)+sx+pix;
pupil2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)+sy+pix;
pupil2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)+sx+pix;
}
function move(){
dy = fy += (my-fy) * 0.05;
dx = fx += (mx-fx) * 0.05;
makefollow();
setTimeout(move,30);
}
function init(){
eyeballs = document.getElementById("eyblls"+idx).style;
pupil1 = document.getElementById("ppl1"+idx).style;
pupil2 = document.getElementById("ppl2"+idx).style;
winsize();
move();
}
if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
}
})();
}
/* ]]> */
</script>

Bạn hãy thay đổi hình ảnh cũng như kích thước của hình sao cho đẹp và phù hợp với blog của mình

Bonus thêm một số hình cho bạn thêm sự chọn lựa

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdZtvokIiM0nxQqBMJxaj78SpnqUpt7uVkFndkZp7olYmuNVTkcxPHzc7uH5ps7gV5-aqVNu3UX9S7bWShst4OeKaUNdRu54V37horTZ586mlPYYo_j8qhmx-iQsk8doJmfS9P_8oUpaT/h120/chochay1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyC9h53xdfztXD-o4kOEswtkXxmU66kQ-gRqTtmoAaD13LE0X5ya4679BkkQwApHsLOvYi0Z34GVWH_sRcuxw4NPQRiihTHZ-NmRdcMIT4Ae4aamDWDH3X8oCL1BnWUuZokfHwv7Kn-O83/h120/chochay2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7HvPPWnjGZA3HnaLPqsDi1BQpB6ZrFyqZSyrVY5ss7CAXlhnwj6N4STODZUSmsFtKF-0u43FbeAr06dgb6zDOzNpLjw8ZqSwWoEEojilBIrrMidelpEavyUZWerZ0xYoexuCyNQ0avdEt/h120/chochay3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnW-kSRqEa2tbVI42IbaPBhlm-oTc-deKijt8In9OEDrZ-kmC554YlSFtg3eEHeugNYFb9fB5NTKxfetLuhQNYerIsmfxyyIIJ_oIyJgk4wKSiuFhCWl6vDfGlXNO3iXo4lQs3pg3dyv4W/h120/pinocchio.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWtmNup8HU1EMaNIYdnmQlHEWc62O9-2jUUb0ObU0x9ywI6BASkw6Dg0EuxcPNzJDuyW0W1JyRAq-KeZ1HKRJScSVogKjqlNOWxoJPYm8Hd9iHwpOIWi89YIg0wC-lLpIkmlg3BcVfvAeu/h120/bansung.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg222cXBpCPsZNcuPcyWLvsKslwivgo8Phd4ph5fWIVkLP00fgFZzxlpANrnHh_nrmriTvydbyoQW1ZCVeUxg3JiV3MSFSjNGf3IPWAoCbkOuM7emGvWGgaleHZ_bBGAOnGCvGW5P1QSIOT/h120/batman3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_JKhrpy7_JFgA4BcvUtFok8stvqcAEHrMe-BoXZKt_RfNk5mny67-MuguwjDCMSpPY7vHU2m8FBCSacBRzBrSr4RgpiNrZL-T34oaoBAUdiKeR6hZUVi85Ui56QAb0phNfxtFdMeUCb-/h120/tinkerbell.gif

Chúc bạn vui vẻ!