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 :


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(http://3.bp.blogspot.com/--jeHBgQ--fE/Vp23hDs1WzI/AAAAAAAAkkw/c4h2cYqtdf0/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 = "http://3.bp.blogspot.com/--jeHBgQ--fE/Vp23hDs1WzI/AAAAAAAAkkw/c4h2cYqtdf0/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

Subscribe to receive free email updates:

0 Response to "CARA MEMASANG INFINITE SCROLLING BACKGROUND IMAGE DI BLOGGER"

Post a Comment