Peluang Usaha

Buat Animasi Kursor 'Bintang Jatuh' di Blog

Bismillahirrahmanirrahim

Bertabur Bintang
MULTI PASTE - Salah satu trik untuk mepercantik blog agar lebih kelihatan menarik dan unik adalah menampilkan animasi kursor pada blog.  Salah satu bentuk animasi kursor yang sering diterapkan oleh para bloger adalah animasi kursor bintang jatuh, animasi ini akan menampilkan bintang yang jatuh bertaburan pada saat pengunjung blog menggerakkan mousenya.

Untuk menerapkan animasi bintang jatuh di blog, cukup mudah, copy kode di bawah ini lalu insert gadget type HTML ke dalam layout blog Anda kemudian tekan tombol Save, atau Anda bisa melihat artikel Cara Menambahkan Gadget di Blog, maka kursor pengunjung blog Anda akan segera bertaburan bintang-bintang.



Detail langkah-langkahnya seperti di bawah ini :
  • Login ke blogger dengan ID Anda
  • Pada halaman Dashboard klik link Nama Blog Anda
  • Klik menu Layout >> Add a Gadget, pilih type gadget HTML/Javascript
  • Copy script di bawah ini dan paste pada kotak Content, tidak perlu diberi Title  
  • <script type='text/javascript'>
    // <![CDATA[
    var colour="#52D8ED";
    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>
  • Untuk menyesuaikan dengan tampilan blog Anda, silahkan ganti kede warna (tulisan berwarna merah) dengan warna yang anda inginkan, gunakan HEX Color Generator Tool yang terdapat pada side bar blog ini untuk mengetahui kode warna.
  • Jangan lupa untuk menekan tombol Save untuk menyimpan gadget
  • Periksa halaman blog Anda dan ucapkan Alhamdulillah, sekarang blog Anda sudah bertaburan bintang.

9 comments:

  1. terima kasih , sangat membantu , kLau boleh minta izin utk saya re-post di blog saya

    Thanks ,

    ReplyDelete
  2. @just aLveen.. silahkan re-post bro..! bahagia rasanya bila bisa saling berbagi..

    ReplyDelete
  3. hoooaaaa sip sip .... macaci macaci

    ReplyDelete
  4. wah...keren mas bro
    makasih
    makasih
    god bless you

    ReplyDelete
  5. hhhmmm Saya Sengaja Mampir doank tpi saya rasa ini work ttp tdk semua blog bisa blog Tpi Saya Mw Mencoba


    Berhasil Biasanya Code Ini Tidak Berhasil di blog saya


    Tolong ya Kunjungi Blog Ku :D PLizzz

    ReplyDelete
  6. terima kasih sdh Saya pakai di blog Saya www.labrtpa.blogspot.com.

    ReplyDelete
Konversi Kode di Sini Top Komentator

* Jangan Menempelkan Link Hidup, karena tidak akan ditampilkan
* Untuk Menyisipkan tag <code>, gunakan tag <i rel="code"> ...Isi Kode... </i>
* Untuk Menyisipkan tag <pre> atau kode panjang, gunakan tag <i rel="pre"> ...Isi Kode... </i>
* Untuk Menyisipkan Catatan, gunakan <b rel="quote"> ...Isi Teks... </b>
* Untuk Menyisipkan Gambar, gunakan <i rel="image"> ...URL Gambar... </i>
* Untuk Memasukkan video YouTube, gunakan <i rel="youtube"> ...URL Youtube... </i>

NB: Sebelum menyisipkan kode silahkan gunakan tool konversi kode yang terdapat pada bagian atas kolom Note ini untuk menampilkan kode tersebut pada elemen komentar