Guest Book UT24-WEB.INFO Silahkan Tinggalkan Jejak Disini, Tapi Ingat Jagalah Kesopanan...!!
.:: Happy Blogging ::.

Cara Membuat Efek Gelembung Pada Cursor Blog


Cara Membuat Efek Gelembung Pada Cursor Blog - Kali ini ane akan Share Tutorial blog tntang Cara Membuat Efek Gelembung Pada Cursor Blog, dengan mengunakan Script yang ane sediakan di bawah nanti, Cursor blog agan akan mengeluarkan gelembung - gelmebung atau bisa juga dikatakan bubble.


Sebelum ane share caranya, Ane ingin menegaskan bahwa Efek ini hanya salah satu cara untuk mempercantik atau menghias blog agan, dan sifatnya tidak wajib, karena mingkin saja efek ini bisa memperberat loading blog agan, klw ane berakata" truss kpn selesainya :D heheheh !. Ok langsung saja Cara Membuat Efek Gelembung Pada Cursor Blog :

ini Scriptnya :

<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
    // <![CDATA[
    var colours=new Array("#cc0000", "#cc0000", "#cc0000", "#cc0000", "#cc0000"); // colours for top, right, bottom and left borders and background of bubbles
    var bubbles=100; // maximum number of bubbles on screen

    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var bubb=new Array();
    var bubbx=new Array();
    var bubby=new Array();
    var bubbs=new Array();

    window.onload=function() { if (document.getElementById) {
    var rats, div;
    for (var i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
    rats.style.visibility="hidden";

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="1px";
    div.left="0px";
    div.bottom="1px";
    div.right="0px";
    div.borderLeft="1px solid "+colours[3];
    div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="0px";
    div.left="1px";
    div.right="1px";
    div.bottom="0px"
    div.borderTop="1px solid "+colours[0];
    div.borderBottom="1px solid "+colours[2];

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.left="1px";
    div.right="1px";
    div.bottom="1px";
    div.top="1px";
    div.backgroundColor=colours[4];
    div.opacity=0.5;
    if (document.all) div.filter="alpha(opacity=50)";

    document.body.appendChild(rats);
    bubb[i]=rats.style;
    }
    set_scroll();
    set_width();
    bubble();
    }}


    function bubble() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<bubbles; c++) if (!bubby[c]) {
    bubb[c].left=(bubbx[c]=x)+"px";
    bubb[c].top=(bubby[c]=y)+"px";
    bubb[c].width="3px";
    bubb[c].height="3px"
    bubb[c].visibility="visible";
    bubbs[c]=3;
    break;
    }
    }
    for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
    setTimeout("bubble()", 40);
    }

    function update_bubb(i) {
    if (bubby[i]) {
    bubby[i]-=bubbs[i]/2+i%2;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>sdown && bubbx[i]>0) {
    if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
    bubb[i].width=bubbs[i]+"px";
    bubb[i].height=bubbs[i]+"px";
    }
    bubb[i].top=bubby[i]+"px";
    bubb[i].left=bubbx[i]+"px";
    }
    else {
    bubb[i].visibility="hidden";
    bubby[i]=0;
    return;
    }
    }
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sleft;
    x=(e)?e.pageX:event.x+sdown; }

    window.onresize=set_width;
    function set_width() {
    if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    else {
    swide=800;
    shigh=600;
    }
    }
    window.onscroll=set_scroll;
    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;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height;
    div.style.width=width;
    div.style.overflow="hidden";
    return (div);
    }
    // ]]>
    </script>
 1. Log In blogger.com
2. Klik Tata Letak
3. Tambahkan Gadget / Add Gadget
4.Pilih Gadget/ HTML/JavaScript

5.Masukkan Script Efek Gelembung

5. Truss Jangan lupa Simpan
6. Taraaaa... Jadi deh :D dan lihat hasilnya

Keterangan :
  • Kode berwarna Merah adalah kode warna gelembung, silahkan agan ganti sesuka hati agan !!
  • Kode Warna aqua ( 100 ) adalah jumlah maksimal gelembung yang akan keluar, silahkan ganti angka 100, dengan angka / Jumlah yang agan sukai :).

itu dia tutorial blog tntang Cara Membuat Efek Gelembung Pada Cursor Blog. Semoga bermanfaat. Selamat Mencoba.

    Original Posted by : ADMIN

    Komentar anda sangat membantu perkembangan blog ini!!


    Share this article now with your friends !

    Posted by : Alfon Ritonga ~ / Tuorial , Tips Trik , Gadget , SEO

    Artikel Cara Membuat Efek Gelembung Pada Cursor Blog diposting oleh Alfon Ritonga pada . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging

    + Create Comment + 3 Responses so far.

    3 April 2013 00.43

    makasih informasinya.... saya akan coba pasang..

    18 April 2013 21.25

    ane udah coba. cuma gak work gan

    24 April 2013 10.34

    susah gan

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

    Leave a comment

    Get Update Via E-Mail

    Cukup Masukkan alamat email Anda untuk berlangganan di blog ini dan menerima pemberitahuan artikel terbaru melalui email anda. Bergabunglah dengan 245 pengikut lainnya...!



     

    Copyright © - Tutorial Blogspot / All Rights Reserved.
    Copyright © 2012 -