Membuat Efek Pelangi Link Blog

|
Membuat Efek Pelangi Link Blog disini menggunakan dua script yang saya dapatkan dari hasil jalan-jalan menelusuri mbah google.Hehe ternyata sangat mudah dan rasa penasaran saya kini sudah terobati. Sebelumnya saya penasaran sekali ngeliat blog orang begitu cursor saya taruh ke link, eh linknya ngefek kelap-kelip pelangi gitu buat saya jadi penasaran bagaimana membuat efek pelangi link blog kayaq seperti itu. Kalian para blogger newbie seperti saya pasti penasaran juga kan???Demonya bisa kalian lihat di http://segar-nyaman.blogspot.com/

Berikut cara pemasangannya.

Cara Pertama

1. Masuk ke account blogger kalian, bisa klik disini
2. Pilih Rancangan
3. Klik menu Edit HTML dan jangan lupa untuk mencentang Expand Template Widget
4. Kemudian cari kode </head>
5. kalau sudah ketemu letakkan script ini tepat dibawahnya:


<script type='text/javascript'>
//<![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;
}
//]]>
</script>
 6. Kemudian klik Simpan Template

Cara Kedua

Pemasangan dengan cara yang kedua ini sangat mudah dari pada  pemasangan dengan cara yang pertama diatas. Jadi saya saranin buat kalian yang tidak mau pusing Edit HTML template cari kode ini kode itu seperti cara di atas untuk membuat efek pelangi link di blog kalian mending menggunakan script di cara yang kedua ini. Disini kalian hanya menambah widget/gadget HTML/Javascript di elemen laman dan memasukan script di kolom konten di bawah kolom judul, judul di kosongin saja biar tidak keliatan lalu klik Simpan jadi dah.

berikut scriptnya


<script src='http://sabarmuanas.googlecode.com/files/infonetmu.blogspot.com.mousepelangi.js' type='text/javascript'>
</script>

Sumber artikel bisa kalian lihat di scriptnya
Semoga kalian senang
Baca juga Blogger Tutorial lainnya


3 komentar:

ferdinand hegemur said...

thanks Bang....
sangat membantu bang...

Arman said...

okey sm2 bang,,,

Adi Doya said...

Assalam. mkasih tutorial-nye. Visit back !!!

Post a Comment

Silahkan kalian berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam. Saya Lagi Bermasalah Dengan Adsense, Saya izin Vakum Ngeblog Dulu Sobat Buat Nyari Solusi!!

Related Posts Plugin for WordPress, Blogger...