Cara Membuat Background Bergerak Pada Halaman Blog


Artikel unik kali ini adalah tentang cara membuat gambar background bergerak menjadi dinamis (Scrolling Background) pada halaman blog atau di dalam elemen HTML menggunakan kode Javascript sederhana. Artikel ini merupakan artikel lama yang ada pada blog lama admin kemudian artikel tersebut admin perbarui kembali dengan beberapa tweaking (penyesuaian) pada kode script agar terlihat uptodate dan lebih menarik. Scrolling Background ini membuat gambar background blog bergerak secara vertikal ataupun horizontal dengan beberapa pengaturan awal untuk mempermudah pemasangan dan modifikasi.

Konsep awal pembuatan dan penggunaan Scrolling Background adalah untuk membuat gambar latar belakang dari suatu elemen HTML bisa terlihat dinamis tanpa mempengaruhi performa bandwidth dan rendering. Jadi agar bisa membuat gambar latar terlihat dinamis digunakan konsep Scrolling Background menggunakan script sederhana tanpa mengurangi performa tampilan halaman web / blog.

Contoh Scrolling Background seperti yang terlihat pada elemen HTML di bawah ini, apabila tidak terlihat silakan sobat refresh browsernya. Buat sobat blogger yang ingin mencobanya silakan disimak tutorial membuat scrolling background ini.


Informasi Singkat
jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. Dewasa ini, jQuery merupakan pustaka JavaScript yang paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery adalah gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT.

Sintaks pada jQuery didesain untuk memudahkan dalam navigasi sebuah dokumen, pemilihan elemen DOM, pembuatan animasi, penanganan event, dan pengembangan aplikasi berbasis Ajax. jQuery juga menyediakan kemampuan bagi para pengembang untuk dapat membuat plug-in pada pustaka JavaScript ini. Ini memungkinan mereka untuk membuat abstraksi pada interaksi dan animasi tingkat-rendah, efek lanjutan, serta tampilan widget yang dapat dimodifikasi. Pendekatan modular pada jQuery memungkinkan kita dalam pembuatan halaman Web yang dinamis dan aplikasi berbasis Web yang ajib.

Sekumpulan fitur inti jQuery—yakni pemilihan elemen DOM, transferal dan manipulasi—dimungkinkan berkat adanya selector engine yang bernama Sizzle (sejak versi 1.3), yang membuat sebuah "gaya pemrograman baru", memadukan antara algoritme dan data struktur DOM. Gaya ini dipengaruhi oleh arsitektur JavaScript lainnya seperti YUI v3 dan Dojo, yang nantinya menstimulasi pembuatan standar Selector API.

Microsoft dan Nokia membundle jQuery pada platfoem mereka. Microsoft mengikut sertakannya dengan Visual Studio di dalam pembuatan ASP.NET AJAX dan framework ASP.NET MVC miliknya. Sementara itu, Nokia meng-integrasikannya di dalam platform pengembangan widget Web Run-Time. jQuery juga telah digunakan di MediaWiki sejak versi 1.16.
Sumber : Wikipedia


DAFTAR ISI
  1. Cara Pemasangan Pada Template Blogger
  2. Contoh Gambar Tile Background
#1 Cara Pemasangan Pada Template Blogger


