All for you: TẠO KHUNG CHỨA NỘI DUNG TỰ ĐỘNG THAY ĐỔI

Tuesday, September 20, 2011

TẠO KHUNG CHỨA NỘI DUNG TỰ ĐỘNG THAY ĐỔI

Posted in NÂNG CAO, TIỆN ÍCH

Với thủ thuật này, các nội dung được hiển thị trong khung sẽ tự động thay đổi theo thời gian, ở mỗi khung các bạn có thể tạo một hoặc nhiều nội dung khác nhau.

Để hiểu rõ hơn, các bạn bấm vào xem thử để trải nghiệm nhat

Xem thử

Đầu tiên, bạn đăng nhập vào Blog > Chọn Chỉnh sửa HTML, sau đó bấm cặp phím Ctrl+F để mở hộp tìm kiếm, gõ vào hộp đó lệnh<head> và dán code phía dưới vào sau dòng lệnh <head>

Tiếp tục, bạn gõ vào ô dòng lệnh: ]]></b:skin> và dán code phía dưới vào trên dòng lệnh ]]></b:skin>

.sliderwrapper{
position: relative;
overflow: hidden;
border: 10px solid #000099;
border-bottom-width: 6px;
width: 400px; /*Độ rộng của khung*/
height: 250px; /*Chiều cao của khung*/
}

.sliderwrapper .contentdiv{
visibility: hidden;
position: absolute;
left: 0;
top: 0;
padding: 5px;
background: #ddd; /*màu nền của khung chứa các nội dung bên trong */
width: 390px; /*Độ rộng của khung chứa các nội dung bên trong */

height: 100%;

filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
width: 400px; /*Độ rộng của thanh phân trang bên dưới nội dung*/
text-align: center;
background: #000099; /*Màu nền của thanh phân trang bên dưới nội dung*/
padding: 5px 10px;
}

.pagination a{
padding: 0 5px;
border:1px solid #fff;
text-decoration: none;
color: #00007D; /*Màu text của thanh phân trang bên dưới nội dung*/
background: #ddd; /*Màu nền của text thanh phân trang bên dưới nội dung*/
}

.pagination a:hover, .pagination a.selected{
color: #fff;
background: #3333cc;
}

Bạn có thể thay thế màu nền, kích thước khung...theo các chú thích ghi trong code
Cuối cùng, bấm Lưu mẫu và trở về thiết kế > thêm tiện ích HTML/Javacript rồi dán các code phía dưới vào

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Nội dung 1 muốn hiển thị nhập vào đây
</div>

<div class="contentdiv">
Nội dung 2 muốn hiển thị nhập vào đây
</div>

<div class="contentdiv">
Nội dung 3 muốn hiển thị nhập vào đây
</div>

<div class="contentdiv">
Nội dung 4 muốn hiển thị nhập vào đây
</div>

</div>

<div id="paginate-slider1" class="pagination"></div>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>

Bây giờ bạn nhập nội dung mà mình muốn hiển thị vào, code này có 4 nội dung, nếu muốn thêm nhiều nội dung hơn thì bạn copy code này

<div class="contentdiv">
Nội dung 4 muốn hiển thị nhập vào đây </div>

dán vào phía dưới sau mỗi dòng nội dung theo mẫu

Nguồn: Trai đất mũi