cara membuat background animasi di blog

cara membuat background animasi di blog

Diposkan oleh Risin Setiawan di 05.02

" Anda mungkin pernah melihat blog yang background/latar belakang nya itu menggunakan gambar animasi ? anda mau mencobanya maka dari itu itu pada postingan kali ini saya akan menjelaskan cara membuat background animasi di blog oke...

Anda mungkin pernah melihat blog yang background/latar belakang nya itu menggunakan gambar animasi ? anda mau mencobanya maka dari itu itu pada postingan kali ini saya akan menjelaskan cara membuat background animasi di blog oke langsung aja kita simak bersama!!!!

• Login » Blogger.
• Rancangan » Edit HTML.
• Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head>.
• <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
•  kemudian Copy-Paste Kode CSS di bawah ini tepat di atas Kode </Head> untuk memasang gambar background. 

• <script type='text/javascript'>
  //<![CDATA[
  $(function(){
  // ***
  // Scrolling background
  // ***
  // height of background image in pixels
  var backgroundheight = 4000;
  
  // get the current minute/hour of the day
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  
  // work out how far through the day we are as a percentage - e.g. 6pm = 75%
  var hourpercent = hour / 24 * 100;
  var minutepercent = minute / 30 / 24 * 100;
  var percentofday = Math.round(hourpercent + minutepercent);
  
  // calculate which pixel row to start graphic from based on how far through the day we are
  var offset = backgroundheight / 100 * percentofday;
  
  // graphic starts at approx 6am, so adjust offset by 1/4
  var offset = offset - (backgroundheight / 1);
  
  function scrollbackground() {
  // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
  offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
  // apply the background position
  $('body').css("background-position", "50% " + offset + "px");
  // call self to continue animation
  setTimeout(function() {
  scrollbackground();
  }, 70
  );
  }
  // Start the animation
  scrollbackground();
  });
  
  //]]>
  </script>

  Anda dapat mengganti gambar background sesuai dengan yang anda inginkan dengan merubah alamat hosting gambar pada Kode CSS di bawah dengan alamat hosting gambar yang anda pilih. 
  <style>
  body {
  background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKL7qa_kmnjjyufbG0mqEm1eU4td2QOIQiWi4xj_ArveW2SKEatuLjx9PTWMb7fhRWWlRUpqFBZt9wFDCimKvw9GRHek36JRGAahMnkwFJ-3tzZ2Ey6bZ02I9ArUKrn5a4s0PY95zvvEg1/s800/animated%2520stars.gif) repeatcenter; background-attachment: fixed;
  }
  </style>
  
  
   
  Keterangan : - repeat // Pengulangan gambar arah x dan y.
  
  
  • repeat-x // Pengulangan gambar hanya arah horizontal.
  • repeat-y // Pengulangan gambar hanya arah vertikal.
  - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKL7qa_kmnjjyufbG0mqEm1eU4td2QOIQiWi4xj_ArveW2SKEatuLjx9PTWMb7fhRWWlRUpqFBZt9wFDCimKvw9GRHek36JRGAahMnkwFJ-3tzZ2Ey6bZ02I9ArUKrn5a4s0PY95zvvEg1/s800/animated%2520stars.gif // URL Link gambar.
  - center // Lokasi gambar berada di tengah layar.
• Left // Lokasi gambar berada di kiri gambar.
• Right // Lokasi gambar berada di kanan gambar.

Dan ini ada beberapa background Animasi yang bisa kamu pasang di dalam blog kamu

RED MATRIX

Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/matrix_red_inner.gif

PLURP

Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/1-purp1.gif

LIGHTNING

Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/32-riem.gif

YELLOW MATRIX

Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/matrix-yellow.gif

GREEN MATRIX

Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/bercarablogspotcomt.gif

STAR

Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/animated_background_a2.gif

BLUE MATRIX 1

Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/blue-matrix-animate-layout.gif

BLUE MATRIX 2

Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/anime-in-blue-matrix.gif