Selasa, 19 Maret 2019

Cara Mengganti Background Blog dengan gambar Animasi

Halo, Sobat blogger!
pernah tidak kalian melihat backgrund blog dengan gambar animasi?

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

Ikuti langkah-langkah berikut.!

SELAMAT MENCOBAAAAA
ENJOYYYYYYY.................

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

SAMPAI JUMPA DI BLOG TUTORIAL SELANJUTNYAAA............ 

Tidak ada komentar:

Posting Komentar