Saturday, February 25, 2012

Cara Agar Link Berubah Warna-Warni

Nah, setelah posting sebelumnya Cara Link Agar Bergoyang / Bergerak saat tersentuh kursor kali ini saya akan membahas cara agar link berubah Warna Pelangi saat tersentuh kursor. Jadi saat kita mengarahkan kursor ke tulisan/kata yang mengandung link, tulisan tsb akan berubah-ubah warna pelangi.
Lihat Demonya di TKP SINI

Langsunggg ajaaa.... :

Ada 2 cara, lewat EDIT HTML dan TAMBAH GADGET/JAVASCRIPT

1. Lewat Edit HTML 
  • Masuk ke blogger sobat
  • Design/Rancangan --> Edit HTML
  • Centang Expand Template Widget
  • Cari kode </head>
  • Letakkan kode berikut di BAWAH kode tadi 

&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function(&quot;return true&quot;)
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(&quot;ChangeColor()&quot;,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' &amp;&amp; obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' &amp;&amp; obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval(&quot;ChangeColor()&quot;,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' &amp;&amp; obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' &amp;&amp; obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval(&quot;ChangeColor()&quot;,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 &lt; 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH &lt; 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH &lt; 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH &lt; 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH &lt; 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH &lt; 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 = &quot;0&quot; + elmR;
if (elmG.length == 1) elmG = &quot;0&quot; + elmG;
if (elmB.length == 1) elmB = &quot;0&quot; + elmB;
elmH = elmH + rate;
if (elmH &gt;= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]&gt;
&lt;/script&gt;
  • Simpan/Save 
2. Lewat Tambah Gadget/Javascript
  • Rancangan/Design --> Elemen Laman
  • Tambah Gadget --> HTML/Javascript
  • Masukkan kode berikut di kolom yang tersedia :
<script src='http://sabarmuanas.googlecode.com/files/infonetmu.blogspot.com.mousepelangi.js' type='text/javascript'>
</script>

  • Save/Simpan
Oke lihat hasilnya, dijamin bisa.. sudah saya praktekkan ke2 cara di atas dan berhasil kok sob ^_^


Sumber script: http://infonetmu.blogspot.com/2010/05/membuat-efek-pelangi-link-blog.html

Reactions:

12 comments:

wahh, mantabb nihh
lanjutkan karyanya sobb

nah loh kok banyak bgt ya scriptnya. setahu saya sedikit scriptnya.

mantap nih...LANJUTKAN kata SBY...absen pagi sob :)

siang sobatt
ada award nihh buat CATATAN MINGGUANKU
cek disini yaa :D

mantap... makasih y sob atas tutornya. keren euy.

@Fazri: saya nemunya ini sob, kalau mau yang singkat mending tambah gadget saja.. jika kawan Fazri punya script yang lebih pendek tolong share juga ya :)
@The XP: Sip..
@BloggerNewbie Indonesia: wah kabar bagus ni.. haha terimakasih kawan
@Jejak puisi: sama-sama sob, terimakasih ^_^

maksud saya kalau pakai script yang pertama kebanyakan, lebih baik yang kedua aja, coz sudah disatukan menjadi JS yang disimpan digoogle account, sdh terpasang di blog saya:
http://fazribook.blogspot.com/
nice share kawan :)

@Fazri: iya betul.. nanti juga bisa nambah loading blog --lemot-- klo banyakan script :D

Nah, yang ini baru bagus :) Mampir yah :
kejarduitdariblog.blogspot.com

bagus banget nie infonya...
tolong visit balik ya..
http://www.islanku.com

berhasil,,
mendingan pake yang javascript jadi sewktu-waktu bosen gampang hapusnya,, main juga ke blog saya ya http://berilmu-pengetahuan.blogspot.com

@muflich: okesob
@lirik: oke
@rijang: iya emang enakan javascript.. oke

Post a Comment

Dikomen ya pren, asal cuap-cuapnya yang polite, ku reply kok ^_^
Tapi tolong jangan menyertakan link aktif & SPAM ya :) Trimakasih

 
Cute Pencil