Tutorial Tukar Warna Text Highlight

hye korank tgh2 ujn nieyh eyla nk ajrkn k0rank cm ner nk wt tut0 tukr wrne highlight .... 

korank nk x kl0 eyla ajrkn cm ner nk tukr wrne highlight.. jdy wrne pink ker aper ker.... okey meh sini eyla ajarkn korank... korank nmpk x gmb0 at bwh niey,, nieyh kl0 x tukr wrne highlight nyer....

Default.(wrne highlight sebel0wm dy tukr,,,


nieyh plk lepas wrne nyer dy tukar.... ha,, cntek x??

cre korank nk wt cm gytu adlah.... 
1. Dari dashboard > design > edit HTML

2.Korank tkn CtrL + F n korank cryk kode nieyh

body {

 3. ps korank jmper kode  body {, pastekan kod di bawah 2 kt atas body {

::-moz-selection {
background: #CC3399;
color: #ffffff;
}

yg wrne biru 2 korank ley tukr nan wrne highr yg korang nk... kt SINI 

Contoh: 
n the last one... korg save template n then korg tg0k la blog korg jdy or x.... :)

---

hye korank!! dh tg0k kne komen (WAJEB) !!

---

Following Star Pada Cursor

hye korg!! sehat x sumer?? ary nieyh eyla kurank sehat,, tpy x per la unt0k korank sumer eyla wt la lgy tut0 yg len plk... skunk nieyh eyla nk ajr cm ner nk wt tut0 tuk "Following Star Pada Curs0r" thu x aper tuh?? korank tg0k gmb0 at bwh nieyh p0wn dh thu kn?? de star2 yg follow curs0r tuh... okey j0wm start... 
Dh tg0kkn star2 tuh?? cntek x??? semestynyer cntex!!

LET'S DO IT!!
1. Dari dashboard > design > add a gadget > HTML/javasrcript

2. ps2 korank copy code kt bwh..pileh slh 1 jer taw... n then korank paste kt ruang HTML korank tuh....

i) Following star warna warni

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/rainbows.js"></script>

ii) Following star warna biru

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/blues.js"></script>

iii) Following star warna purple

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/purples.js"></script>

Ps tuh kl0 dh jdy jgn luper contact eylaa kt blog key?? n jangan lupeer leave comment!! kl0 x jdy bry thu sye...

---

hye korank!! dh tg0k kne komen (WAJEB) !!

---

Moving Word At The cusrs0r

Ha!! thu x ape yg di mks0dkn dgn "moving Word At Cursor"??? ini la dye,, => korank tng0k gmb0 yg kt bwh nieyh..kn ade hur0p yg follow curs0r tuh kn??? amacam?? cntek x?? haiya msty la cntex kn?? eyla rse msty korg teringyn nk wt cm tuh kn??? okey meh2 eyla ajrkn korg...

First step, korank gy at Dashboard>> Design>> Page Element>> Add Gadget >> HTML/ javascript 

ps2 korank copy kode kt bwh nieyh n then paste la kt ruang html tuh okey??? 

COPY THIS ==>>

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'Algerian';
color: #TEXT COLOR;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "TEXT HERE";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>

Perkataan yG wrne PINK 2 korg tukar la dgn font korang,, korg thu x font tuh aper??? font tuh yg ade kt microsoft korank ,,nt0k korank tukr tulisan dye tuh...cntoh hyer yg kt bwh nie.. =>>

yG wrne BIRU tuh plk korank tukr la dgn code wrne favourite korg... korg cri kt sini,, korank msty kne ade # nieyh sebel0wm korang copy code 2 okey?? cnt0h :: #FFFFFF

Yg wrne MERAH 2 plk ko ltk la hurup yg korang nk.... 

okey la dh pnt wt tut0 kl0 ader pepe masalah pleaze tell me okey.. leave comment taw kl0 jdy!!

---

hye korank!! dh tg0k kne komen (WAJEB) !!

---

Huruf Yg Ik0wt Cursor

Contohnya seperti di bawah.

Tutorial untuk buat perkataan bergerak mengikut cursor adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript (more info)

2. Copy dan paste kod berikut dalam html/javascript yang anda buka.

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "Perkataan anda di sini";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>

Note: Tukar 'Perkataan anda disini' dengan apa yang anda mahu.

3. Save dan lihat hasilnya.:)


Bagi yang ingin sedikit ubahsuai, boleh rujuk beberapa perkara berikut.

1.Tukar style

font-style: normal; (pilihan lain italic, oblique, atau inherit)

2. Tukar warna perkataan
color: #FF0080; (untuk code warna, rujuk entri ini HTML color code

3. Tukar jenis tulisan
font-family: 'impact'; (pelbagai lagi bentuk perkataan yang ada, boleh rujuk dibawah)

---

hye korank!! dh tg0k kne komen (WAJEB) !!

---

Ayt Bergerak!

hye sume!!! aryniey cik eyla nk ajar korg cm ner nk wt perkataan bergerak ...cm eyla punye kt bwh pages tuh ..

