Minggu, 06 Januari 2013

Cara Memasang Efek Gelembung di Pointer/Cursor Blog

Cara memasang efek gelembung di pointer/cursor blog, blog design
Cara Memasang Efek Gelembung di Pointer Blog – Sebelumnya saya juga pernah mengulas cara bagaimana mengganti pointer /cursor blog dengan gambar. Kali ini saya akan memberikan tips bagaimana cara memperindah blog Anda dengan menambahkan gelembung yang berterbangan dari pointer / cursor blog Anda. Jika Anda ingin melihat preview-nya, silakan lihat disini. Di blog tersebut, Anda akan melihat gelembung – gelembung yang keluar dari pointer/cursor, lalu terbang ke atas dan akhirnya pecah.
Untuk memasang efek gelembung di pointer / cursor blog, silakan lihat dibawah ini :
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
    // <![CDATA[
var colours=new Array("#FF9900", "#FF9900", "#FF9900", "#FF9900", "#FF9900"); // 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>
Anda tidak perlu pusing – pusing melihat script diatas. Cukup copy dan pastekan di teks editor, semisal Notepad atau Microsoft Word. Ganti kode #FF9900 dengan kode warna yang Anda inginkan. Kode ini akan menentukan warna gelembung yang Anda pasang di blog Anda. Gunakan Color to HTML Converter, untuk mengubah kode warna yang akan anda jadikan warna gelembung menjadi kode HTML. Ubah juga nilai 100 pada var bubbles=100; menjadi nilai yang Anda inginkan. Fungsinya untuk menentukan jumlah gelembung yang keluar.
Cara Memasang Gelembung pada Pointer Blog :
1.     Seperti biasa, buka blog Anda, lalu klik Tata Letak
Cara memasang efek gelembung di pointer/cursor blog, blog design
2.     Setelah itu, klik Tambah Gadget.
3.     Lalu, pilih HTML/Javascript
Cara memasang efek gelembung di pointer/cursor blog, blog design
4.     Pastekan kode diatas, dan jangan isikan apapun pada kolom Judul. Setelah itu, klik Simpan, lalu lihat blog Anda.
Bagaimana? Selamat mencoba! Jangan lupa tinggalkan komentar!
Salam Blogger!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

7 komentar:

  1. mаgnificent іѕѕues аltogether, yοu just won a new reader.
    What would you suggest about your post that you made a few days аgo?
    Anу suгe?
    Review my web page :: breast size change during menstrual cycle

    BalasHapus
    Balasan
    1. @Anonim : I think your webpage is good. It hasn't big size, and good design. But, if I can suggest, you can focus to one topic. Fill your web with articles that have a same topic... :) For example, if you like about vegetables, fill your blog with vegetables articles.
      Thank you for your comment! :)

      Hapus
  2. As the admin of this website is working, no doubt very
    quickly it will be well-known, due to its quality contents.
    Here is my webpage read more

    BalasHapus
  3. makasih bnget gan , ini yang aku cari"


    -->> JUDUL SKRIPSI, TESIS, DISERTASI <<--

    Yang sedang bingung dengan judul SKripsi, Tesis, Disertasi
    mampir aja kesini... banyak dan lengkap dengan abstrak, artikel dan semua BAB

    http://mulok.library.um.ac.id/

    BalasHapus
    Balasan
    1. @Perpus UM : Oke, silahkan dicoba! :) Trims commentnya! :)

      Hapus
  4. makasih gan infonya jangan lupa VISIT ya

    BalasHapus

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!

Internet Blogs