Hi, pada artikel kali ini saya akan membagikan sebuah trik menarik untuk mempercantik tampilan blog sobat, penasaran? bagi sobat yang suka ngotak-ngatik blog nya untuk mempercantik dan memperindah tampilan blog, tips ini pas banget. trik ini membuat link berubah warna saat kursor diarahkan ke link dan membuat seperti efek pelangi pada link, jadi tambah meriah dan penuh warna kan? yang pasti makin enak di pandang oleh visitor blog sobat.
Simak langkah2 dibawah ini :
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl
+F
cari kode </head>
Lalu masukan script di bawah ini tepat di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById) window.onerror = new Function("return true");
var objActive;
var act = 0;
var elmH = 0;
var elmS = 128;
var elmV = 255;
var clrOrg;
var TimerID;
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() {
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;
}
//]]>
</script>
4. Kemudian simpan template sobat dan lihat hasilnya saat sobat mengarahkan kursor ke link.