CARA MEMASANG INFINITE SCROLLING BACKGROUND IMAGE DI BLOGGER

ONEPOIN.COM - Oke sobat selamat malam minggu buat yang ada pacar buat yagn jomblo jangan bersedih masih banyak janda" kaya di luar yang menantimu hahahah :v

Pada kesempatan kali ini saya akan membahas bagaimana cara membuat Infinite Scrolling Background Image pada blogger buat sobat yang berminat untuk menggunakan tips ini bisa mengikuti langkah-langkahnya di bawah iniuntuk demonya anda bisa melihat juga di bawah ini ya sobat blogger :

Demo
Click here

1. Letakkan kode CSS di bawah ini tepat di atas kode : ]]></b:skin>

CSS

#scroller {

padding:0;

margin:0;

width:100%;

height:6px;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMft39cbNUPhb666Xg5gTvR_hVCrsP4us2wfyKndKvQ-8DW7wm5HWvyS2pqMBvj82wCH3Vl4D4nN_fgxOBjdv0XiL-0j1Qmh99pgEDuokST3NiiNeMhIZg9xtTR62unobRt3Aeff05LaM/s1600/nav-menu-bdg.jpg);

background-repeat: repeat-x;

}

2. Setelah itu tempatkan kode javascript di bawah ini tepat di atas kode : </body>

JAVASCRIPT

<script>

function StartMove() {

    var cssBGImage = new Image();

    cssBGImage.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMft39cbNUPhb666Xg5gTvR_hVCrsP4us2wfyKndKvQ-8DW7wm5HWvyS2pqMBvj82wCH3Vl4D4nN_fgxOBjdv0XiL-0j1Qmh99pgEDuokST3NiiNeMhIZg9xtTR62unobRt3Aeff05LaM/s1600/nav-menu-bdg.jpg";

    window.cssMaxWidth = cssBGImage.width;

    window.cssXPos = 0;

    setInterval("MoveBackGround()", 50);

}



function MoveBackGround() {

    window.cssXPos = window.cssXPos + 1;

    if (window.cssXPos >= window.cssMaxWidth) {

        window.cssXPos = 0;

    }

    toMove = document.getElementById("scroller");

    toMove.style.backgroundPosition = window.cssXPos + "px 0px";

}

window.onload=function(){

StartMove()

}

</script>

3. Kemudian untuk menampilkan infinite scrolling background image di blog, silahkan gunakan kode HTML di bawah ini dan simpan tempat di mana Anda ingin menampilkannya.

HTML

<div id="scroller"></div>

Referensi : Kompi Ajaib

Related Posts:

Tweet