Cara Membuat Link Berkdedip Warna-Warni di Blog - Untuk mempercantik blog anda dan anda ingin link di blog anda kedap-kedip warna-warni saat link disentuh cursor atau bahasa programnya hover,
saya mohon maaf untuk demonya tidak ada.Uuntuk pemasangannya ada 2 cara yang pertama cara menggunakan kode panjang dan yang kedua menggunakan kode pendek (menggunakan link)
Cara Pertama:1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Simpan kode dibawah ini sebelum
</head>
<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>
4. Simpan template
Cara Kedua:1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Simpan kode dibawah ini sebelum
</head>
<script src='http://sabarmuanas.googlecode.com/files/infonetmu.blogspot.com.mousepelangi.js' type='text/javascript'>
</script>
4. Simpan template
Artikel Keren Lainnya:
Pertamaxx Dulu pagi2
BalasHapusselamat ya, akhir-akhir ini saya akan lebih rajin update gan, sebelum pemantapan di sekolah buat persiapan UN
Hapussiip.
Hapussemangat mas UN nya semoga dapat nilai yang bagus dan jangan lupa doa dan belajar ya ..
Hapusijin bukmak dulu kang ":) lago males edit html :D
BalasHapussilahkan mba
Hapusmakasih gan ,keeren nih :D
BalasHapussama2 gan
HapusKeren infonya, sangat menarik dan bermanfaat ^_^
BalasHapusmakasih atas kunjungannya sob
HapusWihh mantab kang , saya mau tanya dong cara membuat kode di blockquote itu berwarna gimana yah ??
BalasHapusitu bukan kode blockquote sob, tapi itu kode pre, artikel terkait:
Hapushttp://yoga-tc.blogspot.com/2013/12/cara-memasang-prism-syntaxhighlighter-di-blog.html
dari dulu juga kode info postingan yang di incer paca blogger, hehe, bukannya saya tidak mau berbagi sob, dulu juga gagal diterapkan di template lain, tapi kalau berbeda kode read more kodenya tidak berfungsi sob, mending download aja template http://yoga-tc.blogspot.com/2013/10/free-premium-light-blue-responsive.html lalu cari kode CSSnya:
BalasHapus.infox {
.....
}
lalu cari kode HTMLnya juga dengan kata kunci "infox" (didalam halaman editor template)
Untuk membuat link berkedip warna-warni selain menggunakan javascript juga bisa menggunakan CSS3 Keyframes. :)
BalasHapus<style>
a:hover {
-webkit-animation:rainbow 3s ease-in-out infinite;
-moz-animation:rainbow 3s ease-in-out infinite;
animation:rainbow 3s ease-in-out infinite;
}
@-webkit-keyframes rainbow {
0% { color:#DEDEDE;}
5% { color:#109F9D;}
10% { color:#B19FD9;}
15% { color:#D600AF;}
20% { color:#E9E32E;}
40% { color:#38374A; }
45% { color:#711943; }
50% { color:#3FFFF5; }
55% { color:#1F67C5; }
60% { color:#6541B3; }
80% { color:#45002D; }
90% { color:#109F9D; }
100% { color:#DEDEDE; }
}
@-moz-keyframes rainbow {
0% { color:#DEDEDE;}
5% { color:#109F9D;}
10% { color:#B19FD9;}
15% { color:#D600AF;}
20% { color:#E9E32E;}
40% { color:#38374A; }
45% { color:#711943; }
50% { color:#3FFFF5; }
55% { color:#1F67C5; }
60% { color:#6541B3; }
80% { color:#45002D; }
90% { color:#109F9D; }
100% { color:#DEDEDE; }
}
@-keyframes rainbow {
0% { color:#DEDEDE;}
5% { color:#109F9D;}
10% { color:#B19FD9;}
15% { color:#D600AF;}
20% { color:#E9E32E;}
40% { color:#38374A; }
45% { color:#711943; }
50% { color:#3FFFF5; }
55% { color:#1F67C5; }
60% { color:#6541B3; }
80% { color:#45002D; }
90% { color:#109F9D; }
100% { color:#DEDEDE; }
}
</style>
Mungkin akan lebih ringan jika menggunakan CSS3 Keyframes.