eyla thu bnde nieyh dh rmai user yg wt,, tpy x slhkn kl0 eyla nk wt?? ini khas unt0k user bru!! jer k??? 

tpy bnde ni tk0t menyerabutkn blog korg plk... s0o suke aty la nk wt or x,, eyla wt,, tpy eyla x thu la blog eyla tuh nmpk seb0t or x...

korg copy code dy bwh nie,, n then korr gy at Dashboard>> Page Element>>Add A Gagdet >> HTML/ javascript  ... ps2 korg paste la code nieyh   kt ruang HTML tuh okey??
1. Kod asas untuk perkataan bergerak 

<marquee>Contoh scrolling text</marquee>

Output untuk kod ini seperti berikut:
Contoh scrolling text

yg wrne pink tuh ko tukr nan ayt korg k???

Berikut contoh kod untuk pegerakan dari kanan ke kiri

<marquee direction="right" >Contoh scrolling text</marquee>

Output untuk kod ini adalah
Contoh scrolling text

2. yg wrne purple tuh korg ley tukr nan kt bwh ni okey?? yg direction tuh x yh copy skly

direction="left"
direction="right"
direction="up"
direction="down"

Contoh kod yang diletakkan background,

<marquee direction="right" bgcolor="#99CCFF">Contoh scrolling text</marquee>

Output untuk kod ini adalah
Contoh scrolling text



3.Ubah warna background ..klo korg nk tukr background tuh kpde wrne favourite korg p0wn boley.. yg wrne purple tuh ko tukr kepade code wrne yg len,,
Untuk ubah background, perlu diletakkan kod berikut

bgcolor="#kod warna"

korg ley crik code wrne tuh kt SINI 

Perkataan dalam keadaan 'anjal' ayt tuh x brgerak..
contoh kod yang diletakkan trick ini.

<marquee behavior="alternate" bgcolor="#99CCFF">Contoh scrolling text</marquee>

Output untuk kod ini
Contoh scrolling text


 Pause apabila cursor dilalukan. ayt tuh boley brhnty biler mouse kog sntoh ayt kt sytu..
Perkataan yang bergerak juga dapat dihentikan apabila dilalukan cursor. Kebiasaannya ini untuk memudahkan korg untuk membaca apa yang ingin disampaikan tanpa ganguan.


Contoh kod dengan trick ini.

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" >Contoh scrolling text</marquee>

output untuk trick ini.
Contoh scrolling text

---

hye korank!! dh tg0k kne komen (WAJEB) !!

---

copyright

hye guys!!! ary nieyh eyla nk wt tut0... korg nk thu x?? tut0 yg eyla nk wt nieyh sng sgt!!! cm blja ABC tuh sng kn ???? eyla nk pekse p0n mseh smpt wt tut0 tok korg sume,,,, x pe,, ntuk pgguner bloggerku yg disayangi eyla akn tur0s wt tut0 tok korg.....ohhhhhhhhh . dah lari topic lahhhhh . korang mesti tertanya-tanya tuto ape la
copyright tuhhhhh kn?? . korang scroll blog eyla sampai kt akhir blog . nanti
korang nampak "Kesume bnde alargh yg ade at blog nieyh only Siti Nur Fadhilah punyer ajer okey?? kl0 nk copy just tkan Ctrl+C okey,, msty serantak!!"
ha,tula copyright . hee . jom kita start tuto ni ek kawan-kawan :)

1. Dashboard=>Design=>Edit HTML=>Tick Expand Widget Template.
2. Lepas tu, korang tekan CTRL+F search code dekat bawah ni okehhhhhhhh .

</body>

3. Bila dah  jumpa code kat atas tu , korang copy code dekat bawah ni ,

<center>your own word</center>

    pastekan dekat atas code </body>
4. Lepas tu korang preview , kalau jadi save okeh :)

senang je kan . i told you already maaa . okey bye eyla nk wt tut0 yg len pulak... ;)

kl0 nk tut0 yg lgy byk prgy kt wan hazel puyer blog k?? >TEKAN< dye la yg lebey pkar dry eyla.okey guys !! bye2

---

hye korank!! dh tg0k kne komen (WAJEB) !!

---

note dy akhir p0st!!

harini eyla nak buat tuto ! yayy ! lompat2 . haha . mereng sikit di mlm ary -.-
untuk pengetahuan korang ini tutorial yang terakhir . ehhhhhh . jangan terkejut dulu.
terakhir buat masa ni je . sebab PKSR kan . so, eyla akan sambung tutorial after
PKSR which is on 27 May 2011  ish... asl la ade PKSR plk..cian k0rg ,,eyla bru nk mule blja2 wt tut0   tpy mse x mengizinkn... huhuhuhuhu =,=
enough bebel'ing' eyla . jom kita start tuto okeh ! ehhh . jap . sebelum tu nak bagitau
note under post ni cm nieyh 

---

hye :) pls bce,, msty leave a c0mment aw!! trime kseh

