Aku Punya dot com

Tidak Punya Ide Untuk Menulis

  • Home
  • Kontak
 
Home > Tips trik blog > Cara membuat link pelangi
22
Jul
2010

Cara membuat link pelangi

Posted by: admin

Cara membuat link pelangi / rainbow link untuk memperindah tampilan blog.
Efek link pelangi ini akan muncul bila kamu arahkan kursor pada sebuah link.
Silahkan coba demonya dibawah ini.

Demo (arahkan kursor):

Oke langsung aja, langkah membuat link pelangi:
Pasang kode javascript dibawah ini dibagian <head> blog kamu

Salin kode JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<script language="javascript" type="text/javascript">
var rate = 20; // Increase amount(The degree of the transmutation)
 
 
////////////////////////////////////////////////////////////////////
// Main routine
 
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
 
document.write("<style>");
document.write("body a {");
document.write("font-weight: bold;");
document.write("color: orange;");
document.write("text-decoration: none;");
document.write("}");
document.write("<\/style>");
 
 
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;
}
 
 
//=============================================================================
// doRainbow
// This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",50);
}
}
 
 
//=============================================================================
// stopRainbow
// This function stops to change a color.
//=============================================================================
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
 
 
//=============================================================================
// doRainbowAnchor
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
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()",50);
}
}
}
 
 
//=============================================================================
// stopRainbowAnchor
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
 
 
//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
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()",50);
}
}
}
 
 
//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
 
 
//=============================================================================
// Change Color
// This function changes a color actually.
//=============================================================================
function ChangeColor()
{
objActive.style.color = makeColor();
}
 
//=============================================================================
// makeColor
// This function makes rainbow colors.
//=============================================================================
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;
}
</script>


Selamat mencoba…!!!


memuat halaman
Reload
«
»
iklan

12 Komentar

Tips trik blog

Postingan yang lain:
  • Cara membuat toggle show hide
  • Agar emoticon tidak muncul di sisi kiri post
  • Cara mengganti cursor
  • Cara membuat gambar melayang
  • Daftar kode karakter spesial ALT

Ada 12 komentar di “Cara membuat link pelangi”

Tulis komentar
Komentar dari ary aditya:
Dari IP: 223.255.225.7
Tanggal 25 September 2010 jam 11:39 pm

wow sangat membantu

Balas komentar

Komentar dari newbie:
Dari IP: 202.70.58.237
Tanggal 19 Oktober 2010 jam 4:47 pm

ijin mengembara cari ilmu, kalau javascript seperti itu ngaruh ga ya ke google??? :roll:
taruh dimana ni atau
makasih, mohon pencerahnnya. salam

Balas komentar

Komentar dari admin:
Dari IP: 110.139.114.203
Tanggal 19 Oktober 2010 jam 9:16 pm

javascript gak akan pengaruh apa2 ke google, mungkin efeknya ke blog kamu aja
jadi tambah keren :mrgreen: :mrgreen:

Balas komentar

Komentar dari Yogi Septiargy:
Dari IP: 125.162.110.98
Tanggal 21 November 2010 jam 5:09 pm

:idea: :mrgreen: :roll: :twisted:

Balas komentar

Komentar dari iwan:
Dari IP: 123.231.242.130
Tanggal 14 Februari 2011 jam 9:30 pm

jadi apa klo dibuat pelangi :| :smile:

Balas komentar

Balasan dari admin:
Dari IP: 64.255.164.56
Tanggal 15 Februari 2011 jam 12:41 am

ya jadi tambah keren laahhh… :D

Balas komentar

Komentar dari pamuji99:
Dari IP: 180.247.52.164
Tanggal 22 Maret 2011 jam 5:35 pm

warnanya berkedip kedip :shock:
memang sesuai dengan tema judul seperti pelangi :idea:

Balas komentar

Komentar dari Rian Nur Herdhian:
Dari IP: 118.96.195.203
Tanggal 9 April 2011 jam 9:15 am