PERINGATAN
Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

  • Silakan login dahulu ke blog Anda.

  • Klik tombol Tema untuk masuk ke tema editor.


  • Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.


  • Geser scrollbar ke posisi paling bawah.


  • Letakan kode dibawah ini tepat diatas kode </body>.


    <script>
    //<![CDATA[
    var bgScrollElementID = "body";
    var bgScrollDirection = "up";
    var bgScrollImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOVv6QBx7IXnZiWqXZdsNDHVzomzcRtEmxlP6J3ZaVnBBOhPSYs8qciUDDoJnaLt6AmQ2iyjDqy0w6ToQqxzgPmmXsSmJ4KMXDWsbgNHcrv_YpxN4ygHEX5wibZdapQDEIaFts-qlZCo6/s800/bg-clouds.jpg";
    var bgScrollColor = "black";
    var bgScrollSpeed = 70;
    /* Control Code */
    var bgScrollTimeRun=null;$(bgScrollElementID).css({"background":"url("+bgScrollImage+") repeat Top center","backgroundAttachment":"fixed","backgroundColor":bgScrollColor});$(function(){var backgroundheight=4000;var now=new Date();var hour=now.getHours();var minute=now.getMinutes();var hourpercent=hour/24*100;var minutepercent=minute/30/24*100;var percentofday=Math.round(hourpercent+minutepercent);var offset=backgroundheight/100*percentofday;var offset=offset-(backgroundheight/1);
    function scrollbackground(){
    if(bgScrollDirection=="up"){offset=(offset<1)?offset+(backgroundheight-1):offset-1;$(bgScrollElementID).css("background-position","50% "+offset+"px")}
    if(bgScrollDirection=="down"){offset=(offset<1)?offset+(backgroundheight-1):offset+1;$(bgScrollElementID).css("background-position","50% "+offset+"px")}
    if(bgScrollDirection=="left"){offset=(offset<1)?offset+(backgroundheight-1):offset-1;$(bgScrollElementID).css("background-position",offset+"px"+" 50% ")}
    if(bgScrollDirection=="right"){offset=(offset<1)?offset+(backgroundheight-1):offset+1;$(bgScrollElementID).css("background-position",offset+"px"+" 50% ")}
    bgScrollTimeRun=setTimeout(function(){scrollbackground()},bgScrollSpeed)}
    scrollbackground()});
    //]]>
    </script>

    KETERANGAN
    • var bgScrollElementID = "body";
      Merupakan variabel untuk target lokasi elemen, pada contoh di atas letak background akan di posisikan pada elemen body. Apabila ingin diposisikan pada elemen tertentu maka variabel tersebut bisa diisi dengan nama elemen ID dari target elemen. Contoh penulisan apabila diposisikan pada elemen tertentu, misal elemen dengan ID cthBGElm maka pada variabel ini dituliskan sebagai berikut.

      var bgScrollElementID = "#cthBGElm";

      Dikarenakan menggunakan elemen ID maka sebelum nama elemen ditambahkan karakte hashtag (#), jika menggunakan nama elemen class maka sebelum nama elemen ditambahkan karakter dot (.), sedangkan apabila merujuk pada elemen HTML maka penulisan langsung menggunakan nama elemen tanpa penambahan karakter.

    • var bgScrollDirection = "up";
      Merupakan variabel arah gerakan animasi background. Apabila ingin merubah arah gerakan ke atas ganti tinggal merubah varabel "left" dengan "up". Adapun kode variabel arah gerakan ada empat macam, yaitu : left => Gerakan dari kanan ke kiri, right => Gerakan dari kiri ke kanan, up => Gerakan dari bawah ke atas, down => Gerakan dari atas ke bawah.

    • var bgScrollImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOVv6QBx7IXnZiWqXZdsNDHVzomzcRtEmxlP6J3ZaVnBBOhPSYs8qciUDDoJnaLt6AmQ2iyjDqy0w6ToQqxzgPmmXsSmJ4KMXDWsbgNHcrv_YpxN4ygHEX5wibZdapQDEIaFts-qlZCo6/s800/bg-clouds.jpg";
      Merupakan variabel untuk URL gambar yang digunakan sebagai Background Image.

    • var bgScrollColor = "black";
      Merupakan variabel untuk mengatur warna latar.

    • var bgScrollSpeed = 70;
      Merupakan variabel untuk mengatur kecepatan gerakan animasi, semakin angkanya kecil maka gerakan animasi semakin cepat.

    • Kode javascript diatas menggunakan library JQuery, pastikan pada website / blog sudah terpasang JQuery. Script di atas bisa ditaruh di dalam kode template blog, di dalam kotak widget atau di dalam postingan artikel. Jika ingin ditaruh pada kotak widget silakan tekan tombol Add to Blogger untuk mempermudah pemasangan kode script tersebut.

#2 Contoh Gambar Tile Background


Gambar tile merupakan gambar dengan menggunakan pola tertentu yang dapat diduplikasi berulang sehingga membentuk pola yang seakan-akan menyatu menjadi satu pola gambar yang utuh. Penggunaan tile dalam sebagai background image akan mereduksi ukuran file gambar yang digunakan sebagai background image, sehingga tidak banyak memakan bandwidth jika dibandingkan menggunakan gambar utuh dalam ukuran besar.

Penggunaan efek Scrolling Background ini memang disarankan untuk menggunakan gambar tile berukuran kecil dan gambar memiliki pola yang berkesinambungan sehingga apabila background image di repeat (duplikasi) maka gambar tersebut akan terlihat menyatu menjadi satu bagian utuh.

Berikut beberapa contoh gambar tile yang bisa anda gunakan pada efek Scrolling Background.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-B25nZAOoYnmK5NmKyTkRtRtOvG4S4FoLoOySOGPXrX6WEWE_bqbv8-9jawnQXBEeoZr4S2kURMZSPHF0FxQ16Yn-vPFdx5b3Fz0gsR0hU3LOGLp83IzSU_WtNuf2f4VVVNGx0l6emo5G/s800/bg.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-jjIR9QkGq2hyphenhyphenh50IHRPtBJEJMuHiJOyHDRzkKOe3a6oW1v4eJn5YxsSiGrnrpX_KYSVq_OEnv3bDUmjMa5JAbMLG3DEO0rL_IbAq33CUMvKu74xs_seP1LzZE_pL4nLJQZdRSisHi8Oy/s800/bg_star.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOVv6QBx7IXnZiWqXZdsNDHVzomzcRtEmxlP6J3ZaVnBBOhPSYs8qciUDDoJnaLt6AmQ2iyjDqy0w6ToQqxzgPmmXsSmJ4KMXDWsbgNHcrv_YpxN4ygHEX5wibZdapQDEIaFts-qlZCo6/s800/bg-clouds.jpg


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpX1ECtoIv4L-Dd4qz6c7wvMXiHiuAqjrfEQGX8BbqMImr6XcUkiT79mSUhulEVb-s4Zf_YzGKUXhyphenhyphenDYDuXVq-OlksEthyphenhyphen3LwCipLXHhhpP23VqzCQY2gYTJl_yDXX4nIYu5-ZYt5UoUM0/s800/skull-fire-monozcore.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghRCmxOdTOgQ49XfHRpLCIZODP7SV8Al1jNDuHmMe-ohCI9IvJ8h4bLzhfmeLW1gbQhobtzX-Gpnz3HdFL99NNG8Vi4KdoRnJoPBH_EQvj57bLwDyxHXuO8OXkS7PPnwLlj9_LfADwKz6l/s800/dance_flow.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj232RoCmBLIO6uIyEYmHBpmo3T6EIPFlYH-DWkYybvQ9-Q7s1PmMs8lljBcA01nbmFYsK3utAox7o4H4xGIaXrh794oqQ-RetwHJdVcY-Q0CbVQuPkl98SgzBRbDtzzwiyxFRiToPWcYsl/s800/ThighHeels.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWO_WC4-5dqkVGx3LhqJFIF3HNzKzeUF3PRtEF_E5wvw48pKSBsE8ynqyJmjBSzvPStE9LiHZIcAVlIAugqc3JmyO-R5rvL1iBYISCqwSnELl5HAKaXWK2ZbWNvlZlTxyDDjGh2wHp-yZk/s800/animated%2520stars.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTm44ZEQLTYo-Z-mNm3DE2Fu93pmrZYBw_2zSP7-jww68_LdKRwAH9GgIaK6DRGRCQq1CcvSzAZC-cRboePj7H6HeoibPb-16uRHqAwTKTezw_zDiLIn-rP6J7_gXbbZWvTu6DJHSLkA6y/s800/animated%2520blue%2520stars.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTO3-_CJF-uV0ERzzBDoZoPMnfydQTj5NU2q7evZVBjpIFNEGXNsdRTFBAAV2REzmtHqlk8bIOqbRXNQGsrQzyQ2yFfud5tlZq557WLzX8EkQ-2E2KAVcDQNvTxyls3-u79TixntMnCRcp/s800/devil_angel_lolita_bg.png

Cara menggunakan gambar tile tersebut adalah dengan mengganti isi variabel var bgScrollImage dengan URL gambar tile yang ingin digunakan. Selain gambar di atas anda dapat menggunakan gambar tile sesuai pilihan anda. Gambar tile menggunakan format standar HTML. Pastikan URL gambar menggunakan protokol https agar tidak diblokir oleh browser modern.


Keyword


Background, Image, CSS, Code, Script, JavaScript, JQuery, HTML, CSS3, HTML5, Moving, Up, Down, Left, Right, Gambar, Latar, Animated, Animation, Animasi, Bergerak, Atas, Bawah, Kiri, Kanan, Cara, Membuat, Memasang, Halaman, Website, Blog, Blogger, Blogspot

Incoming Search Term


Cara Memasang Script Background Bergerak, Kode Membuat Animasi Background, Background Image Animated Using JQuery, How to make moving HTML background, Script Animasi Gambar Latar Bergerak Ke atas bawah kiri kanan, Javascript Gambar Background Bergerak, Gambar Background Bergerak, Gambar Latar Bergerak, Animasi Gambar Latar, Kode Animasi Membuat Gambar Bergerak
edit Tags: JavaScript

Related Cara Membuat Background Bergerak Pada Halaman Blog:

LihatTutupKomentar