25-09-2014, 12:21 AM
Chào các bạn
Thông thường khi chúng ta mở một trang web thì phài chờ mốt thời gian để trang load xuông máy tính và lúc đó rất chán dù trang web đang chờ rất hấp dẫn.
Vì vậy hôm nay mình chia sẽ code load trang tạo sự vui vẻ trong khi chờ trang load hết.
BƯỚC 1:
Vào theme đang sử dụng-> add stylesheet -> File Name -> ghi vào: progress-bar.css.
Bấm chọn : Write my own content.
Chép code này vào khung bên dưới:
BƯỚC 2:
Vào Template đang sử dụng: -> Index Page Templates -> index.
Chép code này vào bất cứ chổ nào bạn muốn :
Khi muốn điều chỉnh độ lớn nhỏ của font thì tìm tại:
Khi muốn thay hình ảnh thì tìm tại :
Xong rồi đó, ra xem trang chủ khi load trang còn buồn chán không nhé.
Theo PCNDL.
Thông thường khi chúng ta mở một trang web thì phài chờ mốt thời gian để trang load xuông máy tính và lúc đó rất chán dù trang web đang chờ rất hấp dẫn.
Vì vậy hôm nay mình chia sẽ code load trang tạo sự vui vẻ trong khi chờ trang load hết.
BƯỚC 1:
Vào theme đang sử dụng-> add stylesheet -> File Name -> ghi vào: progress-bar.css.
Bấm chọn : Write my own content.
Chép code này vào khung bên dưới:
Code:
.well {
font: bold 18px;
background-color: #F7F7F7;
background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9);
background-repeat: repeat-x;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
overflow: hidden;
}
.progress-bar {
animation: progress 3s;
padding: .3em;
text-align: center;
color: rgba(255,255,255,100);
background-image: linear-gradient(135deg, #26BDA6, #FF9F65, #DED37E);
border-radius: 4px 4px 4px 4px;
}
@keyframes progress {
from {
width: 0;
color: rgba(255,255,255,0);
}
to {
width: 100%;
color: rgba(255,255,255,1);
}
}BƯỚC 2:
Vào Template đang sử dụng: -> Index Page Templates -> index.
Chép code này vào bất cứ chổ nào bạn muốn :
Code:
<div class="well">
<div class="progress-bar"><img src="images/wellcome.gif"> <strong>Chào Mừng Quý Khách Đến....</strong> <img src="images/wellcome.gif"></div>
</div>Khi muốn điều chỉnh độ lớn nhỏ của font thì tìm tại:
Trích dẫn:.well {Thay thông số nó theo ý bạn
font: bold 18px;
Khi muốn thay hình ảnh thì tìm tại :
Trích dẫn:<img src="images/wellcome.gif">Thay hình theo ý bạn
Xong rồi đó, ra xem trang chủ khi load trang còn buồn chán không nhé.
Theo PCNDL.