Thay đổi nền blog/website theo thời gian

Ở bài viết này mình sẽ hướng dẫn bạn cách để thay đổi hình nền theo thời gian sử dụng Javascript. Bạn có thể xem trước demo để rõ hơn thủ thuật này
Demo

Hướng dẫn

Thêm thuộc tính sau cho thẻ body trong template

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgqFoRBHxxIHp7R_FyfYDfVdYN9Hd435VBXGEXNUNZZL37B4YoVdZbIw-QxUBtOm9toJSbSDqTqkRKZYj0LitAXXvKvon32RJeanUnnuCqcUtyx4SusTvvpAkHNL-deyIQCuWHi3YYuqw8/s1600/BWM.jpg')no-repeat fixed center center;-webkit-transition: all 1.0s ease;-moz-transition: all 1.0s ease;transition: all 1.0s ease;

Dán đoạn mã sau trước thẻ đóng </head>

   var num;
   var temp=0;
   var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
   var preloads=[];
/* add any number of images here */
preload(
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrt_CxarKCPsUO1NI5e5Dk_b0bOtpVAmvHlMSzRtaJpMUEsJfvhYCUocgbuFOuK482IbO6Yo0LrjN8bRUVBfyU6svBFe6J4lv8TnFKzGPIU_HC_-c3mJ9DFs7Zf8O0D8S15RHxGJ3uDGIv/s1600/BMW.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQkETnuM5VjdvVUUJAv8xKmrRsBv_axUuBhzMmkRSRaunLPMiSR8f3kCwbmFu4jRknsYnxhYPJIhSz-y34YMnR2H59vE8Jg9I-8dTFpgDzjhQnpoCzeBGwiONzCNNZIee5xF1Cs2PeAkob/s1600/BMW+i8.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUFntne8VY09HcihAz0XlhGkdbOq0mCRIIWFCcumbL58embJKjFX6PZtR2CDHkr7XOWqUFJDRRtkUEum9de2hYqJ8rGei6-MrrpcNWaNVexvxb4FiydsGN5oRtFYuuSZ77NVcOHLJr2rAU/s1600/BMW+01.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQu_osGOZppuz0LEXmFAUTMBNjIxLtLTxisbwzTMQwnpqEn0RY2_Wp4vho0xmIZcHW19sH3n_22l54yucANljXPly39WnElRr7Ps4eNm3g4m4dT_SqTEGlQo0LbcYHRf76wh-EY64yHxAk/s1600/BMW02.jpg'
);
function preload(){
for(var c=0;c<arguments.length;c++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[c];
  }
 }
function rotateImages() {
   num=Math.floor(Math.random()*preloads.length);
if(num==temp){
   rotateImages();
 }
else{
   document.body.style.backgroundImage='url('+preloads[num].src+')';
   temp=num;
setTimeout(function(){rotateImages()},speed);
  }
 }

if(window.addEventListener){
   window.addEventListener('load',function(){setTimeout(function(){rotateImages()},speed)},false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',function(){setTimeout(function(){rotateImages()},speed)});
  }
 }

Bạn có thể thay đổi 5000 thành số khác, 5000 tương dương với 5 giây hình nền sẽ đổi 1 lần. Đừng quên thay ảnh nền sao cho phù hợp với blog của bạn, mình demo hơi xấu Cảm ơn đã theo dõi, chúc bạn thành công!