bckground gambar gue

SCREEN SERVER




BLOG ANDRI


SEMOGA KALIAN SUKA DENGAN BLOG SAYA DAN SEMOGA KALIAN BETAH BERLAMA LAMA DI BLOG SAYA
Gerakkan mouse anda dan silahkan baca kembali posting kami!

TWITER




TEXTS BERJALAN

SELAMAT DATANG DAN TERIMAKASIH TELAH BERKUNJUNG

Minggu, 28 Juli 2013

BUAT BACKGROUND BERGERAK,

  • Login ke Blogger anda
  • pilih menu template
  • terus pilih edit HTML
  • Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat  di atas Kode </Head>.



Sumber : http://andrijiun.blogspot.com/2013/05/cara-membuat-background-animasi-di-blog.html#ixzz2ZqfqX7wX


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

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



  • 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://lh4.googleusercontent.com/-brpkMDLI-Jo/T0hBjzFgHbI/AAAAAAAABLs/lmWb_OeOuwE/s800/animated%2520stars.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.
  • center // Lokasi gambar berada di tengah layar.
    • Left // Lokasi gambar berada di kiri gambar.
    • Right // Lokasi gambar berada di kanan gambar.

    Dan ini ada beberapa background Animasi yang bisa kamu pasang di dalam blog kamu

    RED MATRIX
    Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/matrix_red_inner.gif

    PLURP
    Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/1-purp1.gif

    LIGHTNING
    Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/32-riem.gif

    YELLOW MATRIX
    Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/matrix-yellow.gif

    GREEN MATRIX
    Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/bercarablogspotcomt.gif

    STAR
    Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/animated_background_a2.gif

    BLUE MATRIX 1
    Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/blue-matrix-animate-layout.gif

    BLUE MATRIX 2
    Code: http://i1113.photobucket.com/albums/k514/S4NDMOTION/anime-in-blue-matrix.gif

Tidak ada komentar: