09/03/12

Membuat Link Berwarna-warni untuk Blogger

Bisa dikatakan tips ini sudah agak lama atau sudah tidak jamannya lagi untuk dipasang pada blogger kesayangan Anda. Apalagi jika Anda merupakan salah satu blogger yang menyukai desain yang simple pada blog Anda, tentunya tips ini tidak menarik untuk Anda simak. Namun bagi Anda yang menyukai desain yang meriah pada blog Anda, atau menyukai hal-hal yang berwarna-warni, tips ini patut untuk Anda coba. Selain membuat blog terlihat meriah, tentunya juga akan membuat kesan tersendiri untuk blog kesayangan Anda tersebut. Atau setidaknya tips membuat link berwarna-warni untuk blog (blogger) ini dapat menambah wawasan saja.

Link berwarna-warni atau yang sering disebut rainbow link ini pada prinsipnya akan bekerja pada saat cursor visitor mengarah pada text link di blog Anda. Biasanya text link pada blog pada saat cursor diarahkan akan terlihat satu warna yang berbeda atau hanya menggunakan tehnik text decoration, namun dengan memasang kode script dibawah ini pada blog Anda, maka text link pada blog Anda akan berwarna-warni ketika cursor diarahkan pada link tersebut.

Membuat Link Berwarna-warni untuk Blogger

Ok langsung saja berikut script yang dapat Anda masukan pada blog Anda dan beberapa langkah-langkahnya:
  1. Masuk ke akun blogger Anda.
  2. Pilih tab Rancangan - edit HTML
  3. Cari kode </head> dan letakkan kode script dibawah ini tepat diatas kode tersebut.
    //<![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;
      }
    
     //]]>
    
    atau bisa dengan cara menambahkan widget.
    Jika dengan cara diatas Anda tidak berhasil, silahkan abaikan langkah diatas tinggal letakkan kode berikut ini saja tepat diatas kode </head>:

    <script type='text/javascript' src='http://idblogdesign.googlecode.com/files/rainbow.js'></script>
    
  4. Simpan template Anda dan lihat hasilnya
Semoga bermanfaat !
0 Komentar:
Poskan Komentar