DonkeyMails.com: No Minimum Payout
Server : Channel :
Use List | DalNet Commands (Open) | Help
« »
« »
« »
« »

Sunday, November 27, 2011

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 dari arah bawah ke arah atas, untuk contoh seperti yang terlihat pada postingan artikel ini apabila tidak terlihat klik disini contoh Background Blog Bergerak. Buat sobat blogger yang ingin mencobanya silakan disimak trik membuat scrolling background berikut ini.

Cara Pemasangan
  • Login » blogger.
  • Rancangan » Edit HTML.
  • Klik Ctrl+F dan cari kode berikut: </Head>
  • Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head>.
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
    

  • Copy-Paste kode di bawah ini tepat di atas Kode </Head>.

    <script type='text/javascript'>
    $(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() {
    offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
    $('body').css("background-position", "50% " + offset + "px");
    setTimeout(function() {
    scrollbackground();
    }, 70
    );
    }
    </script>
  • Copy-Paste Kode CSS di bawah ini tepat di atas Kode </Head> untuk memasang gambar background. Anda dapat mengganti gambar background sesuai dengan yang anda inginkan dengan merubah alamat hosting gambar pada Kode CSS di bawah dengan alamat hosting gambar yang anda pilih.

    <style>
    body {
    background: black url(http://lh6.googleusercontent.com/-5pLorlV3H-I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif) repeat center; background-attachment: fixed;
    }
    </style> 
    

  • Keterangan :
    - repeat // Pengulangan gambar arah x dan y.
    • repeat-x // Pengulangan gambar hanya arah horizontal.
    • repeat-y // Pengulangan gambar hanya arah vertikal.
    - http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif // URL Link gambar.
    - center // Lokasi gambar berada di tengah layar.
    • Left // Lokasi gambar berada di kiri gambar.
    • Right // Lokasi gambar berada di kanan gambar.
Pilihan Gambar Background 


  • http://lh6.googleusercontent.com/-5pLorlV3H-I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif



  • https://lh3.googleusercontent.com/-uJ-Th52g6r0/TtjTcIlyYZI/AAAAAAAAAkM/4dNde9sGNKw/s800/bg_star.png



  • https://lh4.googleusercontent.com/-dQkfB1XjogQ/TtjaZFg_FNI/AAAAAAAAAkY/27E-kzfkkvc/s800/bg-clouds.jpg



  • http://lh5.googleusercontent.com/-nx3gBAi7vr0/Tzy-csmqhCI/AAAAAAAAA-A/TuekaM10Vjs/s800/skull-fire-monozcore.png



  • http://lh6.googleusercontent.com/-u6hhkovKiAg/T0fZ-dZBX0I/AAAAAAAABLM/MomlYPHQwrQ/s800/dance_flow.png



  • https://lh3.googleusercontent.com/-eGOdPe7gV-g/T0fZ-hR1H-I/AAAAAAAABLQ/LWN2smtA6cc/s800/ThighHeels.png



  • http://lh4.googleusercontent.com/-brpkMDLI-Jo/T0hBjzFgHbI/AAAAAAAABLs/lmWb_OeOuwE/s800/animated%2520stars.gif



  • http://lh4.googleusercontent.com/-dsFg9OnYo5Q/T0hK7b0-xoI/AAAAAAAABL4/9_CPzXBCMfw/s800/animated%2520blue%2520stars.gif



  • http://lh4.googleusercontent.com/-Kow92KwCv4w/T1x-QG4nWGI/AAAAAAAABWk/wLOYXtytoV4/s800/devil_angel_lolita_bg.png
.:Selamat Mencoba:.
DMCAProtected by CopyscapeMyFreeCopyright.com Registered & Protected
Share :
Comments
Tweets
29 Comments

29 comments:

  1. menarik infonya sobat, lyak untuk di coba

    ReplyDelete
  2. Kepengen nyoba, but kira2 berat nggak sob? cos blog saya yg BG nya g gerak aja dah lumayan berat( menurut Saya) . thank

    ReplyDelete
  3. @wisata : kalo soal waktu loading blog ga berat tapi kalo performance browser tergantung banyaknya script dan gambar yang dipakai.

    ReplyDelete
  4. menarik info y sob..
    tp apa ga berat nti blog sob..

    ReplyDelete
  5. wah backgroun nya bisa diubah menjadi gerak .... saya coba dulu sob ....

    ReplyDelete
  6. iy nih kira2 bikin loading jadi lambat ga? klo engga saya mau coba

    ReplyDelete
  7. Silakan dicoba dulu, sekiranya berat mungkin blog sobat dah kebanyakan animasi gambar dan script...

    ReplyDelete
  8. @vpie: Kalo mo gunain gambar yang ada skullnya, tinggal merubah link gambar yang sobat inginkan, gampang-kan....??? saya sarankan jangan menggunakan ukuran gambar lebih dari 144px karena tampilan blog (ingat!!! tampilan blog bukan lamanya loading blog) bisa jadi kurang responsive (agak lambat seperti nonton film jaman dulu agak patah-patah)...

    ReplyDelete
  9. . . bikinin aja donk miennn,, plizZz,, km baek dech. he..86x . .

    ReplyDelete
  10. @VPie: Saya dah buatkan gambar skull... Silakan digunakan.
    URL Link Gambar :
    https://lh5.googleusercontent.com/-nx3gBAi7vr0/Tzy-csmqhCI/AAAAAAAAA-A/TuekaM10Vjs/s800/skull-fire-monozcore.png

    Oke sob semoga bisa bermanfaat...

    ReplyDelete
  11. . . haduch,, keren bgt kawan. tenkz ya?!? ne aq lagi pake buatan km. tenkz bgt . .

    ReplyDelete
  12. baguuuuus...tq miiin :) ,klo ada tambahin gambar yang lain dong yg lucu heheh

    ReplyDelete
  13. udah dicoba kok ga bisa sihh ??? malah BG jd aneh ?? :-/

    ReplyDelete
  14. @rino: Maaf, anda kurang beruntung... hehehe :):), bcanda sob. Coba ganti template sobat terus di coba lagi pemasangan trik background bergerak...

    ReplyDelete
  15. kok gue ga nemu tuisan "rancangan"
    pengguna baru soalnya

    ReplyDelete
  16. Info nya bagus untuk di pelajari bagi yang awam...

    nice yh gan. :)
    oh yh mampir jga ke blog ane yh http://mnoorazwarroni.blogspot.com

    ReplyDelete
  17. di atas menjelaskan tntang mengganti background blog. sya lhat hanya file ".png" dan ".gif" .......apakah ada yang support dengan file ".swf" ???
    kunjungi : www.adybakom.blogspot.com

    ReplyDelete
  18. cara masangny gmna sih sob ??? q gk ngerti... maklum.. masih blogger pemula... hheheheh.. :/ :p

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...