CARA MEMBUAT BACKGROUND DI BLOG BERGERAK

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




Select All

<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/AVvXsEhPbmg032KxVRP9epoxp_teL4LBSl-wTXzSUqU7D6zfUKPzFwrgpTfZoph7Gg7jMLXkCRkjp2iDwHoOt49hzXXIuH1XiDvM04pPHygdIAA7zDGKuHO9qjYPjHSPTKYA2bL6TyA7FBNrD-YB/s800/ThighHeels.png";
var bgScrollColor = "black";
var bgScrollSpeed = 70;
</script>
<script src="http://sites.google.com/site/monosbit/monosbit_bg_power_scroll.js"></script>



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/AVvXsEjqra7tdTY7Z41ZkcJvzmiXaKmzGb_pAaEvqJGvFeTWBgvvNGeJEsgRG2ZRXETSvFhE25a1oCWllI7fUs9CuOoCTeD177n96ZhRJGnNlu37nOWBvVrffKWU4HZpzjJEATURwBqaul5oxVs7/s800/bg.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNmjXRjtWi5gr2dRuzjl_-05M82razZ4fSArgSJ1P3fD8O64ct1kchl8v_9wYB3u3jyPfYBkJ7Xyb_ioHA1yp4D2kUhrr-dUigqOG_ho1RXLKaeGbpw_kNoQRc6y0MWmoRCoFdY4vFfom/s800/bg_star.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcs-nr6ln_QBDrNv3eBRaD7t0buu4xKfZ3tIoVUaQv11awOCIT8SZrutjNAkE3t_GCgYfXQ7HPptWs8MU6-RyOBkVOS3OgVBlMF717saIMHULFYxhvt1AVl4XMTXVicbke0PNU1kkF9M5/s800/bg-clouds.jpg


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihB97l_Xd7LBbo9E7w47Ib8YkzAwvgNGHrYm0XVH_cNR-jNX424-ku3GgEnDbn-bz32SDZx8NAfa94C_ZYArL9eLO3s2Hucg0tI3IpZkFf_UFxZMHM6vGerFMj-GWGJ_bWwUZTV_Ain9ZG/s800/skull-fire-monozcore.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwEonKnXTLf62euTVK4wl4zbSPFD8UFpwE79zQqdA2w6Css9sTuWleIdbjapL5mCAfljp1kAyeKq9UN4enfOYKr77Hf5KC2sYIh6Evf8AKVh_Zb3OO0x5r6hgrkjK4xLYGyk4z3mxBE6C/s800/dance_flow.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPbmg032KxVRP9epoxp_teL4LBSl-wTXzSUqU7D6zfUKPzFwrgpTfZoph7Gg7jMLXkCRkjp2iDwHoOt49hzXXIuH1XiDvM04pPHygdIAA7zDGKuHO9qjYPjHSPTKYA2bL6TyA7FBNrD-YB/s800/ThighHeels.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPEtkPSkgdRL1g6Hmygdtw9Nvs9simboK4lZXex5Eq7yKmyBOHyy7zprY-PQI5kyGD5FQf70C2P2Rc0YFQdWQw_AD05tOoKRboA_xWqMYBtfO6GXW4Upe_eeb7yGsvmV6kfCRSR7-HEaqe/s800/animated%2520stars.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIYa371dyf9EkPWFaXIR5izjTfFHjb12jSXuBXQZa-87AaN0bWZFO1qqdFyUtLAA55vVVIeepYV-ZfDHABFbQ7QWaVRYwz9nhOtW95kJghCLoM-Mkmck2Wo8-B0KLMC89APnbvJa2QAL3/s800/animated%2520blue%2520stars.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie4XDC3jthV-R1vJoZv8yzr2u3SvOGgP_hkTmAi-RIEcAzyUoljjw2CQJus95XDowLzHUH1J81iWO0WXWfQ10vkvqDyjTT1MeSFjRkoE047Sts7DKsD5rAUXOouqtvp1isy46NUYRT1Td7/s800/devil_angel_lolita_bg.png

ATAU

Black Red Matrix

  

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2AK5fkOvNUxdBg9f_E0uz70dvb1nxuVQzSl7BlQGpsQP6xw6I3zvBNtyNXp-zmLhki-c-mI7RASt-ZWBTyHT9qLGlpqKdt6ArB4yD1m_qd3uoqOx6ud0Cp_KxPpLXboBQlFpTVS79HEWN/s800/black_red_matrix.gif

Blue Matrix 1

  

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo70KsRAfr2dC18iByov_tZsoeBrt7I94c8tzp1ouJiFIcpD4ZY4OFxsiD5FwzYPW8CXNmOqO_-Alz4PrXPVggysNyLr7SyHo1TJiFKuf_Y8voBWTaaWKL0Ymi8azLsLa7A8iAu4AknrEO/s800/bluematrix.gif

Blue Matrix 2

  

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYtPQdxS00fdBrVkTQjxZFDhs8uy73LJ9pcvgV-o_p98rWzMXYoi5x0tTl842wtsZUH_1W5VHQVqMrnEse6JOMZyZfVfQzvJ_ghb1cJ9jgOnxItTDxcK3CU_phCsZvgBax9TZGIuSGfqYH/s800/bluematrix2.gif

Green Matrix

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2XEKQpkrSejjlOnU5a0wjBPLgYFWOEbWPwvmHqScMJnJWnOWErnGGRQw5cJHPuf0E-YCdoAoygqPNuMHhuIf_l6ncO6Togq0ozr8yRIOtSLtlqZeZovbZQtneyZHJzNlTEYdlDbasEeES/s800/matrix.gif

Port Listener

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ6KPHtBHDuwAbamJT0PeW8EM74phfHKEET1pWMZHZyoQiVwIMPhtlR2b5Y5TAptQV-CeBEco2jseqgLnukZLqD4YCDOPfTqiwBrA9oRhAokVMFWPrZBdIW2g27G7c1tHx78hfYtpsdV6w/s800/port_listener.gif

Red Matrix

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEEc4gZwqlHnlsWXnh89vc7KgFwrybbM00K8fwzT5JDl54EBMcGDS3OS-NpHJC64BSPVu1W4UQHpsLVG6MDlIXyooKxhUrUQvkVpaLPXXL7OWCaDoO-94cZy76ztH0TpB20-PjwgUB_WA0/s800/monozcore_blogspot_com_redmatrix.gif

Blue Matrix

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkhw8j7qKa4PUCC8joTRRlPmf6fij8q-5-gEPC7JT6IqOFk9_z24VOSqKWRV5nDYdJm7XRTFKz-Cjxv5PcyB0lXevmoFS9xocyLSlHl-CDI9ohe7w6gsEusBCu4sARxURWFRi5u6Q376A/s800/matrix.gif

Semoga Bermanfaat