---

in case korang tak tau kan . hana bagitau awal-awal :D

1. Dashboard=>Design=>Edit HTML=>Tick Expand Widget Templates,
2. Sila tekan CTRL+F and search code dekat bawah ni okeh :)

<data:post.body/>

3. lepas dah jumpa code tu , korang copy code kat bawah ni .

<hr/><center>PESANAN ANDA</center><hr/>

paste kan dekat bawah <data:post.body/>

4. yang PESANAN ANDA tu korang ganti la dengan apa2 pesanan pun.

5. Preview , kalau jadi save saje :D

senang kan . tak susah pun . as easy as ABC . kalau nak tanya bagitau dekat komen.
kalau eyla tak jawab , korang paham sendiri la kenapa . eyla jarang dah ngadap
komputer kl0 wktu ade exam,, s0o sory ea?? that all bebelan eyla.... thx f0r reading!!

---

hye korank!! dh tg0k kne komen (WAJEB) !!

---

Icon Favicon

harini eylaa nak buat tutorial favicon . apa tu favicon eylaa ?
favicon tu gambar dekat tab yang dulunya lambang Blogger tapi
ditukar dengan gambar pilihan kita sendiri . hana tau ramai blogger yang
dah buat tutorial ni . lagipun eyla buat ni sebab sjer2 nk ilank kn rse bowink...

1. Dashboard=>Design=>Edit HTML=>Tick expand widget template .

2. tekan CTRL+F , search code dekat bawah ni ok :)

</head>

3. dah jumpa dah ? ok good . then copy code kat bawah ni .

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

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

    paste kan dekat atas code </head> tu ok :)

4. lepas tu preview , kalau jadi save jela terus :)

ok, kat sini eyla bagi la sikit gambar yang comel lote untuk korang :)

http://i561.photobucket.com/albums/ss52/angelicxmelody/manderly/strawberry.gif

http://i561.photobucket.com/albums/ss52/angelicxmelody/manderly/redribbon.gif

http://i561.photobucket.com/albums/ss52/angelicxmelody/manderly/cupcake.gif

http://i561.photobucket.com/albums/ss52/angelicxmelody/manderly/blueribbon.gif

http://i561.photobucket.com/albums/ss52/angelicxmelody/manderly/camera.gif

http://i561.photobucket.com/albums/ss52/angelicxmelody/creamy%20daisy/a10.png

http://i561.photobucket.com/albums/ss52/angelicxmelody/creamy%20daisy/a8.png

 http://th221.photobucket.com/albums/dd275/theslumbers/th_favicon.gif

 http://www.softlist.net/images/icons/adsen_favicon_graphic_apps_icon_tools-5804.gif

 http://www.softlist.net/images/icons/food_icon_library_desktop_icons-30690.gif

 http://www.softlist.net/images/icons/professional_icon_set_desktop_icons-12871.gif

http://www.softlist.net/images/icons/my_love_3d_screensaver_desktop_screen_savers__other-10712.gif

rsenye dh byk eyla bgy nie,, after follow this tuto pleaze leave ur comment yax!!

kalau korang tak suka gambar yang hana bagi ni, cari la dekat Glitter-Graphics atau Photobucket ok . selamat mencuba ;)

---

hye korank!! dh tg0k kne komen (WAJEB) !!

---

aryni eyla nak buat tutorial favicon . apa tu favicon ,,eyla ?
favicon tu gambar dekat tab yang dulunya lambang Blogger tapi
ditukar dengan gambar pilihan kita sendiri . eyla tau ramai blogger yang
dah buat tutorial ni . lagipun eyla buat ni sebab sjer2 bowink...

1. Dashboard=>Design=>Edit HTML=>Tick expand widget template .

2. tekan CTRL+F , search code dekat bawah ni ok :)

</head>

3. dah jumpa dah ? ok good . then copy code kat bawah ni .

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

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

    paste kan dekat atas code </head> tu ok :)

4. lepas tu preview , kalau jadi save jela terus :)

ok, kat sini hana bagi la sikit gambar yang comel lote untuk korang :)

http://i561.photobucket.com/albums/ss52/angelicxmelody/manderly/strawberry.gif

http://i561.photobucket.com/albums/ss52/angelicxmelody/manderly/redribbon.gif

http://i561.photobucket.com/albums/ss52/angelicxmelody/manderly/cupcake.gif

http://i561.photobucket.com/albums/ss52/angelicxmelody/manderly/blueribbon.gif

http://i561.photobucket.com/albums/ss52/angelicxmelody/manderly/camera.gif

http://i561.photobucket.com/albums/ss52/angelicxmelody/creamy%20daisy/a10.png

http://i561.photobucket.com/albums/ss52/angelicxmelody/creamy%20daisy/a8.png

kalau korang tak suka gambar yang eylaa bagi ni, cari la dekat Glitter-Graphics atau Photobucket ok . selamat mencuba ;)

---

hye korank!! dh tg0k kne komen (WAJEB) !!

---