Membuat Text Matrix

Kalo contohnya bisa sobat liat di sini http://project.anggrie.net63.net/textmatrix.php .

Cara bikinnya :
  • Copy skrip dibawah, trus paste di atas kode <head>
<style type="text/css">
.matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}
</style>
<script type="text/javascript" language="JavaScript">
<!--
var rows=11; // must be an odd number
var speed=50; // lower is faster
var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
var effectalign="default" //enter "center" to center it.
var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
 if (!w3c && !ie45) return
  var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
  ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
  ma_txt=" "+ma_txt+" ";
  columns=ma_txt.length;
  if (w3c) {
 while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
 ma_tab=document.createElement("table");
 ma_tab.setAttribute("border", 0);
 ma_tab.setAttribute("align", effectalign);
 ma_tab.style.backgroundColor="#000000";
 ma_bod=document.createElement("tbody");
 for (x=0; x<rows; x++) {
   ma_row=document.createElement("tr");
   for (y=0; y<columns; y++) {
  matemp=document.createElement("td");
  matemp.setAttribute("id", "Mx"+x+"y"+y);
  matemp.className="matrix";
  matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
  ma_row.appendChild(matemp);
   }
   ma_bod.appendChild(ma_row);
 }
 ma_tab.appendChild(ma_bod);
 matrix.appendChild(ma_tab);
  } else {
 ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
 for (var x=0; x<rows; x++) {
   ma_tab+='<t'+'r>';
   for (var y=0; y<columns; y++) {
  ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';
   }
   ma_tab+='</'+'tr>';
 }
 ma_tab+='</'+'table>';
 matrix.innerHTML=ma_tab;
  }
  ma_cho=ma_txt;
  for (x=0; x<columns; x++) {
 ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
 m_copo[x]=0;
  }
  ma_bod=setInterval("mytricks()", speed);
}
function mytricks() {
  x=0;
  for (y=0; y<columns; y++) {
 x=x+(m_copo[y]==100);
 ma_row=m_copo[y]%100;
 if (ma_row && m_copo[y]<100) {
   if (ma_row<rows+1) {
  if (w3c) {
    matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
    matemp.firstChild.nodeValue=m_coch[y];
  }
  else {
    matemp=document.all["Mx"+(ma_row-1)+"y"+y];
    matemp.innerHTML=m_coch[y];
  }
  matemp.style.color="#33ff66";
  matemp.style.fontWeight="bold";
   }
   if (ma_row>1 && ma_row<rows+2) {
  matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
  matemp.style.fontWeight="normal";
  matemp.style.color="#00ff00";
   }
   if (ma_row>2) {
    matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
  matemp.style.color="#009900";
   }
   if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
   else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
   else if (ma_row<rows+2) m_copo[y]++;
   else if (m_copo[y]<100) m_copo[y]=0;
 }
 else if (Math.random()>0.9 && m_copo[y]<100) {
   m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
   m_copo[y]++;
 }
  }
  if (x==columns) clearInterval(ma_bod);
}
function zoomer(ycol) {
  var mtmp, mtem, ytmp;
  if (m_copo[ycol]==Math.floor(rows/2)+1) {
 for (ytmp=0; ytmp<rows; ytmp++) {
   if (w3c) {
  mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
  mtmp.firstChild.nodeValue=m_coch[ycol];
   }
   else {
  mtmp=document.all["Mx"+ytmp+"y"+ycol];
  mtmp.innerHTML=m_coch[ycol];
   }
   mtmp.style.color="#33ff66";
   mtmp.style.fontWeight="bold";
 }
 if (Math.random()<reveal) {
   mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
   ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
 }
 if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
 m_copo[ycol]+=199;
 setTimeout("zoomer("+ycol+")", speed);
  }
  else if (m_copo[ycol]>200) {
 if (w3c) {
   mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
   mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);
 }
 else {
   mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
   mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];
 }
 mtmp.style.fontWeight="normal";
 mtem.style.fontWeight="normal";
 setTimeout("zoomer("+ycol+")", speed);
  }
  else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
  if (m_copo[ycol]>100 && m_copo[ycol]<200) {
 if (w3c) {
   mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
   mtmp.firstChild.nodeValue=String.fromCharCode(160);
   mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);
   mtem.firstChild.nodeValue=String.fromCharCode(160);
 }
 else {
   mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
   mtmp.innerHTML=String.fromCharCode(160);
   mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];
   mtem.innerHTML=String.fromCharCode(160);
 }
 setTimeout("zoomer("+ycol+")", speed);
  } blog sobat
}
// -->
</script>

  • Trus kalo mau bikin tulisannya tinggal copy aja skrip dibawah ke Postingan, Gadget/Widget
 <div id="matrix">Anggrie Yulio</div>

 Tulisan yang warna merah ganti aja dengan sesuka sobat. :)
