Cara Mengganti Background Blog dengan gambar Animasi

Monday, April 15, 2013 22 comments
Halo, Sobat blogger!
pernah tidak kalian melihat backgrund blog dengan gambar bergerak / animasi?

Nah,, kali ini saya akan coba meng-Share cara untuk merubah background Blog menjadi gambar / animasi

well.. langsung saja ikuti langkah-langkah berikut.!

1. Log in ke akun blog anda.
2. Masuk ke menu Template -> Edit HTML.
3. Cari kode </head>
4. Ketikkan kode script Berikut tepat 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 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>
<style>
body {
background: black url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif ) repeat center; background-attachment: fixed;
}
</style> 



5. Simpan Template.

NB : tulisan berwarna merah adalah URL Lokasi gambar,
untuk mengganti gambar backgroundnya, ganti saja teks berwarna merah tersebut dengan alamat URL gambar yang lainnya.

 ini beberapa URL gambar yang saya peroleh dari blog sebelah.


URL image:
http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif 


Sekian dulu tutorial dari saya, Semoga bermanfaat





22 comments:

  • diiadisaputra94 said...

    kotak mana saudari maksud? tidak ada yang dihapus koq, cuma di tmbahin tulisan / script yang warna biru itu.

    tambahkan script warna biru tersebut sebelum atau diatasnya tulisan head itu

Post a Comment

Budayakan berkomentar, karena dengan berkomentar berarti anda sudah memberikan saran dan masukan kepada saya.

Salam Sobat Blogger

 

©Copyright 2011 My Diary | TNB