Sabtu, 23 April 2016

CARA GANTI BACKROUND BLOG

 Assalamualaikum Wr.Wb


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

Tidak ada komentar:

Posting Komentar