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> Copy
4. Kemudian simpan template sobat dan lihat hasilnya saat sobat mengarahkan kursor ke link.
Modal Kecil bisa mendapatkan hasil yg luar biasa...
My life is my message.
jangan lupo mampir ke blog saya ya gan di www.portalcoding.com
Cuma Slidernya tidak bisa jalan ya jika blogspot di alihkan ke dot.ID
Mohon infonya.
Tolong gan !!