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/AVvXsEhvBLhd2EZsOtEO4cdg-QZp29QEb3xiUUbKtZynwJ4DDru2Mom8L2ZdhXNNqkdJ7Y0_hEGCCPNi62rmbxvhh0L-7_CqvWN1DZLOAgwVBRBFyn6AEyvgGMSBZZ9g2MhDEZKOGcMGWXDIyBLe/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/AVvXsEhvBLhd2EZsOtEO4cdg-QZp29QEb3xiUUbKtZynwJ4DDru2Mom8L2ZdhXNNqkdJ7Y0_hEGCCPNi62rmbxvhh0L-7_CqvWN1DZLOAgwVBRBFyn6AEyvgGMSBZZ9g2MhDEZKOGcMGWXDIyBLe/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/AVvXsEhOGJu8FZFBgcBg35INalS4c3NSaC_djTP2xU-HGClUoOWvWNARmYeOYEVdvdTUnQGP-M7gAuP-2ubSR04UhVbb3xcKAUKK9sUNM1wcCDAyjto6raiS51kg0VzaEPkeLO74xx_6ILW3PO9u/s800/bg.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnjGgyZoe3COAwHluL6RBE7K0g42_Ifl3oIrLqXdojWAhJpOzj2De2kFEPthjPOXKhLD-YkePSzBp6fk7gcb03B7YbA16o5C6fBBFy7OCZheqsA3DYagLQ6s78PM_Y_luiO3lisoPs_PNt/s800/bg_star.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvBLhd2EZsOtEO4cdg-QZp29QEb3xiUUbKtZynwJ4DDru2Mom8L2ZdhXNNqkdJ7Y0_hEGCCPNi62rmbxvhh0L-7_CqvWN1DZLOAgwVBRBFyn6AEyvgGMSBZZ9g2MhDEZKOGcMGWXDIyBLe/s800/bg-clouds.jpg


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOLLLjsnbCRMBLQyIzdbh-q-Ph9O3702kafFrCAYqAZNsxTZdB4HOPnvlFOG7AfL63liF0h5lz2A254wnc1mYerWsGCfzHwHd2AdEIsBlZbWfTKp-MhycNqTbUvdeiKr05IjcjRTFZEdw/s800/skull-fire-monozcore.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjTlcqOgXU8ZHoA-AKSWZHUgNn4NOznQKBoF0dgdUvr2bvY1sqtEO9my8OgxmIzXgylbdFhrs82eCuzAc75yG8lPMRRawFi5pTxpnbviexucGHHXZAKmF8xU3qedZwqA3vSBxezCizMPgx/s800/dance_flow.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9tQEYaFSpkdATGsXyxrufai3nIEgvjGpKqENKIiCGVy_44xPdWbGCi4S_o9f8TA8JkL947rkxvZp1aoFlaIUvUxJAxl_s41TAn-cYJhamu1TFfJjo_10oC5z1-Y9Lh3QSt2h66PsBKSby/s800/ThighHeels.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQF1_nwZsJhaJJPTgbRLNJ2WX1zbKyB3w6BBf5cocZqNoUOTw_61UKIZ9kN38g8OSKDr3GZX0hrPEEdMPcwtLxsLJrOOQCmqgCQBLYQhKxNK_ggkKMtAxsGmj2Y2Uwr8hmoNhtSvhRjJ-V/s800/animated%2520stars.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTrwluLJo0sr456V5du8RHBfBt189t6S3FdJ1F1B5oKuYU0KlWzhCBNcuTZ3unzrl11Ub1xt4iH92i_-py_b3OPluxYGzR361f8NuFhL8Q9SmM4jNnj5kwyHdbNzdBAFBTJ2d-zuUQmbR/s800/animated%2520blue%2520stars.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG_55dNKipfOjNNIygXVJg-ZUnna-cPbAMzKL9gUK2c1bWAGAmp7R27ZcSDHTH22OIKNJ2kbEUfvcVP2QNkzOJMo9yYJQ7TWPv4eDkJFTUqiApQNZtYX1pZlAcmGngds7JzqTkE1CYILkE/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

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Pasang Widget ASTROLOGI Online Lengkap Terbaru

