Cara Membuat Efek Bintang Bertaburan Berjatuhan Di Cursor Blog

Cara Membuat Efek Bintang Bertaburan Berjatuhan Di Cursor Blog - Tutorial kali ini tentang menghias blog yaitu Cara Mudah Membuat Efek Cursor Bintang Bertaburan Di Blog.

Banyak sekali para Blogger yang menggunakan tutorial ini. Sangat pasti, ketika sobat berkunjung dan browsing di suatu blog ataupun web, pernah melihat kursor nya teradapat bintang-bintang berjatuhan. Yakan? Pastinya itu.

Saya sangat sering melihat sebuah blog yang di beri efek bintang bertaburan pada kursor di blog tersebut. Tentunya, tujuannya yaitu untuk menghias blog saja. Unik aja gitu. Biar mata kita agak enakan melihat bintang-bintang berjatuhan.

Tapi, buat sobat yang kemungkinan belum mengerti dan paham tutorial Cara Membuat Efek Bintang Jatuh Pada Kursor Blog, sobat bisa lihat gambar animasi berikut ini:

Sebagai pelengkap, saya kasih demo nya juga untuk tutorial ini.

Demo
Klik disini

Tak hanya bintang berjatuhan dan bertaburan pada kursor atau pointer, pastinya sobat pernah melihat sebuah blog yang di beri daun berguguran di blog tersebut.

Buat sobat yang ingin nyoba tutorial ini, silahkan... Bagus kok, buat blognya sobat. (Baca juga: Cara Memberi Efek Gelembung Di Pointer/Cursor Mouse Pada Blog)

Sebelum saya jelaskan, disini saya mempunyai 2 cara untuk memberi efek taburan bintang di cursor blog. 2 cara tersebut menggunakan edit HTML dan HTML/JavaScript. Sebelum sobat menggunakan salah satu diantara 2 cara tersebut, sobat memilih terlebih dahulu warna efek taburan bintang yang sudah tersedia dibawah ini.

Efek bintang berjatuhan berwarna kuning:

<script src=' http://wadah-tutorial.googlecode.­com/files /bintangkuning.js' type='text/­javascript'/> 

Efek bintang berjatuhan berwarna biru:

<script src=' http://wadah-tutorial.googlecode.­com/files /bintangbiru.js' type='text/­javascript'/>

Efek bintang berjatuhan berwarna oren:

<script src=' http://wadah-tutorial.googlecode.­com/files /bintangoren.js' type='text/­javascript'/>

Efek bintang berjatuhan berwarna pink:

<script src=' http://wadah-tutorial.googlecode.­com/files /bintangpink.js' type='text/­javascript'/>

Berikut langkah-langkah cara membuat efek taburan bintang di cursor blog

Cara 1:

1. Login Blogger
2. Tata letak/layout
3. Add gadget/tambahkan gadget
4. Pilih HTML/JavaScript
5. Copy kode efek taburan bintang yang sudah sobat pilih diatas
6. Simpan

Seperti cara yang pertama, sobat harus memilih dulu kode efek bintang bertaburan.

Cara 2:

1. Login Blogger
2. Template/rancangan
3. Edit HTML
4. Cari kode

</body>

(agar mempermudah pencarian, klik kolom edit HTML, kemudian tekan Ctrl+F)
5. Setelah ketemu, copy kode efek taburan bintang yang sudah di pilih tadi, kemudian paste kan tepat DIATAS kode </body>
6. Save template

Cara 3:

Untuk cara 3, sama saja hasilnya dengan yang diatas. Tetapi, bedanya hanya di script. Kalo untuk cara 3, saya akan beri script lengkap. Kalau cara 1 dan cara 2 script nya disimpan, jadi script nya terlihat sedikit. Jika sobat pilih yang cara 3, sobat dapat mengganti warna nya sesuka hati, bukan warna dasar saja seperti cara 1 dan cara 2.

1. Login Blogger
2. Tata letak/layout
3. Add gadget/tambahkan gadget
4. Pilih HTML/JavaScript
5. Copy kode dibawah ini kemudian paste dan letakkan kode nya pada kolom HTML/JavaScript

<script type='text/javascript'>
// <![CDATA[
var colour="#8B008B";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
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;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
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;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

*Keterangan: ganti kode #8B008B dengan kode warna kesukaan sobat. Sobat bisa lihat kode warna di Kode Warna HTML.

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Efek Bintang Bertaburan Berjatuhan Di Cursor Blog
Deskripsi	Cara mudah membuat efek bintang bertaburan berjatuhan di cursor blog yang dapat membuat blog Anda terlihat lebih cantik dengan adanya bintang berjatuhan di cursor blog
Author	Google
Author Rating	89%/ 100% Suara Dari 198 votes