2012-02-29

Tutorial : Sparkling Cursor

 


Hye dear ?
t0day .. ika nak k0ngsi dengan k0rang satu Tuto :
nak tau ?
Tuto ni nama dia :
" Sparkling Cursor " ..
k0rang tau x ? ..
jap ya ..



yang ika bulatkan tu ..
kalau x tau jugak ..
cuba k0rang gerak-gerakan curs0r ika tu ..
ada l0ve2 warna biru kan ?
ha , yang tu la .
okeh .

1. Dashboard > Design > Page Elements > HTML /Java Script
2. k0rang c0py c0de ni :
<script type='text/javascript'>


</script>


<script type='text/javascript'>
// <![CDATA[
var colour="#33CCCC";
var sparkles=50;


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>


3. Then pastekan dekat HTML tadi tu ..
4. Save lah !

simple jer kan ?
0uh . lupa la pulak .,
yang ika warnakan dengan WARNA INI ,
K0rang b0leh tukar c0de dengan c0de warna yang k0rang suka ya ?
yang ika warnakan dengan WARNA INI ,
k0rang boleh tukar dengan saiz yang k0rang suka .,
0keh yunk ?
jelas ?
d0ne ! ,

~ T0yYiB ~

2012-02-24

Tutorial : Conversation Twitter



korang ?
cu
k-cak ?
he
hehe ..
wat apa tu ?

0keh .. n0w ika nak kasi tau sal Tuto ni ..
nak tau x
yunk ?
Tuto nak tar0k " TWITTER CO
NVERSATION " ..
eh2 ..
apa tu ika ?
.



ni la yunk !
ha .. dah tau ? .
okeyh ..

1 :
korang pegi kat L
INK ni dulu ya ? .
CLICK ??
.

2 :

click la dekat My Website tu ya ?
dah ?
lepas tu , pilih " Profile Widget " ..


3
:

di bahagian settings = fill la k0ta tu dengan username twitter k0rang ..
di bahagian preferences , k0rang cuma perl
u tukar number Chat yang k0rang suka ..
di bahagian appearance , k0r
ang pilihla mana2 warna mengikit kesesuaian
blog k0rang ..
dan yang terakhir ,.
di bahagian dimensions , letakla ikut size yang k0rang nak .
ada paham setakat ni ?

4 :
okey
h , abes sudah ..
prefer " Finish &
Grab code " ..
kalau k0rang nak preview dulu pun x pa ..
prefer "Test s
ettings " ..

5 :
mesti akan keluar m
acam ni kan ? .


okeh ..
korang pilih "Add to Blogger " ..

6 :
then , Add Widget ..
ha ! .
step yang akhir : ..
k0rang drag la ke mana2
k0tak yang k0rang suka ..
faham yunk ?


THANKS FOR READING , GOOD LUCK

~ TOyYib ~

2012-02-11

Tutorial : Cursos Bertukar Bila Menyentuh Link & Gambar


 

 Kali ni .. 
ika nak ajar macam mana nak buat cursor yang berbeza bila sentuh link 0r s0mething else ..
ha .. 

First :
1.  Dashboard >> Design >> Html / javascript
k0rang c0py c0de ni ya ? :



<style type="text/css">body, a, a:link{cursor:url(URL BODY CURSOR), default;} 
a:hover {cursor:url(URL HOVER CURSOR),wait;}</style>

 
2.  paste c0de ni , dalam Html / javascript k0rang tadi tuh ..
0keyh ?
 
sudah syg ?
mcm mna nak cri URL tuh ya ? ..
apa la ika ni ..
lupa la pulak ..
jap ya ..

First :
 
1.  pergi kat SINI .!

2.  pilih curs0r mana yang k0rang minat ..
dah jumpa ? ..
nak buat ap ?
jap la yunk ..

3.  k0rang c0py c0de " options #1 " tau ..
bila dah c0py .. 
jadi cm ni kan ? ..
 


