Pages

Cara membuat Background bergerak di Blogger

maksudnya background bergerak yaitu entar jika sobat masuk awal pada blogger gambar backgroundnya bisa bergerak dari arah bawah ke arah atas . langsung saja sob tak usah panjang x lebar :-D

pertama .......
sobat masuk dulu ke blogger kemudian klik seperti tanda panah bawah sob and pilih Templatesetelah itu sobat klik edit HTML

dan yang kedua........
apabila sobat blum menggunakan kode JQUERY silakan sobat pasang kode JQUERY dibawah ini and penempatannya diatas 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 masukkan kode dibawah ini tepat diatas 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>

 setelah itu sobat masukkan kode dibawah ini tepat diatas kode </Head> , di kode ini yaitu sobat bisa mengganti gambar yang sobat inginkan
<style>
body {
background: black url(http://lh6.googleusercontent.com/-5pLorlV3H-I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif) repeat center; background-attachment: fixed;
}
</style>

dan ganti tulisan biru tersebut dengan URL gambar sobat yang diinginkan

seperti contoh yang sudah saya lakukan dibawah ini sob
dan yang terakhir klik Simpan dong sob ocre :-D


semoga bermanfaat bagi panjenengan sedoyo :-)

Tidak ada komentar:

Posting Komentar