Membuat Scroll Background di Blogspot


Assalamuallaikum ... Pada hari ini aku akan sedikit berbagi Trik tutorial nih Sobat, sedikit info ini mungkin akan berguna bagi Sobat yang ingin mencobanya di Blognya, memang trik ini sudah diterapkan di beberapa Blogger, tentunya Aku pun baru saja mengetahui cara ini, yang sebelumnya aku melihat Blog Seorang Blogger yang aku bingung kenapa Background nya sedikit berbeda dengan yang lain, yaitu Background nya bergerak.

Setelah aku cari dengan Bantuan Mbah Google ternyata ketemu, di salah satu Blog luar negeri ada sebuah Postingan yang isinya tentang ini, setelah aku Coba ternyata berhasil, Untuk menambah wawasan dan info Blogger yang ingin tahu caranya aku kasih tahu saja caranya pada Postinganku Kali ini,

Sebenarnya Trik ini menggunakan JQuery sederhana yang di Khususnkan untuk Scroll Background. Jika Sobat ingin mencobanya silakan saja Gunakan Trik yang aku berikan di bawah ini.


1. Login » Blogger
2. Rancangan » Edit HTML
3. Kemudian cari kode   </head> kemudian Masukkan Kode jQuery di bawah ini tepat di atas Kode Tersebut,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){

// ***
// Scrolling background
// ***

// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}
// Start the animation
scrollbackground();
});

//]]>
</script>

4. Jika Sobat ingin menggunakan Image Pada Background silakan Masukkan Kode CSS Berikut pada body {

  background: black url(http://3.bp.blogspot.com/-Y-eYTbsPV1M/TlrE_zbeY2I/AAAAAAAABtI/A5rDWCyW29E/s1600/bg_body.jpg) repeat-y center;
  background-attachment: fixed;

Untuk Tulisan yang di arsir merah silakan Sobat ganti sendiri sesuai kehendak Sobat dengan background Image yang lain.






5. Jika pekerjaan di atas sudah selesai silakan Klik SAVE TEMPLATE


Bagaimana Sobat? Mudah kan? untuk itu Silakan di Coba, Selamat Mencoba

51 Responses to "Membuat Scroll Background di Blogspot"

  1. thx ya tutorialx., sebenarx dr dlu aq juga nyari2 yg kyk gini, akhirx ketemux disni.., skali lg makasih ya.., *smile

    ReplyDelete
  2. @Shovya Little Deer Silakan di Coba klo udah berhasil selamat ya :D

    ReplyDelete
  3. wahhh begitu ternyata caranya,, hehhe, makasih tipsnya gan,, :)

    ReplyDelete
  4. waaaa... gambar demonya bikin sakit kepala lihatnya sob....
    tapi keren sich ....
    boleh nih dicoba.. cuma diganti gambarnya aja .. :)

    ReplyDelete
  5. Mantab sob, izin nyimak ya sama aplikasi.Silahkan mampir sob

    ReplyDelete
  6. awalnya saya gak ngerti maksud dari scroll background. tapi setelah saya perhatikan demo-nya ternyata scrool latar dari blog yng bergerak yach sobat. warnya gelap lagi sepertinya cocok buat dipasang diblog saya yach sobat...

    ReplyDelete
  7. Moga Cyber Banua mewarnawi dunia maya, diperlukan banar urang nang berpotensi mewakili banua kita ^o^, he he he, moga jadi rujukan bubuhan bloggers kal-sel & sekitarnya ^o^, semangat lahh dangsanak ^o^

    ReplyDelete
  8. Masih Bingung nah maitihi demonya,, yg dimaksud Backgroun Scroll it yg mana??

    hehe Maklum #gaptek

    ReplyDelete
  9. @Poconggg Yang di belakang nya tuh bang ayied ai,, yang gerakk

    ReplyDelete
  10. Wah mirip seperti di blog saya sob, tapi saya sudah 2 bulan yg lalu menggunakannya, sya nemuin di salah satu blog shbat blogger juga,,

    ReplyDelete
  11. @AYRIY ZONE Ide ini dapat di Blog Sobat sendiri... kmudian Aku share... hehe Makasih yaa Idenya :D

    ReplyDelete
  12. nanti kalau sudah gak sibuk saya pasang di blog saya sob,, ijin copas codenya dulu yach sobat....
    terima kasih sobat...

    ReplyDelete
  13. Wuih makin keren aja nih sob postingannya :)

    Infonya simpel tapi bermanfaat.

    Nice! :)

    ReplyDelete
  14. @ Cayun Notes : Silakan kk :)

    @ Vian : Makasih Sob :D

    @ Asis Sugianto : Makasih Mas :D

    @ Masrahmat : Iya Sob :D

    @ Faisal : Makasih SOb,, makasih atas Komentarnya :D

    ReplyDelete
  15. mantap sob .. bice inpo :D

    ijin ngekiss dikit ya :* kalo bisa kiss balik
    hehehe

    ReplyDelete
  16. mantap nha, nyar sekali ni q mliat background bgarak ky tu, tapi aq ktuju yang simpel2 ja, hehe

    ReplyDelete
  17. wah coba deh ditaroh diblog makasih ya gan

    ReplyDelete
  18. mantap, perlu di terapkan juga nih, makasih infonya y?

    ReplyDelete
  19. saiia kepengen sii utak atik blog sama widgetnya.. tapi takutnya kenapa kenapa en malah berantakan lagi kek yg uda uda.. makasii anyway kang infonya ;(

    ReplyDelete
  20. mantap ilmu nya sanak, jadi tambah keren website ku www.punyaunda.com

    ReplyDelete
  21. infonya menarik terus nih, coba ah

    ReplyDelete
  22. wah saya tertarik nih..
    thanks for share :)

    ReplyDelete
  23. nice info gan. terima kasih atas informasinya

    ReplyDelete
  24. blog agan punya potensi yg bagus selain itu traffic pengunjung jg banyak...btw keep write utk mendptkan pr dr google & support trs utk blog agan dr Blog'e Cah Nganjuk

    ReplyDelete
  25. Wah seep tutornya bro :) sangat jelas.

    ReplyDelete
  26. belom ada post baru nih sob,, :D,, izin ninggalin jejak ahh,, ^^

    ReplyDelete
  27. scrool backgraoundnya keren bgt sobat...

    ReplyDelete
  28. Info menarik dan boleh sekali dicoba, Makasih buat infonya dan sukses

    ReplyDelete
  29. Terima kasih untuk tipsnya, saya mau coba semoga juga.

    ReplyDelete
  30. Saya cari dibeberapa website dan dapat tipsnya di website ini, terima kasih, mau dicoba oleh saya.

    ReplyDelete
  31. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    ReplyDelete
  32. saya udah lihat demonya seperti mesin berjalan ya.. kereeenn banget

    ReplyDelete