Home / Blogger Corner / Membuat Scroll Background di Blogspot

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.

#web-buttons-idnpb5i a{display:block;color:transparent;} #web-buttons-idnpb5i a:hover{background-position:left bottom;}a#web-buttons-idnpb5ia {display:none}

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

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

About admin

Check Also

Membuat Background Header Berganti Otomatis

Pada kali ini aku akan sedikit berbagi trik mempercantik atau bisa juga trik untuk memodifikasi …

51 comments

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

  2. @Rohis Facebook Sama – sama Sob,, senang bisa membantu πŸ˜€

  3. @Shovya Little Deer Silakan di Coba klo udah berhasil selamat ya πŸ˜€

  4. wahhh begitu ternyata caranya,, hehhe, makasih tipsnya gan,, πŸ™‚

  5. waaaa… gambar demonya bikin sakit kepala lihatnya sob….
    tapi keren sich ….
    boleh nih dicoba.. cuma diganti gambarnya aja .. πŸ™‚

  6. Mantap Bener Sob Kunjung Balik Sob
    Kesini

  7. Mantab sob, izin nyimak ya sama aplikasi.Silahkan mampir sob

  8. 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…

  9. 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^

  10. @Penerbi Imtiyaz Amin … hehe Makasih dingsanak laahh πŸ˜€

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

    hehe Maklum #gaptek

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

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

  14. @AYRIY ZONE Ide ini dapat di Blog Sobat sendiri… kmudian Aku share… hehe Makasih yaa Idenya πŸ˜€

  15. Bagus untuk dicoba nih kk

  16. keren sob tutornya πŸ˜€

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

  18. Wuih makin keren aja nih sob postingannya πŸ™‚

    Infonya simpel tapi bermanfaat.

    Nice! πŸ™‚

  19. @ Cayun Notes : Silakan kk πŸ™‚

    @ Vian : Makasih Sob πŸ˜€

    @ Asis Sugianto : Makasih Mas πŸ˜€

    @ Masrahmat : Iya Sob πŸ˜€

    @ Faisal : Makasih SOb,, makasih atas Komentarnya πŸ˜€

  20. mantap sob .. bice inpo πŸ˜€

    ijin ngekiss dikit ya :* kalo bisa kiss balik
    hehehe

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

  22. @Mr Simpel Namnya aja Mister Simple… kwkwk πŸ˜€

  23. wah mantap nih gan makasih ya ilmunya

  24. wah coba deh ditaroh diblog makasih ya gan

  25. wih keren ni gan mantap artikelnya πŸ™‚

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

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

  28. mantap ilmu nya sanak, jadi tambah keren website ku http://www.punyaunda.com

  29. infonya menarik terus nih, coba ah

  30. mantap kak πŸ™‚
    keep share

  31. blog yg rapih cekali…mancap m/

  32. wah saya tertarik nih..
    thanks for share πŸ™‚

  33. nice info gan. terima kasih atas informasinya

  34. 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

  35. Wah seep tutornya bro πŸ™‚ sangat jelas.

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

  37. mampir disini dlu aaah.. πŸ™‚

  38. scrool backgraoundnya keren bgt sobat…

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

  40. Terima kasih untuk tipsnya, saya mau coba semoga juga.

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

  42. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

  43. saya udah lihat demonya seperti mesin berjalan ya.. kereeenn banget

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *