™ticania: Cara membuat bagroound Bergerak di Blogger

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. 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 didalam kode <Body> atau di kotak gadget.

Pilih salah satu script animasi background bergerak

Animasi Dari Bawah ke Atas

<script language="javascript">
document.body.style.background="#f3f3f3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHkUDz6L-cIopwTGT2b8LCPX9qmfjKk86sJ37g9Q6qCqe0sr0uUcffMh9XKS6SvJ3lGJSdTxfqv_6PrCxb-f1lS57xqeQBx7MczkP_qa-E3Al-89th-sqxR8Kp032jwi8ewLTOvth8HOgN/s800/ThighHeels.png') repeat Top center";
document.body.style.backgroundAttachment="fixed";
document.body.style.backgroundColor="black";
//<![CDATA[
$(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
);
}
scrollbackground();
});
//]]>
</script>

Animasi Dari Atas ke Bawah

<script language="javascript">
document.body.style.background="#f3f3f3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHkUDz6L-cIopwTGT2b8LCPX9qmfjKk86sJ37g9Q6qCqe0sr0uUcffMh9XKS6SvJ3lGJSdTxfqv_6PrCxb-f1lS57xqeQBx7MczkP_qa-E3Al-89th-sqxR8Kp032jwi8ewLTOvth8HOgN/s800/ThighHeels.png') repeat Top center";
document.body.style.backgroundAttachment="fixed";
document.body.style.backgroundColor="black";
//<![CDATA[
$(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
);
}
scrollbackground();
});
//]]>
</script>

Animasi Dari Kiri ke Kanan

<script language="javascript">
document.body.style.background="#f3f3f3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHkUDz6L-cIopwTGT2b8LCPX9qmfjKk86sJ37g9Q6qCqe0sr0uUcffMh9XKS6SvJ3lGJSdTxfqv_6PrCxb-f1lS57xqeQBx7MczkP_qa-E3Al-89th-sqxR8Kp032jwi8ewLTOvth8HOgN/s800/ThighHeels.png') repeat Top center";
document.body.style.backgroundAttachment="fixed";
document.body.style.backgroundColor="black";
//<![CDATA[
$(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", offset + "px" + " 50% ");
setTimeout(function() {
scrollbackground();
}, 70
);
}
scrollbackground();
});
//]]>
</script>

Animasi Dari Kanan ke Kiri

<script language="javascript">
document.body.style.background="#f3f3f3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHkUDz6L-cIopwTGT2b8LCPX9qmfjKk86sJ37g9Q6qCqe0sr0uUcffMh9XKS6SvJ3lGJSdTxfqv_6PrCxb-f1lS57xqeQBx7MczkP_qa-E3Al-89th-sqxR8Kp032jwi8ewLTOvth8HOgN/s800/ThighHeels.png') repeat Top center";
document.body.style.backgroundAttachment="fixed";
document.body.style.backgroundColor="black";
//<![CDATA[
$(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 < 1) ? offset + (backgroundheight - 1) : offset - 1;
$('body').css("background-position", offset + "px" + " 50% ");
setTimeout(function() {
scrollbackground();
}, 70
);
}
scrollbackground();
});
//]]>
</script>

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MQMSmZmBwv-tWkW-zhul_flxag_N6UqAppIabjkwaBNEVgdN-k9FM9ZpdUzHQPWUk-vXTptahnW4Gr-tnDt3m2HDKDu24P-Sdp5emuBQJMI9F3om1ULBJC1p0RRFwc12n2na0tjFZDwW/s800/bg.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicVY4mg4upty5joo0Y_uAn-YVdZlhZiovpTGpn2XqSSR6pKclScne18B1LSlT5n5Yc_60p7gImJavTGUuJKa0iU9oVr6NcJFYUNO1qjgd18XzwsiH9hh7EWnvM5sHwSbQtIucbCinfhxkV/s800/bg_star.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6hLIYnrda6o-SK7F8YhKwVqcClp6DPOPS4kPD4Iu4zr0h2egJffQDZJrgWyTN_E4W4v1TTzKmiBGtMMP_Va5jRfVJOSoEU_OhGOtLC432ijZpfCMKLLczCwvmGzgif9NanYFUIrvNpKgi/s800/bg-clouds.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSU2ugM03Dq0IoAAdte5yCfqIbQ0DVsbBQuSkKyGxN-l8NF6w4nmAozPrkYNWyLhlpVa3WFbZvDiHi1nHkW7M_cqzEi9ZeMcSPL0okjjL-pw72RjKjbe6kgHl9Z0g9vTWs03rv0h_qrWJb/s800/skull-fire-monozcore.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd_x7Ixu7M-0a5yYORybAF5BzJnHgz6RJYSpwX9Rd4aQyQqwNf3P2UdXCjvk-4CO7Sb4iY5-5q9Dn-R3dX6BR9ClHAHAiNp-AZf59qCCluOXuAVYxHvd5TPV3dUOKCmOu6De7QwS5HbhjM/s800/dance_flow.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHkUDz6L-cIopwTGT2b8LCPX9qmfjKk86sJ37g9Q6qCqe0sr0uUcffMh9XKS6SvJ3lGJSdTxfqv_6PrCxb-f1lS57xqeQBx7MczkP_qa-E3Al-89th-sqxR8Kp032jwi8ewLTOvth8HOgN/s800/ThighHeels.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU5cq-75RqUhPBLetWnSJwEgkY4XozgHo4pIN7p5UWSkqUrED7owNKsyozDDmySscVgkqm3pFJ-ExYwTVmrvkoeCIS2hZk62-OmnM5Wt1zsgh2z_Ao7cfWezpkVnqFsqFeHxJDLQj1owNM/s800/animated%2520stars.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0LuwyyavR74wepCOY010dtSzgRgzZNXYT2nmv3iVpNMRrd81HvJbHLwA9FQkJcZMaK_7PvBvGCeG_tDJEC0zeAc4bTUGvYegbb9cxBnOpIY4DM2J87eKKUXKaJ1VCpg8Vw1TBkA4xvJg3/s800/animated%2520blue%2520stars.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR54aXysMJHpzs88PLgTrNkzgupHsKm6HkWGRFqIkdQl8RHvWa_voDdoTxIReyap6c7Vc0Ob1B_7cbrjFDBxgc-MK3pUQ2nRExT7tTh3ABS2BNG3dHQYSph3n3dgsjYsxpZBE_XfLIcHe0/s800/devil_angel_lolita_bg.png

.:Selamat Mencoba:.

No comments :

Emoticon

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( :-q =))

Monday, 19 January 2015

Cara membuat bagroound Bergerak di Blogger

Penulis: arfan

No comments :

Emoticon

Post a Comment

Visitor

Total layangan laman

Translate

About Me