Cara Mengganti Background Di Blog - Tutorial Mengganti Background Di Blog Di Blogspot,Tips mengganti background blog, Mengganti Background Blog Dengan Gambar Animasi, Baca Juga Disini Untuk Tutorial Cara Mengganti Background Blog Secara Otomatis.
Kayaknya agak jadul juga sih judul yang saya share ini.soalnya rata-rata para blogger pasti sudah tau Bagaimana Cara Mengganti Background Di Blog.Tapi nggak ada salahnya saya share,siapa tau masih ada pengguna blog yang belum tau Cara Mengganti Background Di Blog
Berikut Tips Cara Mengganti Background Di Blog :
Click “Tata Letak”
Click “Edit HTML”
Kemudian cari code ini:
body {
background:url(almat url tempat gambar kamu di simpan)
Letakkan code ini setelah code di atas:
url(almat url tempat gambar kamu di simpan)
Simpan
Sobat bisa mengganti background blog kamu sesuka hati. Bisa gambar jenis jpg, png, atau gif. Tentunya akan terlihat setelah loadingnya selesai. Nah.. biar loadingnya cepet, ukuran gambarnya yang kecil saja.
nah itulah sedikit ulasan dari blog ini tentang Cara Mengganti Background Di Blog.
semoga ada hikmahnya.salam hangat dan sahabat selalu dari saya.Ageboy Blogs
Showing posts with label Background Blog. Show all posts
Showing posts with label Background Blog. Show all posts
Tuesday, January 10, 2012
Tuesday, January 3, 2012
Cara Merubah Warna Background Blog Dengan Klik
Tutorial Merubah Warna Background Blog Dengan Klik - Cara Merubah Warna Blog Otomatis Dengan Klik - Background Blog Berubah-ubah warna secara random - Warna warni background blog.
Berhubung udah nanggung kayaknya saya share seputar background di blog. Setelah Kemarin saya posting tentang Cara Membuat Background Blog Tidak Bergerak Saat Di Scroll. Jadi saya share lagi ajalah sekalian biar lengkap secara random background pada blog.
Masih seputar tips mempercantik background blog. kali ini saya akan memberikan tips merubah warna background blog apabila di klik.untuk contohnya bisa sobat klik warna dibawah ini :
Untuk tutorial cara merubah warna background blog dengan klik sangatlah mudah.
mula mula login ke akun Blogger sobat.
Pergi ke Dasbor >> Rancangan >>Tambah element Html/Javascript
Masukkan code di bawah ini :
Simpan dan lihat hasilnya.
Mungkin itu saja tips singkat dari saya Cara Merubah Warna Background Blog Dengan Klik .
Semoga bisa bermanfaat dan selamat mencoba.Mohon maaf bila masih banyak kekurangan dari saya.
Salam hangat dan sahabat selalu dari saya.Ageboy Blogs
Berhubung udah nanggung kayaknya saya share seputar background di blog. Setelah Kemarin saya posting tentang Cara Membuat Background Blog Tidak Bergerak Saat Di Scroll. Jadi saya share lagi ajalah sekalian biar lengkap secara random background pada blog.
Masih seputar tips mempercantik background blog. kali ini saya akan memberikan tips merubah warna background blog apabila di klik.untuk contohnya bisa sobat klik warna dibawah ini :
Untuk tutorial cara merubah warna background blog dengan klik sangatlah mudah.
mula mula login ke akun Blogger sobat.
Pergi ke Dasbor >> Rancangan >>Tambah element Html/Javascript
Masukkan code di bawah ini :
<script type="text/javascript">function bgChange(bg){document.body.style.background=bg;}</script><br />
<table width="100%"><tr> <td onclick="bgChange('black')" bgcolor="black"> </td> <td onclick="bgChange('#6633FF')" bgcolor="#6633FF"> </td> <td onclick="bgChange('#FF3366')" bgcolor="#FF3366"> </td> <td onclick="bgChange('#CAFF7A')" bgcolor="#CAFF7A"> </td> <td onclick="bgChange('#fff')" bgcolor="#fff"> </td> <td onclick="bgChange('#0f0')" bgcolor="#0f0"> </td> <td onclick="bgChange('#003333')" bgcolor="#003333"> </td> <td onclick="bgChange('#515151')" bgcolor="#515151"> </td> <td onclick="bgChange('#331A00')" bgcolor="#331A00"> </td> </tr>
</table>
<table width="100%"><tr> <td onclick="bgChange('black')" bgcolor="black"> </td> <td onclick="bgChange('#6633FF')" bgcolor="#6633FF"> </td> <td onclick="bgChange('#FF3366')" bgcolor="#FF3366"> </td> <td onclick="bgChange('#CAFF7A')" bgcolor="#CAFF7A"> </td> <td onclick="bgChange('#fff')" bgcolor="#fff"> </td> <td onclick="bgChange('#0f0')" bgcolor="#0f0"> </td> <td onclick="bgChange('#003333')" bgcolor="#003333"> </td> <td onclick="bgChange('#515151')" bgcolor="#515151"> </td> <td onclick="bgChange('#331A00')" bgcolor="#331A00"> </td> </tr>
</table>
Simpan dan lihat hasilnya.
Mungkin itu saja tips singkat dari saya Cara Merubah Warna Background Blog Dengan Klik .
Semoga bisa bermanfaat dan selamat mencoba.Mohon maaf bila masih banyak kekurangan dari saya.
Salam hangat dan sahabat selalu dari saya.Ageboy Blogs
Sunday, January 1, 2012
Cara Membuat Background Blog Tidak Bergerak Saat Di Scroll
Tutorial Cara Membuat Background Blog Tidak Bergerak - Cara Membuat Posisi wallpaper Background blog tidak bergerak saat di scroll atau posisi background Blog tetap pada tempatnya.
Solusi pada background blog di blogspot yang selalu bergerak mengikuti scroll?
Berikut Tips cara agar background blog tidak bergerak :
Untuk caranya mula mula login ke akun Blogger sobat.
Pergi ke Dasbor >> Rancangan >> Edit Html.
Sekarang kira-kira cari kode seperti ini :
Lalu tambahkan kode background-attachment: fixed; Setelah kode Background.
maka akan menjadi seperti ini :
Sekarang tinggal disave dan lihat hasilnya.
Nah sekian tips singkat dari saya Cara Membuat Background Blog Tidak Bergerak Saat Di Scroll. semoga bisa bermanfaat.
Salam hangat dan sahabat selalu dari saya.Ageboy
Solusi pada background blog di blogspot yang selalu bergerak mengikuti scroll?
Berikut Tips cara agar background blog tidak bergerak :
Untuk caranya mula mula login ke akun Blogger sobat.
Pergi ke Dasbor >> Rancangan >> Edit Html.
Sekarang kira-kira cari kode seperti ini :
body {
text-align: center;
background: #ffffff url(http://url gambar anda);
Comic Sans MS,arial,trebuchet ms,verdana,sans-serif;
}
text-align: center;
background: #ffffff url(http://url gambar anda);
Comic Sans MS,arial,trebuchet ms,verdana,sans-serif;
}
Lalu tambahkan kode background-attachment: fixed; Setelah kode Background.
maka akan menjadi seperti ini :
body {
text-align: center;
background: #ffffff url(http://url gambar anda);
background-attachment: fixed;
Comic Sans MS,arial,trebuchet ms,verdana,sans-serif;
}
text-align: center;
background: #ffffff url(http://url gambar anda);
background-attachment: fixed;
Comic Sans MS,arial,trebuchet ms,verdana,sans-serif;
}
Nah sekian tips singkat dari saya Cara Membuat Background Blog Tidak Bergerak Saat Di Scroll. semoga bisa bermanfaat.
Salam hangat dan sahabat selalu dari saya.Ageboy
Wednesday, December 28, 2011
Cara Membuat Background Posting Berbeda Dengan Homepage
Tutorial Cara Membuat Background Posting Pada Blog Berbeda Dengan Homepage - Cara Membuat Warna Background Blog Posting Berbeda Warna dengan halaman utama, Tampilan Warna Posting Blog Berbeda warna.
Assalamualaikum wr.wb
Setelah kemarin saya memberikan tips :
Cara Membuat Warna Background Bergerak Pada Blog
Cara Membuat Background Blog Warna-Warni Saat Di Refresh
Cara Merubah Huruf Menjadi Warna-Warni Secara Otomatis
Maka sesuai dengan judul posting saya hari ini.Saya akan memberikan sedikit tips singkat,mudah dan simpel tentang cara membuat background posting blog berbeda warna dengan homepage.
Untuk caranya mula mula login ke akun Blogger sobat.
Pergi ke Dasbor >> Rancangan >> Edit Html >> Centang tanda expand widget template.
nah setelah selesai kemudian cari code </head>
kemudian letakkan code di bawah ini sebelum code </head> tersebut untuk mengganti warna background posting :
Tulisan warna pink diatas adalah kode warna backround yang akan diterapkan pada halaman posting.bisa sobat sesuaikan sesuai selera anda masing-masing.
Untuk Melihat kode warna pada Html bisa sobat lihat >> Disini
untuk mengganti warna backrgound tersebut dengan background gambar sobat tinggal ganti kode warnanya dengan link gambar.
berikut contoh kode lengkapnya :
Warna tulisan pink diatas adalah gambar background posting sobat.itupun bisa sobat ganti juga sesuai selera sobat masing-masing.
nah cukup sekian tutorial Cara Membuat Background Posting Berbeda Dengan Homepage dari saya.
Semoga bisa bermanfaat dan selamat mencoba.
Salam hangat dan sahabat selalu dari saya.Ageboy
Assalamualaikum wr.wb
Setelah kemarin saya memberikan tips :
Cara Membuat Warna Background Bergerak Pada Blog
Cara Membuat Background Blog Warna-Warni Saat Di Refresh
Cara Merubah Huruf Menjadi Warna-Warni Secara Otomatis
Maka sesuai dengan judul posting saya hari ini.Saya akan memberikan sedikit tips singkat,mudah dan simpel tentang cara membuat background posting blog berbeda warna dengan homepage.
Untuk caranya mula mula login ke akun Blogger sobat.
Pergi ke Dasbor >> Rancangan >> Edit Html >> Centang tanda expand widget template.
nah setelah selesai kemudian cari code </head>
kemudian letakkan code di bawah ini sebelum code </head> tersebut untuk mengganti warna background posting :
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
body {
background:#3366ff;
}
</style>
</b:if>
<style type='text/css'>
body {
background:#3366ff;
}
</style>
</b:if>
Untuk Melihat kode warna pada Html bisa sobat lihat >> Disini
untuk mengganti warna backrgound tersebut dengan background gambar sobat tinggal ganti kode warnanya dengan link gambar.
berikut contoh kode lengkapnya :
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
body {
background:url(http://1.bp.blogspot.com/-7PgdHC-Ox9c/TpF3AsVPn9I/AAAAAAAAAfM/HPbODLCPaLg/s220/httpi.imgur.com4qT7j.gif.gif);
}
</style>
</b:if>
<style type='text/css'>
body {
background:url(http://1.bp.blogspot.com/-7PgdHC-Ox9c/TpF3AsVPn9I/AAAAAAAAAfM/HPbODLCPaLg/s220/httpi.imgur.com4qT7j.gif.gif);
}
</style>
</b:if>
nah cukup sekian tutorial Cara Membuat Background Posting Berbeda Dengan Homepage dari saya.
Semoga bisa bermanfaat dan selamat mencoba.
Salam hangat dan sahabat selalu dari saya.Ageboy
Sunday, December 25, 2011
Cara Membuat Background Blog Warna-Warni Saat Di Refresh
Tutorial Cara Membuat Background Warna Warni - Cara Membuat Warna Blog Berbeda-beda, Membuat Background Pada Blog Berubah Warna Saat Di refresh.Tampilan Blog Berubah-ubah Warna...!!! pokoknya gitu deh,semua tentang Background Warna Pada Blog.wkwkwk
Lanjutan dari postingan saya sebelumnya tentang Cara Merubah Huruf Menjadi Warna-Warni Secara Otomatis Dan Cara Membuat Warna Background Bergerak Pada Blog yang belum baca itu monggo dilihat.Siapa tau naksir...:)
Sekarang saya akan memberikan tips singkat Cara Membuat Bacground Blog Warna-Warni Saat Direfresh
Untuk contoh Bacground Blog Warna-Warni Saat Direfresh bisa sobat lihat disini .Coba sobat refresh blog tersebut.setiap kali sobat refresh maka background blog tersebut akan berubah warna.
Bagaimana?,Anda tertarik merubah-rubah warna Background...?
Bila sobat tertarik dan ingin mencoba.cara ini juga tidak memerlukan edit template, jadi tinggal copy code nya dan tambahkan pada element Html/javascript blog sobat..
Berikut Kodenya
Lanjutan dari postingan saya sebelumnya tentang Cara Merubah Huruf Menjadi Warna-Warni Secara Otomatis Dan Cara Membuat Warna Background Bergerak Pada Blog yang belum baca itu monggo dilihat.Siapa tau naksir...:)
Sekarang saya akan memberikan tips singkat Cara Membuat Bacground Blog Warna-Warni Saat Direfresh
Untuk contoh Bacground Blog Warna-Warni Saat Direfresh bisa sobat lihat disini .Coba sobat refresh blog tersebut.setiap kali sobat refresh maka background blog tersebut akan berubah warna.
Bagaimana?,Anda tertarik merubah-rubah warna Background...?
Bila sobat tertarik dan ingin mencoba.cara ini juga tidak memerlukan edit template, jadi tinggal copy code nya dan tambahkan pada element Html/javascript blog sobat..
Berikut Kodenya
<script type='text/javascript'>
//CDATA[
/* JavaScript Kit (http://ageboy.blogspot.com/)*/
//Created Ageboy:
var bgcolorlist=new Array("#FFFFFF", "#B30000", "#EEFF00", "#11FF00", "#FF8A14", "#0008FF", "#4AFFF3", "#000")
document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
//]]>
</script>
Simpan dan Selesai.
Sekarang coba lihat blog anda dan refresh.taraaa...jadi deh.kwkwkwk
Nah Cukup Sekian Tutorial singkat dari saya sobat Cara Membuat Bacground Blog Warna-Warni,semoga bisa bermanfaat.Selamat mencoba sobat.: )
Salam hangat dan sahabat selalu dari saya.Ageboy
Nah Cukup Sekian Tutorial singkat dari saya sobat Cara Membuat Bacground Blog Warna-Warni,semoga bisa bermanfaat.Selamat mencoba sobat.: )
Salam hangat dan sahabat selalu dari saya.Ageboy
Saturday, December 17, 2011
Cara Membuat Warna Background Bergerak Pada Blog
Cara Membuat Warna Background Bergerak - Tutorial cara buat efek warna backgroud menarik.
Gimana sih Cara Membuat Background Bergerak Pada Blog?
Oke sobat kali ini Blog saya akan memberikan Tips dan Trick tentang Cara Membuat Warna Background Bergerak Pada Blog(mirip-mirip seperti animasi gambar gif gitu)
Untuk contoh Background Bergeraknya bisa sobat lihat disini
Bagaimana,menarik bukan..:)
Bila sobat tertarik dan ingin mencoba.cara ini juga tidak memerlukan edit template, jadi tinggal copy code nya dan tambahkan pada element Html/javascript blog sobat..
Berikut Kodenya :
Save dan Selesai.
Nah Cukup Sekian Tutorial singkat dari saya sobat Cara Membuat Warna Background Bergerak Pada Blog,semoga bisa bermanfaat.Selamat mencoba sobat.: )
Salam hangat dan sahabat selalu dari saya.Ageboy
Gimana sih Cara Membuat Background Bergerak Pada Blog?
Oke sobat kali ini Blog saya akan memberikan Tips dan Trick tentang Cara Membuat Warna Background Bergerak Pada Blog(mirip-mirip seperti animasi gambar gif gitu)
Untuk contoh Background Bergeraknya bisa sobat lihat disini
Bagaimana,menarik bukan..:)
Bila sobat tertarik dan ingin mencoba.cara ini juga tidak memerlukan edit template, jadi tinggal copy code nya dan tambahkan pada element Html/javascript blog sobat..
Berikut Kodenya :
<script type="text/javascript">
// <![CDATA[
var border=50; // how wide is each border
var effects=3; // how many of the effect are on the page
var speed=50; // how fast is the animation (lower is faster)
var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
// above line lists colours for the groovy effect (can be as long or short as you like)
var swide, shigh;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
var i, d, s, b;
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.overflow="hidden";
s.zIndex="-1";
b.setAttribute("id", "bod");
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.appendChild(b);
set_width();
set_scroll();
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.width="100%";
h[i]=Math.floor(Math.random()*shigh/2.5);
h[i+1]=Math.floor(Math.random()*shigh/2.5);
h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.top=h[i]+"px";
s.bottom=h[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth=border+"px 0px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
h[i+5]=s;
b.appendChild(d);
}
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.height="100%";
v[i]=Math.floor(Math.random()*swide/2.5);
v[i+1]=Math.floor(Math.random()*swide/2.5);
v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.left=v[i]+"px";
s.right=v[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth="0px "+border+"px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
v[i+5]=s;
b.appendChild(d);
}
groovy();
}}
var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}
function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}
function groovy() {
setTimeout("groovy()", speed);
var i;
for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
h[i+4]=h[i+2];
h[i+2]=-h[i+3];
h[i+3]=-h[i+4];
h[i+5].backgroundColor=jazz();
}
if (h[i]<-border && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
h[i+3]=scat(h[i+2]);
if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
}
for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
v[i+4]=v[i+2];
v[i+2]=-v[i+3];
v[i+3]=-v[i+4];
v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
v[i+3]=scat(v[i+2]);
if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-18;
shigh=self.innerHeight-18;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
var s=document.getElementById("bod").style;
s.width=swide+"px";
s.height=shigh+"px";
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script><script type="text/javascript">
// <![CDATA[
var border=50; // how wide is each border
var effects=3; // how many of the effect are on the page
var speed=50; // how fast is the animation (lower is faster)
var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
// above line lists colours for the groovy effect (can be as long or short as you like)
var swide, shigh;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
var i, d, s, b;
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.overflow="hidden";
s.zIndex="-1";
b.setAttribute("id", "bod");
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.appendChild(b);
set_width();
set_scroll();
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.width="100%";
h[i]=Math.floor(Math.random()*shigh/2.5);
h[i+1]=Math.floor(Math.random()*shigh/2.5);
h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.top=h[i]+"px";
s.bottom=h[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth=border+"px 0px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
h[i+5]=s;
b.appendChild(d);
}
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.height="100%";
v[i]=Math.floor(Math.random()*swide/2.5);
v[i+1]=Math.floor(Math.random()*swide/2.5);
v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.left=v[i]+"px";
s.right=v[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth="0px "+border+"px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
v[i+5]=s;
b.appendChild(d);
}
groovy();
}}
var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}
function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}
function groovy() {
setTimeout("groovy()", speed);
var i;
for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
h[i+4]=h[i+2];
h[i+2]=-h[i+3];
h[i+3]=-h[i+4];
h[i+5].backgroundColor=jazz();
}
if (h[i]<-border && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
h[i+3]=scat(h[i+2]);
if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
}
for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
v[i+4]=v[i+2];
v[i+2]=-v[i+3];
v[i+3]=-v[i+4];
v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
v[i+3]=scat(v[i+2]);
if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-18;
shigh=self.innerHeight-18;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
var s=document.getElementById("bod").style;
s.width=swide+"px";
s.height=shigh+"px";
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>
// <![CDATA[
var border=50; // how wide is each border
var effects=3; // how many of the effect are on the page
var speed=50; // how fast is the animation (lower is faster)
var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
// above line lists colours for the groovy effect (can be as long or short as you like)
var swide, shigh;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
var i, d, s, b;
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.overflow="hidden";
s.zIndex="-1";
b.setAttribute("id", "bod");
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.appendChild(b);
set_width();
set_scroll();
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.width="100%";
h[i]=Math.floor(Math.random()*shigh/2.5);
h[i+1]=Math.floor(Math.random()*shigh/2.5);
h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.top=h[i]+"px";
s.bottom=h[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth=border+"px 0px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
h[i+5]=s;
b.appendChild(d);
}
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.height="100%";
v[i]=Math.floor(Math.random()*swide/2.5);
v[i+1]=Math.floor(Math.random()*swide/2.5);
v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.left=v[i]+"px";
s.right=v[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth="0px "+border+"px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
v[i+5]=s;
b.appendChild(d);
}
groovy();
}}
var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}
function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}
function groovy() {
setTimeout("groovy()", speed);
var i;
for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
h[i+4]=h[i+2];
h[i+2]=-h[i+3];
h[i+3]=-h[i+4];
h[i+5].backgroundColor=jazz();
}
if (h[i]<-border && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
h[i+3]=scat(h[i+2]);
if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
}
for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
v[i+4]=v[i+2];
v[i+2]=-v[i+3];
v[i+3]=-v[i+4];
v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
v[i+3]=scat(v[i+2]);
if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-18;
shigh=self.innerHeight-18;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
var s=document.getElementById("bod").style;
s.width=swide+"px";
s.height=shigh+"px";
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script><script type="text/javascript">
// <![CDATA[
var border=50; // how wide is each border
var effects=3; // how many of the effect are on the page
var speed=50; // how fast is the animation (lower is faster)
var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
// above line lists colours for the groovy effect (can be as long or short as you like)
var swide, shigh;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
var i, d, s, b;
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.overflow="hidden";
s.zIndex="-1";
b.setAttribute("id", "bod");
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.appendChild(b);
set_width();
set_scroll();
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.width="100%";
h[i]=Math.floor(Math.random()*shigh/2.5);
h[i+1]=Math.floor(Math.random()*shigh/2.5);
h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.top=h[i]+"px";
s.bottom=h[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth=border+"px 0px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
h[i+5]=s;
b.appendChild(d);
}
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.height="100%";
v[i]=Math.floor(Math.random()*swide/2.5);
v[i+1]=Math.floor(Math.random()*swide/2.5);
v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.left=v[i]+"px";
s.right=v[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth="0px "+border+"px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
v[i+5]=s;
b.appendChild(d);
}
groovy();
}}
var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}
function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}
function groovy() {
setTimeout("groovy()", speed);
var i;
for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
h[i+4]=h[i+2];
h[i+2]=-h[i+3];
h[i+3]=-h[i+4];
h[i+5].backgroundColor=jazz();
}
if (h[i]<-border && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
h[i+3]=scat(h[i+2]);
if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
}
for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
v[i+4]=v[i+2];
v[i+2]=-v[i+3];
v[i+3]=-v[i+4];
v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
v[i+3]=scat(v[i+2]);
if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-18;
shigh=self.innerHeight-18;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
var s=document.getElementById("bod").style;
s.width=swide+"px";
s.height=shigh+"px";
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>
Save dan Selesai.
Nah Cukup Sekian Tutorial singkat dari saya sobat Cara Membuat Warna Background Bergerak Pada Blog,semoga bisa bermanfaat.Selamat mencoba sobat.: )
Salam hangat dan sahabat selalu dari saya.Ageboy
Subscribe to:
Posts (Atom)