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.
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.
Nice..
ReplyDeleteTerima kasih atas artikelnya..
ReplyDeleteSama-sama gan.
DeleteSenang bisa berbagi..
sayangnya,pake script.Saya kira hanya pake CSS.Tapi mantaf lah :)
ReplyDeleteEmang kalau pakai script kenapa gan?
DeleteSaya masih belum mengerti.
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.
DeleteTerus 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>
Wah.. Terimakasih buat Quotes | Remaja Muslim saya harus belajar lebih banyak lagi nih. Trimakasih ya :)
DeleteWaww keren mastaahh
ReplyDeleteTrimakasih :)
DeleteWah mantap nih bang , ane mau coba deh
ReplyDeleteSilahkan dicoba gan :)
Deleteberhasil gan ;) makasih banyak nih :D
ReplyDeleteSama-sama. Senang bisa berbagi.
Deletehahaha cantik jadinya gan
ReplyDeleteIya gan. Blog kita semakin cantik :)
DeleteSedang meluncuuurr..
ReplyDeleteThanks infonya
ReplyDeletelansng di coba
ReplyDeletethank tutorial nya
warna warni jaya pelangi aja , artikel yg unik mas :D
ReplyDeletePelangi - pelangi, alangkah indahmu.
ReplyDeleteMerah kuning hijau, diblogku yang baru.
.....
Pelangi di blog ciptaan yang punya blog
Heheheeee