Cara Membuat Link Blog Warna Warni


Hai sahabat.. Di kesempatan yang baik ini, saya akan mencoba posting sebuah artikel keren yang pastinya banyak dicari oleh blog mania, yaitu cara mendesain link menjadi warna-warni di blog kita.. Silahkan dibaca bila tertarik. Oke, langsung saja sobat. Dan Alhamdulillah Tutorialini berhasil di Blog saya. 

Link Warna Warni

Berikut ini cara menciptakan link warna warni di blog dengan mudah:
Ikuti langkah-langkah ini dengan baik.

Cara I
1. Login ke akun Blogger sobat
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget)
3. Search kode berikut </head>  (Untuk mempermudah pencarian tekan Ctrl + F )
4. Letakkan script berikut tepat di atas kode no.3 tadi

<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>

5. Simpan template sobat dan lihat hasilnya.


Cara II
1. Masuk ke dashbor blog sobat.
2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
3. Pastekan kode berikut ke dalam box HTML/java Script tadi

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

4. Simpan dan lihat hasilnya.

Saya rasa cukup postingan mengenai cara mudah membuat link warna warni di blog kali ini. Semoga bisa bermanfaat dan menambah wawasan sobat.

20 comments

  1. sayangnya,pake script.Saya kira hanya pake CSS.Tapi mantaf lah :)

    ReplyDelete
    Replies
    1. Emang kalau pakai script kenapa gan?
      Saya masih belum mengerti.

      Delete
    2. Kalau belum mengerti kenapa di share artikel ini? :P Usahakan semua yang kamu share di blog ini itu kamu sendiri mengerti, apalagi ini blog tutorial. Script itu membuat blog berat bro.

      Terus tutorial ini tidak akan berhasil sebentar lagi, dikarenakan google code akan dihentikan pengembangannya oleh google. Kalau tidak percaya lihat link ini:

      google-opensource.blogspot.com/2013/05/a-change-to-google-code-download-service.html

      Terus untuk cara di atas bisa digantikan dengan menggunakan CSS3, coba copy pastekan code berikut ke http://htmledit.squarefree.com/

      <style>
      a:link{
      text-decoration:none
      }
      a:hover{
      -webkit-animation: rainbow 1s 16 ease infinite;
      -moz-animation: rainbow 1s 16 ease infinite;
      -o-animation: rainbow 1s 16 ease infinite;
      -ms-animation: rainbow 1s 16 ease infinite;
      animation: rainbow 1s 16 ease infinite;
      }
      @-webkit-keyframes rainbow{
      0%{color:red;}
      20%{color:yellow;}
      40%{color:green;}
      60%{color:blue;}
      80%{color:orange;}
      100%{color:purple;}
      }
      @-moz-keyframes rainbow{
      0%{color:red;}
      20%{color:yellow;}
      40%{color:green;}
      60%{color:blue;}
      80%{color:orange;}
      100%{color:purple;}
      }
      @-o-keyframes rainbow{
      0%{color:red;}
      20%{color:yellow;}
      40%{color:green;}
      60%{color:blue;}
      80%{color:orange;}
      100%{color:purple;}
      }
      @-ms-keyframes rainbow{
      0%{color:red;}
      20%{color:yellow;}
      40%{color:green;}
      60%{color:blue;}
      80%{color:orange;}
      100%{color:purple;}
      }
      @keyframes rainbow{
      0%{color:red;}
      20%{color:yellow;}
      40%{color:green;}
      60%{color:blue;}
      80%{color:orange;}
      100%{color:purple;}
      }
      </style>
      <a href=http://remaja-muslim.com/>REMAJA MUSLIM</a>

      Delete
    3. Wah.. Terimakasih buat Quotes | Remaja Muslim saya harus belajar lebih banyak lagi nih. Trimakasih ya :)

      Delete
  2. Wah mantap nih bang , ane mau coba deh

    ReplyDelete
  3. berhasil gan ;) makasih banyak nih :D

    ReplyDelete
  4. warna warni jaya pelangi aja , artikel yg unik mas :D

    ReplyDelete
  5. Pelangi - pelangi, alangkah indahmu.
    Merah kuning hijau, diblogku yang baru.
    .....
    Pelangi di blog ciptaan yang punya blog
    Heheheeee

    ReplyDelete

Post a Comment

Halaman

Copyright © 2018 Irfan's Blog