Cara Membuat Infinite Scrolling ANTV Background Image Di Blogger




Cara Membuat Infinite Scrolling ANTV Background Image Di Blogger
Cara Membuat Infinite Scrolling ANTV Background Image Di Blogger
Pada malam ini saya akan membuat postingan tutorial yang menarik dari web trans7 yaitu gambar yang bergerak secara terus-menerus di bawah navigasi menunya, kira-kira seperti pada gambar di atas untuk contohnya. Nah ternyata gambar tersebut merupakan sebuah background yang digerakan dengan jquery infinite scrolling background.

setelah saya memasang  Infinite Scrolling ANTV tersebut pada blog saya, tapi saya merasa agak sedikit berat juga, dan akhirnya saya memikirkan bagaimana cara agarnya supaya blog say tidak lambat atau loading agak lama,  dan akhirnya saya berpikiran untuk menggunakan javascript agar sedikit lebih ringan. 
Pada akhirnya saya mendapatkan sebuah javascript yang memang bisa digunakan untuk membuat background yang bergerak seperti yang terdapat pada web trans7. untuk anda yang merasa penasaran dan ingin memasangnya silahkan anda ikuti tutorial di bawah ini ya.

DEMO

Cara Membuat Infinite Scrolling ANTV

  1. Pertama , pastikan anda sudah masuk di dasbhor milik anda sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Simpan kode di bawah ini Kode CSS atau Simpan kode ini di atas ]]></b:skin>
    #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;
    }
  4. Kode HTML: Kemudian untuk menampilkan infinite scrolling background image di blog, silahkan gunakan kode HTML di bawah ini dan simpan tempat di mana Anda ingin menampilkannya.
    <div id="scroller"></div>
  5. Kode Javascript: Silhkan anda simpan kode javascript di bawah ini di atas kode </body>
    <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>
  6. Anda bisa perhatikan kode yang saya marking di atas, itu adalah image warna-warni untuk background yang akan ditampilkan bergerak dengan dimensi 450px x 6px. Image pada kode CSS dan Javascript harus sama.
  7. Jika sudah anda bisa klik save template, dan lihat hasilnya.
Demikian penjelasan di atas, selamat mencoba dan semoga bisa berhasil. Apabila ada yang kurang jelas bisa anda klik tombol di bawah ini.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect