Tutor : Bubbles Cursor

hai... nad nak ajar macam mana nak buat bubbles cursor...

tau tak? kalau tak tahu jom kita buat kasi tahu...

hehe... ok.. mula2 korang pergi kat

DESIGN > ADD GADGET > HTML
copy and paste code di bawah nie :~

<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#fff", "#fff", "#fff", "#fff", "#fff"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=68; // maximum number of bubbles on screen



/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

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>

MERAH :boleh tukar colour kat SINI

BIRU :ikut suka hati nak banyak mana bubbles 

---

Kalau Anda Suka Entry Ini Like dan Comment

---

Tutor : Sparkling Cursor

hai kamu semua.... ! nad tengah rajin hari nie.. nah nad mau ajar cara-cara buat cursor yang ada benda jatuh tu... hehehe... jom kita buat~

mula-mula pergi ke DESIGN > ADD GADGET > HTML

ten korang copy and paste code kat bawah nie :~

<script type='text/javascript'>
// <![CDATA[
var colour="#FF0066";
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>

MERAH: kalau nak tukar warna sparkling korang pergi ke SINI

---

Kalau Anda Suka Entry Ini Like dan Comment

---

Tutor : Widget Sebelah Kiri Blog

salam korang.. hari nie.. nad baik hati nak ajar buat wiget.. kalau nak blajar..

jom follow step nie...

then pergi ke laman web nie http://gickr.com/

lepas dah klik kat laman web tadi korank akan jumpe macam kat bawah nie :-

korang upload semua gambar yang dh di edit kan tadi

lepastu korang klik kat SIZE

lepastu klik kat CUSTOM

BUAT SAIZ MENGIKUT KESESUAIAN BLOG KORANG

lepastu klik continue~

okeyh... bile gambar dah siap di upload..

korang copy IMAGE

kat blog pergi ke DESIGN > ADD GADGET > HTML

lepastu korang kene klik kat RICH TEXT

then.. korang klik kat RIGHT KLIK n then korang

PASTE

ok... lepas dah paste gambar tadi... korang paste 

 <div style="position: fixed; bottom: 0px; left: 2px;">

SEBELUM gambar tadi

kalau dah siap paste semua tu.. korang SAVE tau....

lepastu akan jadi macam nie kat blog korang :~

sekian terimas~ 

---

Kalau Anda Suka Entry Ini Like dan Comment

---

Tutor : Tukar Favicon

hehehe.. now,, NAD nk ajr korank cre2 tukar image favicon

yang NAD petak kan tu... ha.. cm gini care nyer...

1) pergi ke design>edit html>tick expand widget

2) tekan ctrl+f dan CARI code ni

</head>

3)pastu, copy bwh nie pulak

<link href='URL GAMBAR' rel='shortcut icon' type='image/x-icon'/>

4) paste kat ATAS kod </head> tadi

5) siap! now korang preview dulu.. kalo ok baru SAVE..

P/S: URL IMAGE KORANG BOLE AMIK KAT BAWAH NIE:~

http://i.imgur.com/8Vka6.gif

http://i.imgur.com/aObLs.gif

http://i.imgur.com/7PmrX.gif

http://i.imgur.com/zhOyg.gif

http://i.imgur.com/lvAAh.gif

http://i.imgur.com/PX8pr.gif

http://i.imgur.com/3JtNJ.gif

http://i.imgur.com/rIRLT.gif

---

Kalau Anda Suka Entry Ini Like dan Comment

---

Tutor : Cara Nak Letak Button Dashboard & Follow

hey guys,, hehe.. hari nie nad tetibew jerk rajin nak bantu awak,awak dan awak yang nak letak button follow n dashboard.... cara-cara nya ialah.. jeng..jeng..jeng..

hehehe... ok.. mule-mule pegi dekat DESIGN lepastu pergi dekat ADD A GADGET

lepastu copy and paste link yang nad kasi nie

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG KORANG" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a></div> 

ok.. lepastu nampak tak yang dye tulis ID BLOG KORANG ? 

mestilah nmpak.. kalo tak bute lettew.. hehe.. just kidding....

okeyh yang tu korang amik lah korang punyer ID... :)

kalu tak tahu bole pegi ke SINI

---

Kalau Anda Suka Entry Ini Like dan Comment

---

Tutor : Cari ID BLOG

ok.. nad nak ajar cara-cara mengambil ID BLOG.... 

ok begini cara nyer.. klik gambar untuk tambahkan kebesaran

mula2 klik kat DESIGN

sekian terima kaseh :)

---

Kalau Anda Suka Entry Ini Like dan Comment

---

Tutor : Transparent Header

okehh.. hari nie saye rajin nak kasih tutor walaupon nie bukan blog tutor... hehhe....

kalo nak tengok ngn lebih jelas cume perlu klik jewp

hahahaha.... soryy.. kat gambar nie banyak TYPOO.. jangan mara

ok let's we start..... ni cara yang paling mudah and paling simple.. hope korang try ^^

---

Kalau Anda Suka Entry Ini Like dan Comment

---