Cara Membuat Background Bergerak di Blog

Cara Membuat Background 

Info unik kali ini mengenai salah satu trik membuat gambar background blog menjadi dinamis. Trik ini menggunakan JQuery sederhana yang dikhususkan untuk membuat gambar background menjadi bergerak (Scrolling Background). Script ini membuat gambar background blog bergerak secara vertikal ataupun horizontal, untuk contoh seperti yang terlihat pada postingan artikel ini apabila tidak terlihat silakan sobat refresh browsernya. Buat sobat blogger yang ingin mencobanya silakan disimak trik membuat scrolling background berikut ini.

Cara Pemasangan :

1. Login ke blog anda.
2. Klik Template kemudian klik edit HTML.
3. Cari potongan kode "</body>" pada template blog sobat (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian guna mempercepat pencarian).
4. Copy - Paste kode berikut ini tepat di atas kode "</body>" atau bisa juga dipasang pada kotak gadget blog.
   

   <script>
   if(typeof(jQuery) == 'undefined'){
   document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
   </script>
   <script>
   var bgScrollDirection = "left";
   var bgScrollImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7gJ2FTRM1-7atecaVY-b2S_ja_qrlr-qcad6OrkoDYe3k768Y2PpICw8jJSK7tVYIJM3DihmIgN1EhQfAfkJVPH_ItHlSI3R-YDpSOoja3MOQr5SgLrtfMAGI_XZGvKu6Co3_haDNuzbW/s800/ThighHeels.png";
   var bgScrollColor = "black";
   var bgScrollSpeed = 70;
   </script>
   <script src="http://sites.google.com/site/monosbit/monosbit_bg_power_scroll.js"></script>

5. Klik "Save" dan lihat hasilnya.

Keterangan :

• var bgScrollDirection = "left" merupakan variabel arah gerakan animasi background. Apabila ingin merubah arah gerakan ke atas ganti tinggal merubah varabel "left" dengan "up". Adapun kode variabel arah gerakan ada empat macam, yaitu :
  left => Gerakan dari kanan ke kiri,
  right => Gerakan dari kiri ke kanan,
  up => Gerakan dari bawah ke atas,
  down => Gerakan dari atas ke bawah.
• var bgScrollImage merupakan variabel URL gambar.
• var bgScrollColor merupakan warna latar.
• var bgScrollSpeed merupakan kecepatan gerakan animasi, semakin angkanya kecil maka gerakan animasi semakin cepat.

Pilihan Gambar Background

• 
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimExAvQSraTAo-OEXwRR5gmo46XnpvblWjVF6_rcYVge7jNZ91XBObbgf4OSU700obIOUEVJxzuf1ocNF_oqbcNpcwJHtQKmStCsapNTtUbN2j9ypJVLwXXjZ2lXYj_aAQegWWkIr08b5K/s800/bg.gif
• 
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3vwTxTXwYN4q0E4oHAT-gmlJY67D6hkRCJbb19QwawPSlaJqlmb9Dmx8m-C_DJWGPOrqLlO__uvDjUbRVB8CGHVm1YNnKwu_RGk5j5sCRLhPgol5V1hwR0BOr-cNlIzMxQdA2iiR1x6b/s800/bg_star.png
• 
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLvzdUWe2JslZmcWnSU64hCqFt__K4_W0DoBOHxFV1wIQbauBxIxBcs5qfr9sZj5qLLPJVk5kXcLvl6uKDZq-1Qhz6ezr1TQj4_5CI7hcfmjWL84Bi0JF4YLSYql_85dYn1_ESbCMgYDxx/s800/bg-clouds.jpg
• 
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWBXm18HILuX2ktHvI9ACKv4T46afWw5VH2PEE3idJyd0K46FWH8DKM4acwpfH7FRsI5nI85MfsKTFFFtHmdwrP-Vv9VQ6NA6n40dhvIGJVkBNLxT4UTcKcWratDLjLlsqH6LVgrQ4bOiU/s800/skull-fire-monozcore.png
• 
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaw-Ic4GxPNDSqFEMv3qqSiYR1ekEFoL9qj0LIqG3uKKOKvmvIm3T2mbImAVNVMIKmDaLXLAQQN51SboHfmaUl8EX7bhHuVcxCKOjhIfor9O5fmPZZujiZ7rvxVpAh7ah5twQ_ey2y5gTp/s800/dance_flow.png
• 
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7gJ2FTRM1-7atecaVY-b2S_ja_qrlr-qcad6OrkoDYe3k768Y2PpICw8jJSK7tVYIJM3DihmIgN1EhQfAfkJVPH_ItHlSI3R-YDpSOoja3MOQr5SgLrtfMAGI_XZGvKu6Co3_haDNuzbW/s800/ThighHeels.png
• 
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZb-lbDtq9CwHfDxFrrpSnk7m420EKZ6z1Ng1QVNfjYoEVsl9yVvjFrV5PR1WPUBFNNZaER_TdFhjtIi_qWRyIr-5EkeL4uhyyVRHJOiI8hlxXHcygFty8RylLs6Bfz_0faVlCuDUJd7cz/s800/animated%2520stars.gif
• 
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4AsMadkOugLTA2dWfEJh0m5xvbT-mihdm66SuT9IgCxjUemFS7Kyzli9ligb2Cif5bYPgD4FnmavvLD2i5wc6RFQ8w9zlfMazNZZdMKE-J33L5XWn2FNjglOtDXZ652Y9BtRrv-BBX5Gp/s800/animated%2520blue%2520stars.gif
• 
  
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_sUJxAGfsgwRumFJa3IXXsSpC79s-JVH3qB6_-ovoOzPpWF0DHnajN4hRImOTTJNrZPf0ItVQ8UHb3kUhVZ4Gzwt6HltOOLoElf326uKHFXirX6wQxOQsbPVt_DKlqKiQQAKIjQqkAvY/s800/devil_angel_lolita_bg.png
•