Thay đổi màu cho blog
theo thời gian
Cách làm như sau
Đầu tiên bạn vào chỉnh sửa HTML
Chèn đoạn mã Css bên dưới vào trong thể ]]><b:skin>
Chèn Mã CSS sau :
@media all and (max-width: 1024px) {
h1 { font-family:"open sans"; font-size:40px;
font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all
0.6s;}
h2 { font-family:"open sans"; font-size:20px;
font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;}
}
@media all and (min-width: 1024px) {
h1 { font-family:"open sans"; font-size:120px;
font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all
0.6s;}
h2 { font-family:"open sans"; font-size:30px;
font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all
0.6s;}
}
table { position:absolute; width:100%; height:100%; top:0px;
left:0px;}
.fb-like {position:static; width:100px;}
Chèn mã jQuery bên dưới vào sau thẻ <head>
Đoạn mã jQuery :
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
Chèn mã Javascript bên dưới vào sau thẻ
Chèn mã Javascript :
<script type="text/javascript">
function dotime(){
$("body").css({"transition":
"all 0.8s", "-webkit-transition": "all 0.8s"});
var d = new Date();
var hours =
d.getHours();
var mins =
d.getMinutes();
var secs =
d.getSeconds();
if (hours <
10){hours = "0" + hours};
if (mins <
10){mins = "0" + mins};
if (secs <
10){secs = "0" + secs};
hours.toString();
mins.toString();
secs.toString();
var hex =
"#" + hours + mins + secs;
$("#t").html(hours +" : "+
mins +" : "+ secs);
$("#h").html(hex);
document.body.style.background = hex;
setTimeout(function(){ dotime();}, 1000);
}
</script>
Thay thế thẻ <body> thành đoạn mã bên dưới :
<body onLoad="dotime()">
Thế là xong chúc các bạn thành công !
0 nhận xét:
Post a Comment