Monday, January 15, 2018

Làm link trên Blogger đổi màu rực rỡ khi rê chuột vào

Hôm nay quangcuongit sẽ hướng dẫn các bạn làm link phát sáng bảy màu khi bạn rê chuột vào.Demo như dưới ảnh.
Để cho link trên blog trong đẹp hơn bạn có thể dùng lệnh "Hover"để tạo hiệu ứng cho nó, có thể là cỡ chữ lớn hơn hay thay đổi màu khác khi rê chuột vào chúng. Vâng đó là cách tạo hiệu ứng cho link đơn giản. Mình có biết thêm một cách để làm cho màu của link text trên blog thay đổi liên tục xin chia sẻ cùng các bạn. Với thủ thuật này thì khi rê chuột vào link màu của link đó sẽ tự động thay đổi làm cho link text trông rất bắt mắt.
1. Đầu tiên đăng nhập vào
blogspot
2. Vào bố cục thêm 1 HTML/Javascript
3. Hoặc chèn trước thẻ </head> trong mẫu của bạn
Code sau:
<script type='text/javascript'>
//<![CDATA[
var rate = 20; 
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; 
var act = 0; 
var elmH = 0; 
var elmS = 128; 
var elmV = 255; 
var clrOrg; 
var TimerID; 
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()
{
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>

Hoặc là xài code đã up lên host:

<script src="http://kenhdidong.pro/css/hover_textcolor.js"></script>

Chúc các bạn thành công
.Đừng quên theo dõi blog để được cập nhật những thủ thuạt mới nhé