Read More …
0 komentar
Label: ,

Membuat Status Page Loading

Page Loading ini akan muncul, saat browser sedang memuat/menampilkan blog sobat hingga 100%. Contohnya pada blog gw ini..


Langkah2 buat bikinnya :
  • Copy skrip dibawah, kemudian letakkan di bawah kode <head>
 <script src='http://anggrie.net63.net/source/preloadpage.js' type='text/javascript'/>

  • Kemudian cari kode <body> dan ganti dengan kode dibawah :
<body onLoad='PreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit;
_top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight);
_left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth);
width: 100%; height: 100%; background-color: #000;
padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75);
-moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<script type='text/javascript'>PreLoading();</script>
</div>



Kemudian simpan...
Read More …
0 komentar
Label: , ,

Source Code jQuery Photoshow

Nggak bisa bilang apa2.. :) susah ngejelasinnya. Pokoknya kayak photoshow.
liat aja langsung disini http://project.anggrie.net63.net/photoshow/album.php

Source Kodenya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anggrie|Galeri Album</title>
<meta name="Author" content="Gerrard Fernando">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
    html {
        overflow: hidden;
    }
    body {
    width:100%;
    height:100%;
    margin:0;
    background-color: #000;
    background-image: url(gambar/back.jpg);
    background-repeat: repeat;
    }
    #screen {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    #img {
        visibility: hidden;
    }
    #screen img  {
        position:absolute;
        left:-10000px;
        z-index:100;
        -ms-interpolation-mode:nearest-neighbor;
        image-rendering: optimizeSpeed;
        cursor: pointer;
        border:#333 solid 1px;
    }
    #tit {
        text-align:center;
        position:absolute;
        color:#fff;
        font-family:verdana;
        font-weight:bold;
        font-size:48px;
        filter: alpha(opacity=30);
        opacity: 0.3;
        width:100%;
        bottom:12px;
        z-index:10000;
    }
.style1 {
    font-size: 16px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #0000FF;
}
</style>
<script type="text/javascript">
// =======================================================
// script: Gerard Ferrandez - Ge-1-doot - May 22, 2004
// http://www.dhteumeuleu.com
// Updated: February 2010 - namespaced
// =======================================================


