Cara Tambah Latar Belakang Gulir jQuery Untuk Blogger

1.Login ke dashboard blogger Anda -> tata letak--> Edit HTML

2.Gulir ke mana Anda melihat </ head> tag.

3.Salin kode di bawah ini dan paste tepat sebelum </ head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[$(function(){

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

// height of background image in pixelsvar backgroundheight = 4000;

// get the current minute/hour of the dayvar 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 arevar offset = backgroundheight / 100 * percentofday;

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

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

// Start the animationscrollbackground();});//]]></script>

4.Sekarang gulir ke bawah ke mana Anda melihat kode seperti ini:

body {background:$bgcolor;margin:0;color:$textcolor;font:x-small Georgia Serif;font-size/* */:/**/small;font-size: /**/small;text-align: center;}

Catatan: kode di atas bisa berbeda di bagian template Anda.Tapi bagian penting  adalah body { .


5.Ganti kode diatas dengan kode di bawah ini:

body {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1_LV3LtjlugL4cGEbOuL2L4RggiCsglhzrzt2XUqG09Re-43wqJkKFW92R3a2WGdWiL3bLHhwJOPmCJviIHfP2NJC9sm7JLt6lRbhmupUAPH9DCvNXn-E6ZxtyBZPPpvXZB-fki-CXbj/);color:$textcolor;font:x-small Georgia Serif;font-size/* */:/**/small;font-size: /**/small;text-align: center;}

Catatan: Anda dapat menggunakan gambar yang cocok, bukan gambar di atas .

6.Klik pada save template dan Anda selesai.

Demo