Cara Membuat Background Bergerak di Blog

Posted in Labels: Blog Code, Tutorial | Sunday, November 27, 2011 [ 1:07 AM ]

Home » Blog Code , Tutorial » Cara Membuat Background Bergerak di Blog

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 dari arah bawah ke arah atas. Buat sobat blogger yang ingin mencobanya silakan disimak trik membuat scrolling background berikut ini.

>> Preview Cara Membuat Background Bergerak di Blog <<

Cara Pemasangan

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>

Copy-Paste kode di bawah ini tepat di atas Kode </Head>.

<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>

Copy-Paste Kode CSS di bawah ini tepat di atas Kode </Head> untuk memasang gambar background. 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(http://lh6.googleusercontent.com/-5pLorlV3H-I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif) repeat center; 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.
- http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.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.

Pilihan Gambar Background

http://lh6.googleusercontent.com/-5pLorlV3H-I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif

https://lh3.googleusercontent.com/-uJ-Th52g6r0/TtjTcIlyYZI/AAAAAAAAAkM/4dNde9sGNKw/s800/bg_star.png

https://lh4.googleusercontent.com/-dQkfB1XjogQ/TtjaZFg_FNI/AAAAAAAAAkY/27E-kzfkkvc/s800/bg-clouds.jpg

http://lh5.googleusercontent.com/-nx3gBAi7vr0/Tzy-csmqhCI/AAAAAAAAA-A/TuekaM10Vjs/s800/skull-fire-monozcore.png

http://lh6.googleusercontent.com/-u6hhkovKiAg/T0fZ-dZBX0I/AAAAAAAABLM/MomlYPHQwrQ/s800/dance_flow.png

https://lh3.googleusercontent.com/-eGOdPe7gV-g/T0fZ-hR1H-I/AAAAAAAABLQ/LWN2smtA6cc/s800/ThighHeels.png

http://lh4.googleusercontent.com/-brpkMDLI-Jo/T0hBjzFgHbI/AAAAAAAABLs/lmWb_OeOuwE/s800/animated%2520stars.gif

http://lh4.googleusercontent.com/-dsFg9OnYo5Q/T0hK7b0-xoI/AAAAAAAABL4/9_CPzXBCMfw/s800/animated%2520blue%2520stars.gif

http://lh4.googleusercontent.com/-Kow92KwCv4w/T1x-QG4nWGI/AAAAAAAABWk/wLOYXtytoV4/s800/devil_angel_lolita_bg.png

.:Selamat Mencoba:.

FB Users () Comment | Read Users (27) Comment

Comments

27 Comments

goyang pattah-pattah says:
November 28, 2011 at 1:09 PM

menarik infonya sobat, lyak untuk di coba
wisata indonesia says:
November 28, 2011 at 1:11 PM

Kepengen nyoba, but kira2 berat nggak sob? cos blog saya yg BG nya g gerak aja dah lumayan berat( menurut Saya) . thank
MonozCore says:
November 28, 2011 at 1:58 PM

@wisata : kalo soal waktu loading blog ga berat tapi kalo performance browser tergantung banyaknya script dan gambar yang dipakai.
saka says:
November 28, 2011 at 4:54 PM

menarik info y sob..
tp apa ga berat nti blog sob..
all news says:
December 1, 2011 at 5:41 AM

wah backgroun nya bisa diubah menjadi gerak .... saya coba dulu sob ....
Erma Yunita says:
December 1, 2011 at 9:23 PM

iy nih kira2 bikin loading jadi lambat ga? klo engga saya mau coba
MonozCore says:
December 1, 2011 at 10:34 PM

Silakan dicoba dulu, sekiranya berat mungkin blog sobat dah kebanyakan animasi gambar dan script...
Matematika dan aq says:
December 17, 2011 at 9:09 PM

menarik sob
salam kenal
Area Terbaru says:
February 6, 2012 at 7:45 PM

makasih langsung ane praktekin...
♥VPie◥♀◤MahaDhifa♥ says:
February 15, 2012 at 11:29 PM

. . ada yang nuansa skull gitu gak?!? . .
Monoz Core says:
February 15, 2012 at 11:45 PM

@vpie: Kalo mo gunain gambar yang ada skullnya, tinggal merubah link gambar yang sobat inginkan, gampang-kan....??? saya sarankan jangan menggunakan ukuran gambar lebih dari 144px karena tampilan blog (ingat!!! tampilan blog bukan lamanya loading blog) bisa jadi kurang responsive (agak lambat seperti nonton film jaman dulu agak patah-patah)...
♥VPie◥♀◤MahaDhifa♥ says:
February 16, 2012 at 10:52 AM

. . bikinin aja donk miennn,, plizZz,, km baek dech. he..86x . .
Monoz Core says:
February 16, 2012 at 3:47 PM

@VPie: Saya dah buatkan gambar skull... Silakan digunakan.
URL Link Gambar :
https://lh5.googleusercontent.com/-nx3gBAi7vr0/Tzy-csmqhCI/AAAAAAAAA-A/TuekaM10Vjs/s800/skull-fire-monozcore.png

Oke sob semoga bisa bermanfaat...
♥VPie◥♀◤MahaDhifa♥ says:
February 23, 2012 at 12:06 PM

. . haduch,, keren bgt kawan. tenkz ya?!? ne aq lagi pake buatan km. tenkz bgt . .
Andik win says:
March 2, 2012 at 5:04 PM

blogwalking.mantap sobat
boy's happy says:
March 5, 2012 at 3:38 PM

NICE INFO
THANK'S BROTHER
:)
saya says:
March 11, 2012 at 1:50 PM

baguuuuus...tq miiin :) ,klo ada tambahin gambar yang lain dong yg lucu heheh
rino arizal says:
April 17, 2012 at 6:05 PM

udah dicoba kok ga bisa sihh ??? malah BG jd aneh ?? :-/
Monoz Core says:
April 17, 2012 at 6:52 PM

@rino: Maaf, anda kurang beruntung... hehehe :):), bcanda sob. Coba ganti template sobat terus di coba lagi pemasangan trik background bergerak...
Karmila Ratnasari says:
May 4, 2012 at 1:45 PM

kok gue ga nemu tuisan "rancangan"
pengguna baru soalnya
Rudy Hartono says:
May 16, 2012 at 9:39 PM

nice info and happy blogging
TKJ 2 MEI says:
May 27, 2012 at 12:50 AM

Info nya bagus untuk di pelajari bagi yang awam...

nice yh gan. :)
oh yh mampir jga ke blog ane yh http://mnoorazwarroni.blogspot.com
ady davedevil says:
July 3, 2012 at 7:51 AM

di atas menjelaskan tntang mengganti background blog. sya lhat hanya file ".png" dan ".gif" .......apakah ada yang support dengan file ".swf" ???
kunjungi : www.adybakom.blogspot.com
Helmy Ahmad Nurjaman says:
August 11, 2012 at 11:21 AM

cara masangny gmna sih ??? q gk ngerti
Helmy Ahmad Nurjaman says:
August 11, 2012 at 11:25 AM

cara masangny gmna sih sob ??? q gk ngerti... maklum.. masih blogger pemula... hheheheh.. :/ :p
NDHYTIGAN says:
December 20, 2012 at 10:19 AM

gag bisa gan coba di bantu:i:
Hafidz TntakeLz says:
January 24, 2013 at 4:30 PM

Thank's ya sob ats info'a..