0 Buat Hover Link Pelangi dengan Rainbow Link Effects

Javascript rainbow link effects merupakan sebuah script yang dibangun dengan memainkan sebuah efek warna atau sebuah animasi yang memunculkan berbagai warna pada sebuah hover link. Jadi ketika cursor berada di atas sebuah link, maka link tersebut akan berubah-ubah warnanya menjadi sebuah tampilan yang indah seperti halnya warna-warni pelangi yang hadir ketika turun rintik hujan ditengah cerah mentari.

Untuk membuat sebuah efek hover link animasi pelangi, sebenarnya bisa dilakukan dengan 2 (dua) cara:

- Menggunakan Javascript
- Menggunakan sebuah background animasi gif.

Keduanya masing-masing mempunyai kelebihan dan kekurangan. Satu kelebihan yang dimiliki hover link dengan gambar animasi gif adalah penggunaan kode html yang sangat kecil serta beban yang super enteng, sedang penggunaan Javascript mempunyai kelebihan pada perubahan warna bukan terletak pada background akan tetapi tepat di teks linknya.

Cara membuat, menampilkan hover link pelangi atau rainbow link effects menggunakan Javascript

1. Login ke Blogger : Untuk login ke blogger hanya perlu dilakukan dengan menuliskan User Name/Nama Pengguna atau Email Address/Alamat Email serta Password/Sandi.
2. Dasbor : KLIK link Design/Rancangan.
3. Design/Rancangan : KLIK link Edit HTML.
4. Cari Kode : Cari kode link ]]></b:skin>.
5. Copy - Paste Javascript : Copy dan Pastekan Javascript di bawah ini di atas kode ]]></b:skin>. 

<script type="text/javascript">
//<![CDATA[
/* gubhug reyot  - bgsGR*/
var rate = 20; // Increase amount(The degree of the transmutation)
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;
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()",150);
}
}
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()",150);
}
}
}
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()",150);
}
}
}
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>

6. SAVE Template/Simpan Template : KLIK link SAVE Template/Simpan Template, kemudian lihat hasilnya dengan membuka blog.

Catatan/Keterangan :

• Upload Javascript : Supaya blog tidak menjadi terlalu berjejalan dengan kode html atau javascript, sebaiknya upload javascript di file/javascript hosting dan kemudian gunakan linknya untuk menggantikan script.
• Penulisan link Javascript : Link Javascript dituliskan di atas kode ]]></b:skin> dalam bentuk :
  <script src=’http://…../bgsGRhovplangi.js’ type=’text/javascript’/> atau bisa juga dituliskan seperti ini :
  <script src=’http://…../bgsGRhovplangi.js’ type=’text/javascript’></script>
  Bentuk hasilnya adalah seperti di bawah ini :

  <script src='http://...../bgsGRhovplangi.js' type='text/javascript'/>
  ]]></b:skin>

• Atau mungkin sampeyan mau langsung mendapatkan link javascript-nya tanpa harus bersusah payah melakukan upload terlebih dahulu, silahkan download melalui link link download di bawah ini.