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.
Có thể liên quan đến chủ đề...
code trang trí tết đẹp nhưng đơn giản
Share code trang trí Noel
share code facebook thụt thò bên phải màn hình
Code tự động ghi nguồn gốc bài viết khi bài viết bị copy!
Thêm trang upanh lên picasa cho mybb
Hướng dẫn Hiện chatbox mọi trang cho mybb
Biến portal.php của MyBB thành một trang index của website
Tạo trang Redirect
Tạo trang Redirect cho mybb
Hướng dẫn khắc phục tình trạng không đăng nhập được khi thay domain trong mybb
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.
Có thể liên quan đến chủ đề...
code trang trí tết đẹp nhưng đơn giản
Share code trang trí Noel
share code facebook thụt thò bên phải màn hình
Code tự động ghi nguồn gốc bài viết khi bài viết bị copy!
Thêm trang upanh lên picasa cho mybb
Hướng dẫn Hiện chatbox mọi trang cho mybb
Biến portal.php của MyBB thành một trang index của website
Tạo trang Redirect
Tạo trang Redirect cho mybb
Hướng dẫn khắc phục tình trạng không đăng nhập được khi thay domain trong mybb
Hãy nhấn Like - Share Nếu Bài Viết Có Ích