var diapo = function () {
    var object = new Array(),
        K  = Math.PI / 180,
        N  = 0,
        xm = 0,
        ym = 0,
        mx = 0,
        my = 0,
        ax = 0,
        ay = 0,
        Nb = 0,
        tit = 0,
        img = 0;
////////////////////
    var zM = 4;
////////////////////
    var CObj = function (N, x, y, z){
        var I = img.getElementsByTagName("img")[N % img.getElementsByTagName("img").length];
        var o = document.createElement("img");
        o.onclick = function () {
            if (object[N].on == true) object[N].on = false;
            else object[N].on = true;
        }
        o.onmouseover = function () {
            if (Nb != N) {
                Nb = N;
                tit.innerHTML= I.alt;
            }
        }
        o.onmouseout = function () {
            Nb = -1;
            object[N].on = false;
        }
        o.onmousedown = new Function("return false");
        o.src = I.src;
        scr.appendChild(o);
        this.obj  = o.style;
        this.z    = Math.round(z * ny * .25);
        this.x    = Math.round(x * ny * .25);
        this.y    = Math.round(y * ny * .25);
        this.on   = false;
        this.zOOm = 1;
        this.N    = N;
    }

    CObj.prototype.anim = function () {
        var xP = this.z * Math.sin(mx * K) + this.x  * Math.cos(mx * K);
        var zP = this.z * Math.cos(mx * K) - this.x  * Math.sin(mx * K);
        var yP = this.y * Math.cos(my * K) - zP * Math.sin(my * K);
        zP = this.y * Math.sin(my * K) + zP * Math.cos(my * K);
        var w = (zP * .25 + ny * .25) * this.zOOm;
        var h = w * .8;
        if (this.on && zP > 0) {
            if (this.zOOm < zM) this.zOOm += .05;
        } else {
            if (this.zOOm > 1) this.zOOm -= .025;
        }
        this.obj.left   = Math.round(xP + nx * .5 - w * .5) + "px";
        this.obj.top    = Math.round(yP + ny * .5 - h * .5) + "px";
        this.obj.width  = Math.round(w) + "px";
        this.obj.height = Math.round(h) + "px";
        this.obj.zIndex = Math.round(1000 + w);
    }

    var run = function () {
        dx = (1 * xm) - mx;
        dy = (1 * ym) - my;
        mx += dx / 60;
        my += dy / 60;
        var i = 0, o;
        while (o = object[i++]) o.anim();
        setTimeout(run, 16);
    }

    var resize = function () {
        nx = scr.offsetWidth;
        ny = scr.offsetHeight * .9;
    }

    var init = function () {
        scr = document.getElementById("screen");
        img = document.getElementById("img");
        tit = document.getElementById("tit");
        resize();
        scr.onselectstart = new Function("return false");
        onresize = resize;
        scr.onmousemove = function(e){
            if (window.event) e = window.event;
            xm = (e.x || e.clientX);
            ym = (e.y || e.clientY);
        }
        object.push( new CObj(0,1,-1,-1) );
        object.push( new CObj(1,1,1,-1) );
        object.push( new CObj(2,-1,-1,-1) );
        object.push( new CObj(3,-1,1,-1) );
        object.push( new CObj(4,1,-1,1) );
        object.push( new CObj(5,1,1,1) );
        object.push( new CObj(6,-1,-1,1) );
        object.push( new CObj(7,-1,1,1) );
        run();
    }
    ////////////////////////////////////////////////////////////
    return {
        init : init
    }
}();

onload = function (){
    diapo.init();
}

</script>
</head>

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
<div align="center"><span class="style1">Anggrie Yulio | Photo Album

  </span><br />
</div>
<div id="screen">
    <div id="img">
        <img alt="Keluarga" src="gambar/keluarga.jpg">
        <img alt="Teman Kelas" src="gambar/si-14.jpg">
        <img alt="Belajar Editing" src="gambar/Ang_Angel.jpg">
        <img alt="Tunggangan ku.. :)" src="gambar/IMG01243.jpg">
        <img alt="My Community" src="gambar/Kerinci cyberlink.png">
        <img alt="Banyak Gaya" src="gambar/Photo0329.jpg">
        <img alt="Belajar edit lagi.. :)" src="gambar/toon.jpg">
        <img alt="Teman kelas" src="gambar/Kampus.jpg">    </div>
    <div id="tit" ></div>
</div>
</body>
</html>

Itu aja,, silahkan berkreasi, berimajinasi dan sejenisnya.. :)
Read More …
0 komentar
Label:

www.kerinci-cyberlink.com | Sharing Community

Komunitas Sharing Dunia Maya Kerinci Cyberlink, disni sobat bisa berbagi tentang apa aja, Hacking, Web Design, Tutorial..

Jangan kabur dulu ngebaca nama domainnya.

Disni bukan cuma buat anak2 Kerinci doank. semua bisa berbagi, kagak ada persayaratan atau ketentuan khusus yang pastinya harus saling menghargai. Gabung aja di http://kerinci-cyberlink.com


Read More …
0 komentar
Label:

Screen Shoot Halaman Web Full Screen

Full Screen Shot maksudnya, mengambil screen shot sebuah halaman web secara penuh yaitu dari Header hingga Footer. Caranya cukup simpel, pertama kita harus memasang sebuah Add-ons pada mozzilla firefox yang bernama Screengrab. Add-ons tersebut bisa di unduh di :
https://addons.mozilla.org/en-US/firefox/addon/screengrab/ .

  • Setelah menginstal tool tersebut, sobat tinggal buka Halaman Web yang akan di screen shoot secara penuh.
  • Kemudian klik kanan halaman tersebut Pilih "Screengrab!" -- "Save" -- "Complete Frame/Page", liat gambar dibawah :)
 


  • Kemudian simpan gambar tersebut..
