April 16, 2012

Tutorial : Cara mewarna-warnikan link.

sungguh indah bukan jika blog diserikan dengan hiasan warna warni ? apa yang perlu anda buat ? jom baca ini, gambar tiada haa, cuma azza nak bagi tahu cuba korang pergi dekat mana mana link, then korang gerakkan sajea mouse tu ke link, automatik dia akan kuar blink blink bukan ? okay, senang sahaja caranya . ataupun korang boleh tengok contoh ini :

ini facebook azza


log in blog ? dashboard > design > edit html > dan ctrl+ F untuk memudahkan searching > </head>

atas </head> korang tambah code di bawah ini :

//<![CDATA[

var rate = 20;

if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID

if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}


function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}


function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function ChangeColor()
{
objActive.style.color = makeColor();
}


function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}

//]]>


sudah siap, preview, apabila timbul warna warni itu, silakan SAVE :)


CREDIT : MAMA ARMANI ( dulu ada tuto nie, skarang entah idak entah wujud tuto nie ) ekeke


p/s : adik adik yang akk sayangi, jangan curi tuto akk boleh tak ? boleh tak belajar untuk memberi kredit dekat seseorang bila kita amek tutorial dan entri orang ? jangan buat harta sendiri boleh tak ? nak tengok akk makan budak tak ? GRRR

Love,

17 Comment:

Firdaus Kasim said...

link warna warni nie sesuai utk perempuan je.. abg x mao la.. hehe

saya_arief said...

sangat2 meriah..
:D

Azza Firza said...

@Firdaus Kasim

alololo abg, ekekee

Azza Firza said...

@saya_arief

=)

d_LA said...

perghhhh coding dia...mcm ketapi..mmg comey dla je mls nk tmbh..hehe..ntlah kalo terbukak pintu hati dla tkr..heee

piQa zUL cOmmEy :) said...

azza . akq mau try k . hehe :) thnkyou ",

Azza Firza said...

@d_LA

hehe, baiklah, happy blogging :)

Azza Firza said...

@piQa zUL cOmmEy :)

hehe, welc :)

ArmaniWhite said...

ada lg tuto ni kat belog akak tu shayangss.. tp da terbenam dek entri ntahapehape...hakhakk.. thanks for d credit =)

Azza Firza said...

@ArmaniWhite

welc akk shayanggg

juesamm minx said...

urmm...kak azza,,klo nak bg kredit tu..just ltak link dye kat post ke ker?

sweet story said...

akak sye buat x jdi pn.. lain yg jdi.. ermm.. kak azza nk tw jdi ape.. nk kh azza klik link niyh htpp://www.alwayssweetstory.blogspot.com tgk kt ats navbar tu.. ade code ape th..

wani said...

akak sye buat x jdi lorh.. lain yg jdinye akak..akak kne tlg sye.. klu akak nk tw jdi ape.. aq akak klik link niyh http://www.alwayssweetstory.blogspot.com lps tu ble dh trbuka kn ats skali ade lgu pstu bwh dye.. kire nye atas navbar..akak tw x cre nk buang tu

Azza Firza said...

@juesamm minx

yep sayangss

Azza Firza said...

@wani

nanti akk cari camne cara nak buang navbar kay :) dulu ingat skrg dah lupa .

azreen nabila azali said...

akak saya tak jadi la buat nih..boleh tolong tak???

Ohh Azza said...

tolong apa dik ?

Related Posts Plugin for WordPress, Blogger...
 

All Rights Reserved by Azah Rahaman