Gambar
A strologi berasal dari bahasa Yunani yang terdiri dari dua kata, yakni: "astron" yang artinya bintang dan "logos" yang artinya ilmu; jadi, astrologi adalah ilmu yang mempelajari tentang posisi bintang-bintang dan benda-benda luar angkasa lainnya, di mana benda-benda tersebut mempunyai keterkaitan dengan nasib, peruntungan, kepribadian, perilaku, asmara, interaksi, kondisi logis dan batin manusia. Astrologi menunjuk kepada yang mana pun di antara beberapa sistem pengetahuan untuk mengerti, dan menterjemahkan tentang kenyataan dan keberadaan manusiawi, berdasarkan posisi dan gerak-gerik relatif berbagai benda langit, terutama Matahari, Bulan, planet, dan lunar node seperti dilihat pada waktu dan tempat lahir atau lain peristiwa dipelajari. Bagi banyak astrologer, hubungan itu tidak perlu sebab musabab. Astrologi berbeda dengan astronomi, ilmu astronomi mempelajari tata letak bintang-bintang dan planet-planet pada sistem tata surya tertentu dan tidak dikaitkan dengan ...
Baca selengkapnya

Terjawab ! Ini yang Terjadi pada Manusia Jika Tewas di Luar Angkasa

Gambar
S alah satu impian umat manusia adalah mampu menjelajah luar angkasa yang tidak memiliki batas luas dan jarak. Di sana, jutaan misteri masih tersimpan dengan rapi hingga manusia wajib menguaknya dengan sempurna. Tapi, sesuatu yang berada di luar angkasa kadang susah untuk diteliti. Permasalahan yang dihadapi adalah susahnya akses untuk mendekat, ilmuwan harus menggunakan pesawat atau satelit. Kedua adalah tak ada manusia yang mampu ke sana dan mengamatinya dengan mata dan kepalanya langsung. Yang kita tahu, luar angkasa adalah sesuatu yang luas dan indah. Dari apa yang telah diketahui ilmuwan saja, banyak hal menakjubkan yang menarik untuk diketahui dari luar angkasa. Banyak yang berpendapat kalau luar angkasa adalah hal yang sangat misterius. Sejumlah hal yang saat ini telah dipelajari ilmuwan, masih sangat jauh dari apa yang belum kita tahu. Segala hal di luar angkasa memang penuh dengan jutaan misteri sehingga ilmuwan berambisi menempatkan banyak astronot ke luar angkasa di masa dep...
Baca selengkapnya

#Keren ! Tombol Share Facebook Menggunakan Animasi Spiderman

Gambar
W idget Tombol Share Animasi Spiderman, merupakan widget tombol yang menggunakan kode javascript untuk membuat animasi yang atraktif dan dinamis. Pada gambar spiderman apabila di klik maka secara otomatis akan membuka popup window yang men-share artikel blog ke situs facebook. Link yang dibagikan merupakan URL artikel yang sedang dilihat oleh pengunjung blog. Widget tombol animasi spiderman ini merupakan widget lama yang sudah pernah saya buat, namun saya hadirkan kembali dengan merombak total kode scriptnya agar animasi ini bisa lebih fungsional dengan tampilan yang super keren dan dinamis. Kode script khusus dibuat untuk menghadirkan konsep dari karakter spiderman agar terlihat sedikit lebih atraktif. Contoh dari implementasi widget tombol share animasi spiderman seperti yang terlihat pada artikel blog ini. Jika tidak terlihat silakan refresh browser anda. Bagi anda yang tertarik dengan widget ini silakan disimak cara pemasangannya. Informasi Singkat Spider-Man (bahasa Ind...
Baca selengkapnya