Dan akhirnya...!!! sobat udah berhasil mengambil screen shot secara penuh, hasilnya kayak gambar dibawah :


 

Moga bermanfaat.... :)
Read More …
0 komentar
Label:

Twitter Bird melayang di Blog

Maksudnya dalah gambar Twitter Bird yang melayang (terbang) berpindah2 di halamn blog sobat. :) caranya cuma dengan menambahkan gadget baru untuk skrip tersebut . :)
  • Tambah gadget
  • HTML/Javascript
  • Masukan kode dibawah
<script src="http://anggrie.net63.net/source/twittermelayang.js" type="text/javascript"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiey3IW6pexSfmc1HRVNcjrleJxNZ3I9wmlXqHvryJuyMih4LdxKJF3mwSzTyEZfcQmsE-8ooTg0siyKQ_8b2ATE3F_Z9dZiZlMpJdxEbpWTC0xSXn1jmX14ee-5oY4GPrpASXtI9r61j2v/s1600/original.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button",
"select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/anggrie_yulio";var tweetThisText = "Twitter - UserID http://www.yuliosbook.blogspot.com/";tripleflapInit();
</script>

**Tulisan yang berwarna merah, ganti dengan URL Twitter sobat
**Tulisan yang berwarna biru, ganti dengan alamat blog sobat.
  • Simpan...
Dan begitulah adanya ..... :D
Read More …
0 komentar
Label: , ,

Memasang Gambar Melayang

Gambar melayang maksudnya, gambar yang selalu tetap, yang tidak terpengaruh terhadap scrool mouse. Bingung??? Biasanya sih terletak di sudut atas atau bawah halaman blog. Kalo mau bikin ikutin aja step by step nya... :D
  • Tambah Gadget
  • Pilih HTML/Javascript
  • Copy Paste skrip dibawah :
<script type="text/javascript" src="http://anggrie.net63.net/source/melayang.js"></script>
<script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFvtUrbd4DY6qYSQ-KtePjwuozbC-U-i5AdlACuvjY_vGsqHp5hP_CRoK6zvMdTmHGU2O-Dysdjangeet77qy97WrRN2uV5_LxMC_zim-UvPD4gHWoUgNj2sjGVQL0gPU-ZxQrjGq5KsY/s1600/ico.png")</script>
  • dan begitulah... :)
** link yang warna merah bisa diganti ama alamat gambarnya, atau mau pake yang itu aja juga boleh.

Simpan, dan liat hasilnya...
Read More …
0 komentar
Label: , ,

Membuat Efek Salju pada Blog/Website

Trik kali ini mungkin udah agak basi, soalnya skrip ginian udah merajalela di internet. :) Skrip ini buat bikin efek salju yang berjatuhan kayak blog gw ini, tapi bisa juga di blog/web lain selain blogspot.com, dengan sedikit sentuhan pastinya, caranya :
  • Tambah Gadget
  • Pilih HTML/Javascript
  • Copas skrip dibawah ini
<script language="JavaScript" src="http://anggrie.net63.net/source/salju.js"></script>

  • Kemudian simpan, udah....
Cuma gitu aja kok, trus liat hasilnya..... :D
Read More …
1 komentar
Label: , ,

Google Gravity

Nih efek keren banget, sebuah karya dari www.chromeexperiments.com, yang membuat tampilan google Runtuh hingga pecah berkeping2..

Sobat juga bisa mengklik dan tahan salah satu gambar, dan menggerakkannya, maka gambar tersebut akan terpental dan membentur gambar lainnya.http://mrdoob.com/projects/chromeexperiments/google_gravity/
Trus saya nyoba nyari tau script yang digunakan dengan melihat page sourcenya. Kemudian saya copy dan upload kembali script tersebut, hasilnya berjalan dengan baik. :)









Read More …
3 komentar
Label: ,
Langganan: Postingan (Atom)

Powered by

Pengikut

Total Tayangan Halaman

Follow on G+