Sabtu, 13 Februari 2016

Cara Membuat Background Bergerak di blog


Info unik kali ini mengenai salah satu trik membuat gambar background blog menjadi dinamis. Trik ini menggunakan JQuery sederhana yang dikhususkan untuk membuat gambar background menjadi bergerak (Scrolling Background). Script ini membuat gambar background blog bergerak secara vertikal ataupun horizontal, untuk contoh seperti yang terlihat pada postingan artikel ini apabila tidak terlihat silakan sobat refresh browsernya. Buat sobat blogger yang ingin mencobanya silakan disimak trik membuat scrolling background berikut ini.

Cara Pemasangan :
  1. Login ke blog anda.
  2. Klik Template kemudian klik edit HTML.
  3. Cari potongan kode "</body>" pada template blog sobat (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian guna mempercepat pencarian).
  4. Copy - Paste kode berikut ini tepat di atas kode "</body>" atau bisa juga dipasang pada kotak gadget blog.
  1. <script>
    if(typeof(jQuery) == 'undefined'){
    document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
    </script>
    <script>
    var bgScrollDirection = "left";
    var bgScrollImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG9fiexxWUxY9smVf8UOcG3nmUb3VX9PX2sGJC12mnqUeZpLdO0SQ6-GfFG7K_FB0t2swUcCD6YmTSRJ0dThp_avpcfwN67ebA2snBgx_XE59nQDJqypKAvXJWocCbRHCy-lVO2QXEoRzB/s800/ThighHeels.png";
    var bgScrollColor = "black";
    var bgScrollSpeed = 70;
    </script>
    <script src="http://sites.google.com/site/monosbit/monosbit_bg_power_scroll.js"></script>
  2. Klik "Save" dan lihat hasilnya.
Keterangan :
  • var bgScrollDirection = "left" 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 merupakan variabel URL gambar.
  • var bgScrollColor merupakan warna latar.
  • var bgScrollSpeed merupakan kecepatan gerakan animasi, semakin angkanya kecil maka gerakan animasi semakin cepat.
Pilihan Gambar Background



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9XLcVfGcehU4vK_oX3CV8waZWl19XlOtBdbm4z7_KryTy5zQi6caUou8p23f9-zvn6LFHIgsr7QHWZQJvmHpUji7L8IKW8DZaKD0-dxU15Moc14we5OHtyS8y0KTa1Do_kS7QqsQv8KPp/s800/bg.gif


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEincCLGUVyTJkigs1SGDqVxr0RwKqtqhA0hTLch09QdMCWxVZpxr3dbeCZANh1zPYuQDZd53ei-AU5bsb9F9GYmqiiT7wC3kMF9xP4AT9UDh_2LmhUUQa5u3FfNOPBa-OdRLeAWICXbkf4y/s800/bg_star.png


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDV6IUCkHOeX0JY5BXQh2TMEpi_jDNe6gIoX2CJgoh-41DImW7Yd8OCu2IvZ0HtLIX3lXp3kEoe2U8lwbow9p186KFeB_pB05cobyongHlKM3xXjqFN8-w2tElu0x6tmRmodiJyOKxw9JB/s800/bg-clouds.jpg


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6gUHSOS7lLoMFp6BCDzZehsfbJEQ_3y3XPVNBom_ULqeufbGA3R9mrm6lF8fE-ZBlPEX0nT7gshqWlr3xzFDaqqE4VElJWJjQdQGKEhfv2Q2v7ggh8KCIMvjQ5vqxLESZYTfrKhkeg_SY/s800/skull-fire-monozcore.png


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcYelXt-htRLPZgnOfPqKGRXkLWJznFArtO-l2kLWiv9ELcWLXXQXhQXtq8tzMdK_QQFvhAA5goVDkwEzsuMf9h-c83OBzf7Tp0M1L1TNQSW0fiTpq3lZ4PuLjQSWsf_I8fbN-YJqe09X/s800/dance_flow.png


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG9fiexxWUxY9smVf8UOcG3nmUb3VX9PX2sGJC12mnqUeZpLdO0SQ6-GfFG7K_FB0t2swUcCD6YmTSRJ0dThp_avpcfwN67ebA2snBgx_XE59nQDJqypKAvXJWocCbRHCy-lVO2QXEoRzB/s800/ThighHeels.png


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi4R9JmcNwx7QGs5MPQ-UPagtxPZ0Slk3gV_7U9rQUrN6uESrRB19kihQ9DrykMdoF93-3eDsMtVhAXoK7weTqg3l2r59KgChWSeRfOPuw4R8M_kXa7HJdGaS7a30kZVeVyNUYUskMHMIh/s800/animated%2520stars.gif


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaeGBS7g3-uQwPaJOyQ0qRn_9gdpv0nQgJTeC_wr-ErIn_AB4YVV665QBuzWgqVSP2NmJwe2KFEansKh6134PalYdETKGxUyNnXS_65PMYCHBMZwh4JqW8LywuSCdFxRYSxhhYg7K60IgY/s800/animated%2520blue%2520stars.gif


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9MoWTIuPzX_gq2PpfipC7fZXYwE2Z76-YYA2SaqISDhZMKBbnjihAdy5UkXpBESA-uHQTnSImsYQqoqifAovXCCJksdz8VpaTiD6AmtE_Omkqx1Kp7kVgs3h_8A6BF4GUpVPRVGq-0qT/s800/devil_angel_lolita_bg.png
     
    Hujan Hello Kitty Membagikan Permen diBlog
    Minggu, 11 Januari 2015 - Permalink - 0 Comments
    Hay hay mas bro/mbak bro.. dino iki aku kate bagi-bagi tuto, noh,judule nok nduwur.
    tutorial iki khusus gawe pecita Hello Kitty yo!! *aku pake' logat Jawa


    Caranya :

    • Log in blog-->dashboard-->tata letak-->tambah gadget-->edit html/javascript
    • Copy kode dibawah, lalu pastekan dalam kotak html
    <script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/39/39831/27/parts.js"></script>
    • Save
    Saiki dilok'en, apik tenan to?!!


    semoga bermnfaat,,..????
     
     

Tidak ada komentar:

Posting Komentar