Membuat Efek Matrix di Blog

Walaupun efek ini sudah rada karatan atau agak usang buat di praktekan namun tak apalah mana tahu ada juga yang masih minat dengan Efek Matrix ini hehehehe...
Tanpa berbelit-belit yuk lihat contohnya disini
Dan berikut kodenya :

.matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}




var rows=5; // tinggi kotak
var speed=30; // lebih kecil lebih cepat
var reveal=1; // antara 0 dan 2.
var effectalign="default" //enter "center" to center it.

/***********************************************
edit by http://www.masbugie.com
***********************************************/

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
ma_row=document.createElement("tr");
for (y=0; 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='';
for (var x=0; x
ma_tab+='';
for (var y=0; y
ma_tab+=' </'+'td>';
}
ma_tab+='</'+'tr>';
}
ma_tab+='</'+'table>';
matrix.innerHTML=ma_tab;
}
ma_cho=ma_txt;
for (x=0; 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
x=x+(m_copo[y]==100);
ma_row=m_copo[y]%100;
if (ma_row && m_copo[y]<100) {
if (ma_row
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
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
else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
else if (ma_row
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
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()
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()
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);
}
}
// -->

by http://www.masbugie.com

Silahkan Anda rubah teks yang berwarna merah sesuai dengan selera
Cara pasangnya Rancangan-->Tambah Gadget-->HTML/Javascript copas kode diatas kedalamnya.

Semoga bermanfaat, salam

Apakah artikel ini bermanfaat bagi Anda? Beri penilaian yach

Membuat Judul Blog Berjalan

Bagaimana membuat Judul Blog Berjalan???

Masuk ke Blogger

Klik Tata Letak > Edit HTML



Cari tag dan copas kode ini di bawahnya


var txt=" ";
var kecepatan=100;
var segarkan=null;
function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}
bergerak();


100 = Kecepatan

Ubah sesuai dengan keinginan anda!

Mengganti Cursor Blog

Mengganti kursor pada Blog akan membuat tampilan blog anda lebih unik daripada blog yang lain. Kursornya pun bisa anda pilih sesuai dengan selera anda atau sesuai dengan blog anda. Mengubah kursor ini tidaklah sulit, bagaimana cara mengubah atau mengganti kursor pada blog?

Pada dasarnya, saya memiliki dua cara, yang pertama lebih mudah daripada cara yang kedua :




Cara Pertama :


Login ke Blogger

Klik Tata Letak > Tambah Gadget dengan jenis HTML/JavaScripts


Kopi kode ini dan letakkan di kotak yang telah disediakan


 type="text/css">body
{cursor:url("http://1.1.1.2/bmi/www.123cursors.com/freecursors/8145.gif"),default}

Simpan gadget


Letakkan di sembarang tempat selama anda tidak memberinya judul

Simpan template dan lihat hasilnya

Kursor pada kode ini berbentuk seperti ini :

Untuk mengganti kursor, anda tinggal menganti URL http://1.1.1.2/bmi/www.123cursors.com/freecursors/8145.gif menjadi URL kursor anda. Klik beberapa situs ini untuk mendapatkan kursor sesuai dengan selera anda :


http://www.cursors-4u.com

http://www.123cursors.com



Saya sarankan anda menggunakan URL yang kedua agar lebih mudah

Setelah menemukan kursor yang tepat klik kanan pada gambar kursor tersebut dan pilih Copy Image Location

Timpa URL kursor yang lama menjadi URL kursor yang baru

Simpan template dan lihat hasilnya

Cara Kedua

Cara yang ini sudah saya katakan tadi lebih sulit daripada cara yang sebelumnya, akan tetapi sekedar sudah saya tulis, mungkin sobat ingin tahu cara yang lainnya. OK!!!

Login Ke Blogger

Klik Tata Letak > Edit HTML

Cari kode body { 

Paste kode ini di bawahnya 

cursor:url("http://cur.cursors-4u.net/cursors/cur-2/cur132.cur"); 

Jika masih bingung, lihat bentuknya seperti ini :

body {
background: #46d0fe;
width: 980px;
color: #333;
font-size: 11px;
font-family: Tahoma, Verdana;
margin: 0 auto 0;
padding: 0;
cursor:url("http://cur.cursors-4u.net/cursors/cur-2/cur132.cur");
}

Cursor pada kode ini berbentuk seperti ini :

 

Untuk mengganti kursor tersebut, anda tinggal merubah URL cursor:url("http://cur.cursors-4u.net/cursors/cur-2/cur132.cur"); menjadi URL kursor anda.

Cari kursornya di beberapa link berikut :

http://www.cursors-4u.com

http://www.123cursors.com

Pada cara yang kedua ini, saya sarankan memilih URL yang pertama!

Perbedaan Cara Pertama dan Cara yang Kedua

Pada intinya kita hanya mengganti kursor di blog, akan tetapi saya menulis 2 buah cara yang berbeda. Perbedaan di antar kedua cara ini adalah :

1. Cara Pertama URL kursornya ber-ekstensi .gif sedangkan Cara kedua URL kursornya ber-ekstensi .cur

2. Cara Pertama untuk mendapatkan URL kursornya saya sarankan anda menggunakan URL kedua sedangkan Cara kedua saya sarankan anda menggunakan URL yang pertama.

Mohon maaf jika artikel ini terlalu panjang dan jangan lupa komen ya!

Baca selengkapnya: Mengganti Cursor Blog http://www.indoblogtrik.com/2010/06/mengganti-cursor-blog.html#ixzz1v0hdTEBH