Asem Gan Di Ane Gak cocok kale ya .? gak Narepp :( :kencing:

Balas komentar

Komentar dari handika:
Dari IP: 118.136.87.116
Tanggal 28 Juni 2011 jam 5:52 pm

gan, ane kok ga bisa?

Balas komentar

Balasan dari admin:
Dari IP: 64.255.180.173
Tanggal 28 Juni 2011 jam 7:47 pm

hmmm.. berarti anda kurang beruntung,
coba sekali lagi..

Balas komentar

Komentar dari jasa klik adsense:
Dari IP: 202.152.171.23
Tanggal 28 Oktober 2011 jam 12:45 pm

menarik juga… infonya, membuat blog tambah seru.. dan kali aja pengunjung jadi pada mau klik iklan kita ya..heheh

Balas komentar

Komentar dari Ahsan:
Dari IP: 114.79.17.165
Tanggal 15 November 2011 jam 8:25 pm

wah keren gan,,, thanks,, mau ane praktekin dulu

Balas komentar

Tulis Komentar


website / blog

Komentar:

Emoticon
Emoticon:
X
icon_smile.gif icon_wink.gif icon_neutral.gif icon_mad.gif icon_wc.gif icon_uhuk.gif icon_twisted.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_puyeng.gif icon_pliss.gif icon_payah.gif icon_lidah.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_kencing.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_dead.gif icon_cry.gif icon_cool.gif icon_bom.gif icon_bisik-bisik.gif icon_ayolah.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

Batalkan balasan
 
    CO.CC Free Domain
  •     Komentar terbaru

    • @ayu_ayudewi: kok lama sih lodingnya? :wc: #
    • Niko98.com: MAU DOWNLOAD GAMES GAMES GRATI #
    • Lmag: efeknya keren, daunnya pada be #
    • gm{joker}: tu loe bisa aneh ya loe #
    • sfdxg: ya adah kok gk ada karakteh wa #
    • sfdxg: hei loe cadet sinih bay pb ama #
    • akbar: aku anak yang rajin loe wow #
    • akbar: kalau ginuh gw ngapain enak ma #
    • admin: itu diatas gambar2 jam, step2n #
    • muzli: q pk blogspot, diatas dimana,, #
  •     Kategori

    • Adsense
    • Aneh
    • Biografi
    • Blog
    • Cewek
    • CSS
    • CSS3
    • Dofollow
    • DVD
    • Emoticon
    • Facebook
    • Game
    • Google
    • Gratis
    • Hiburan
    • Javascript
    • Kamus Online
    • Kesehatan
    • Kiamat
    • Kids
    • Komik
    • Lucu
    • Menu Bulan Puasa
    • Mp3
    • PHP
    • Rank
    • Resep
    • Search Engine
    • SEO
    • Sitemap
    • Story
    • Tak Berkategori
    • Tak Penting
    • Tips
    • Tips trik blog
    • Traveling
    • Twitter
    • Wedding
    • Wordpress
    • Youtube
  •     Arsip

    • Januari 2012
    • Desember 2011
    • November 2011
    • Oktober 2011
    • September 2011
    • Agustus 2011
    • Juli 2011
    • Juni 2011
    • Mei 2011
    • April 2011
    • Maret 2011
    • Februari 2011
    • Januari 2011
    • Desember 2010
    • November 2010
    • Oktober 2010
    • September 2010
    • Agustus 2010
    • Juli 2010
    • Juni 2010
    • Mei 2010
    • April 2010
    • Maret 2010
    • Februari 2010
    • Januari 2010
    • Desember 2009
    • November 2009
    • Oktober 2009
    • September 2009
    • Agustus 2009
    • Juli 2009
    • Juni 2009
    • Mei 2009
    Adsense Indonesia
    ...
      Page: /cara-membuat-link-pelangi.html : Ethiopian Girl
      Test Link 2
      Test Link 3

Aku Punya dot com © 2009 - 2012
Powered by WordPress
Best viewed in Firefox, Opera, and Chrome at 1280 x 960 screen resolutions

Feed  |  Sitemap  |  Recent Posts
Tukar Link  |  Pasang Banner  |  Kontak

25 queries. 1,390 seconds

Toolbar
tulis komentar
     
12 komentar
Komentar 12
kembali ke bawah
Bawah
kembali ke atas
Atas
Games
  • »  Game Puzzle
  • »  Game Tetris
  • Game Puzzle  
     
    Game Tetris  
     
    Shoutbox
    Shoutbox  

     
    Suka
    Aku Punya fans  
     
    Pencarian
    memuat ...