Với Scripts này khi bạn dê chuột vào một link (liên kết) bất kỳ sẽ có hiệu ứng thay dổi màu liên tục (theo màu sắc cầu vồng). Scripts này tạo hiệu ứng thay đổi màu sắc cho link với gần 10 màu sắc khác nhau khi ta rê chuột vào.
Các bạn có thể bấm vào liên kết dưới hoặc bất kỳ vị trí nào trong blog này để xem demo (Lưu ý Demo chi có tác dụng khi các bạn xem bài viết này).
» Tạo hiệu ứng thay đổi màu link liên tục cho blogspot:
1. Đăng nhập vào blog
2. Bấm chọn tab Mẫu (Template) → Bấm chọn button Chỉnh sửa HTML (Edit HTML)
3. Tìm đoạn thẻ mở <head> → Thêm vào trước thẻ vừa tìm được đoạn code bên dưới:
2. Bấm chọn tab Mẫu (Template) → Bấm chọn button Chỉnh sửa HTML (Edit HTML)
3. Tìm đoạn thẻ mở <head> → Thêm vào trước thẻ vừa tìm được đoạn code bên dưới:
<script src='http://rias.techno.wizard.googlepages.com/rainbow2.js'/>
4. Lưu mẫu (Save template.) của bạn lại và quay trở lại blog để xem thành quả bạn vừa làm được nha.
» Cập nhật khi hiệu ứng không hoạt động
Lưu ý: Việc sử dụng link trực tiếp của đọan Scripts trên, có thể nó sẽ không hiển thị được, khi đó là do hết băng thông, vì thế nếu ai có host riêng, hãy up lên host của mình rồi gắn link đó vào, hoặc up trực tiếp đọan Script đó lên blog(web) của mình. Bằng cách sử dụng đoạn code bên dưới:
<script> /************************************************************************/ /* Rainbow Links Version 1.03 (2003.9.20) */ /* Script updated by Dynamicdrive.com for IE6 */ /* Copyright (C) 1999-2001 TAKANASHI Mizuki */ /* takanasi@hamal.freemail.ne.jp */ /*----------------------------------------------------------------------*/ /* Read it somehow even if my English text is a little wrong! ;-) */ /* */ /* Usage: */ /* Insert '<script src="rainbow.js"></script>' into the BODY section, */ /* right after the BODY tag itself, before anything else. */ /* You don't need to add "onMouseover" and "onMouseout" attributes!! */ /* */ /* If you'd like to add effect to other texts(not link texts), then */ /* add 'onmouseover="doRainbow(this);"' and */ /* 'onmouseout="stopRainbow();"' to the target tags. */ /* */ /* This Script works with IE4,Netscape6,Mozilla browser and above only, */ /* but no error occurs on other browsers. */ /************************************************************************/ //////////////////////////////////////////////////////////////////// // Setting 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 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()",100); } } //============================================================================= // 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()",100); } } } //============================================================================= // 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()",100); } } } //============================================================================= // 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>
Chúc thành công!
Nhận xét
Bạn ơi mình muốn thay đổi màu link khi dê chuột vào nhưng không cần nhấp nháy như này thì làm thế nào bạn , blog của mình thì chỉ có mỗi phần bài đọc là link không thay đổi khi di chuột vào , bạn chỉ giúp mình với cảm ơn bạn Blog của mình http://ketnoicn.blogspot.com/
Trả lờiXóaBạn chọn một trong các đonạ bên dưới và thêm vào trước thẻ ]]></b:skin>
Xóa- Màu link khi chưa dê chuột:
a:link{color:#066;text-decoration:none}
- Màu link đã xem qua (liên quan đến cookie của trình duyệt) Những link nào đã xem rồi thì sẽ có màu này:
a:visited {color:#066;text-decoration:none}
- Màu link khi dê chuột vào liên kết.
a:hover{color:#333;text-decoration:underline}
Bạn ơi phần link ở bài viết vẫn không đổi màu khi dê chuột vào thì làm thế nào bạn
Xóa- Do xung đột CSS. Trước khi áp dụng đoạn mình nói ở trên bạn xóa những đoạn sau trong mẫu đi nha:
Xóaa {
color: #222;
text-decoration: none;
}
a:visited {
color: #000;
}
a:hover, a:active {
color: #000;
text-decoration:none;
}
- và:
a:hover {
color:#EF3030;
text-decoration:underline;
}
- xóa đi rồi áp dụng sẽ được,.
Bạn ơi ở các nhãn mình muốn hiển thị 1 cột cho chữ tiêu đề hiển thị đầy đủ thì làm thế nào bạn cảm ơn bạn nhé http://ketnoicn.blogspot.com/search/label/Ph%E1%BA%A7n%20M%E1%BB%81m%20%E1%BB%A8ng%20D%E1%BB%A5ng%20Hay?&max-results=16
Trả lờiXóaCâu hỏi chưa thực sự rõ ràng bạn ak.
Xóabạn ơi mình muốn điều chỉnh độ rộng của blog thì chỉnh thế nào bạn
Trả lờiXóaBạn điều chỉnh thuộc tính width nằm trong những class và id sau:
Xóachiều rộng cả blog và header
#wrapper
#header
- chiều rộng bài đăng
#content
- Sidebar bên phải:
.main3, .main2
Cảm ơn bạn nha mình chỉnh lại được rùi bạn xem độ rộng blog mình vậy đã được chưa nhé . Bạn chỉ dùm mình cái thay màu nền toàn blog , phần bài viết và phần thanh bên với.
Xóa