<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol360.ani), url(http://cur.cursors-4u.net/holidays/hol-4/hol360.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/12/22/animated-blinking-gingerbread-man.html" target="_blank" title="Animated Blinking Gingerbread Man"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Animated Blinking Gingerbread Man" style="position:absolute; top: 0px; right: 0px;" /></a>

 
apa yang perlu k0rang buat .. 
 
4.  k0rang c0py URL yang ika WARNAKAN NI ..
then, paste kat c0de tadi tuh ya ? ..
 
5.  begitu jugak dengan curs0r h0ver k0rang tu .. sama jugak ..  

then ..
apa lagi ika ? ..
psstt !! ..
abes dah syg .. 
SIMPLE ja kan ?? ..
ha .. 

* SELAMAT MENCUBA SYG * >_< v

Tutorial : Lagu Dari Youtube ( Button )

ASSALAMMUALAIKUM ..

k0rang tau tak., apa maksud Tuto ni ? ..
tak tau ..
apa la yang ika d0k merepek ni .. kan ?
hahah ..
yang ni ha ..



tau dah ?? .

0keyh ..
Lets begin the Tuto ..

First :
  1. Dashboard >> Design >> Add a Gadget >> Html/JavaScript

2.
k0rang c0py c0de nih ya ..

<div style="position: fixed; top: 25px; left:3px;">
   
<param name="movie" value=" http://www.youtube.com/v/vezSM0djiBc&feature=relmfu&loop=1&amp;autoplay=1&amp;rel=0&amp;fs=1&amp;color1=0xFFCC00&amp;color2=0xFFCC00 &amp;border=0&amp;loop=0" />

<param name="allowFullScreen" value="true" />

<embed  src=" http://www.youtube.com/v/vezSM0djiBc&feature=relmfu&loop=1&amp;autoplay=1&amp;rel=0&amp;fs=1&amp;color1=0xFFCC00 &amp;color2=0xFFCC00 &amp;border=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="false" width="30" height="25"></embed>
</div><br /><br /><br /><br />

3.         Paste dekat ruang HTMl/JavaScript tdi tu ..

4. Yang ika warnakan dengan WARNA NI .. k0rang tukar dengan URL lagu y0utube pilihan k0rang sendiri ya ..

tak tau ? ..
cam ni la ..

STEP BY STEP ya ? ..

1. pegi dekat SINI ..

2. k0rang cari lagu apa yang k0rang suka ..

3. lepas tu., k0rang click SHARE .. , then ., tekan EMBED ..

4. Tick kat "old embed code" SAJA ya ?

5. k0rang c0py c0de yang tersedia kat dalam k0tak tu .. pas2 , paste la kat mana yang k0rang rasa nak paste ..

bila paste., dia akan jadi macam ni kan ?

<object width="420" height="315"><param name="movie" value="URL LAGU ANDA?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/fDTouU0iABA?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object> 



6. c0py plak URL yang ika WARNAKAN ni .. 0keyh ?

7. then , pastekan kat c0de yang ika WARNAKAN mula-mula tadi ..

N0w ! . k0rang mesti suka warna yang lain-lain kan ? .

8. k0rang gantikan c0de warna yang k0rang suka , dekat c0de yang ika WARNAKAN ni .. ya ?

tak tau macam mna yunk ? 
alahai .. ciannya .. meh cni meh ..  
just CLICK SINI !! .. 0keyh h0ney ? ..

bila nak habis ni ika ? ..
rilex la ..
dah habis dah la syg ..
hahah ..
panjang berjela-jela kan ? ..
p0ning pal0 den ni ha ..
hahhh ..
tunggu apa lagi ? .
SAVE la !
BTW ..
nanti., inf0rm ika ya .. kalau x jadi pun .. inf0rm jgak ..
 
SELAMAT MENCUBA YUNK !

Tutorial : Border Post

ASSALAMMUALAIKUM ..

hari ni .. ika nak ajar ..
macam mana nak letak Border kat P0st k0rang ..
tau x b0rder tu ap ?? .. hehe .. ingatkan x tau .. 0keyh ..

First :

  1. Dashboard >> Design >> Edit HTML >> Tick Expand Widget
  2. Tekan "CTRL+f" serentak ya ?
  3. Search :
.post {


then .,
scr0ll ke bawah ..
paling bawah c0de tadi ..
mesti k0rang akan j
umpa c0de ni ..

border: 3px dashed ; border-top: 3px dashed ; }


apa yang perlu k0rang buat ,.
k0rang cuma perlu tukar apa
yang ika WARNAKAN ni ..
k0rang tukar ik0t kepada kesesu
aian tebal yang k0rang nak ..
yang ika WARNA
KAN ni ..
k0rang tukar kepada jenis-jenis b0rder yang k0rang suka ..
ika bagi pilihan ya ? .

Dotted
Dashed
Solid

sudah ? . bagus3 ..
yuhuuu !!
tak habes lagi la !! ..
alahai .. sabar3 ..

Last Step :

4. Preview >> Save

kalau jadi .. kasitau ika ya ..
kalau tak jadi pun ..
kasitau ika jugak ..
kalau tak .,
tam0 kawan ..
haha ..
0keyhla yunk !

SELAMAT MENCUBA H0NEY !


2012-02-10

Tutorial : Divider Bawah Post

ASSALAMMUALAIKUM ..

si
hat ??? ..
alhamdulillah ..
kli ni .. ika nak teaching ..
macam mana nak letak di
vider kat bawah post ..
tau x divi
der tu ap ?? .
x tau ya .. ?? ..
jap ya yunk ..



ha .. ni la contoh divider tuh .. yang dekat bawah p0st k0rang tu ..
0keyh ..
Kita mulakan kelas ya yunk ..

First :

Dashboard >> Design >> Edit HTML >> Tick Expand Widget

Tekan " ctrl+F " serentak tau., Then search :

.post-footer {


then ., k0rang scr0ll ke bawah .. bet0l2 bawah c0de tadi tu ..
ada c0de
ni ..


background-image: url(URL IMAGE);
background-r
epeat: no-repeat;
background-position
: bottom;


dah dapat syg ?! ..
oke
h3 ..
seterusnya .,

k0rang letak URL images k0rang kat tulisan WARNA NI okeyh ? ..
then .. k0rang preview dulu .. kal
au dah jadi .. korang inf0rm ika ya ? ..
kalau x jadi pun .. inf0rm ika jgak ..
nak tau jugak yunk 0ii ..

oleh kerana ika baik hati hari ni ..
ika akan bagi URL GAMBAR kat k0r
ang secara PERCUMA ya ..
ha
haha ..
k0rang ambik je.. ika tak marah aih ...





http://dl.glitter-graphics.net/pub/2096/209
6041do2ntmhg3n.gif



hhttp://dl2.glitter-graphics.net/pub/2661/2661822vew82lvbl1.gif


cukup ke yunk ? ..
klau nak lagi .. k0rang CLICK SINI !!
ya ?? ..
okeyh la ..
preview dulu ..
kalau jdi .. n 0K .. bru tekan save ..
understand ?? ..
tata ..

 

◕◡◕ ಌ JUJUE ಌ ◕◡◕ Copyright © 2012 Design by Antonia Sundrani Vinte e poucos