Để hiểu rõ hơn, các bạn xem tiện ích phía dưới nha.
Đầ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>
<script src='http://traidatmui-tips.googlecode.com/files/content_slider.js' type='text/javascript'/>
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>
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{<br />
position: relative;<br />
overflow: hidden;<br />
border: 10px solid #000099;<br />
border-bottom-width: 6px;<br />
width: 400px; /*Độ rộng của khung*/<br />
height: 250px; /*Chiều cao của khung*/<br />
}<br />
<br />
.sliderwrapper .contentdiv{<br />
visibility: hidden;<br />
position: absolute;<br />
left: 0;<br />
top: 0;<br />
padding: 5px;<br />
background: #ddd; /*màu nền của khung chứa các nội dung bên trong */<br />
width: 390px; /*Độ rộng của khung chứa các nội dung bên trong */<br />
height: 100%;<br />
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);<br />
-moz-opacity: 1;<br />
opacity: 1;<br />
}<br />
<br />
.pagination{<br />
width: 400px; /*Độ rộng của thanh phân trang bên dưới nội dung*/<br />
text-align: center;<br />
background: #000099; /*Màu nền của thanh phân trang bên dưới nội dung*/<br />
padding: 5px 10px;<br />
}<br />
<br />
.pagination a{<br />
padding: 0 5px;<br />
border:1px solid #fff;<br />
text-decoration: none;<br />
color: #00007D; /*Màu text của thanh phân trang bên dưới nội dung*/<br />
background: #ddd; /*Màu nền của text thanh phân trang bên dưới nội dung*/<br />
}<br />
<br />
.pagination a:hover, .pagination a.selected{<br />
color: #fff;<br />
background: #3333cc;<br />
}<br />
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"><br />
<div class="contentdiv">Nội dung 1 muốn hiển thị nhập vào đây<br />
</div><br />
<div class="contentdiv">Nội dung 2 muốn hiển thị nhập vào đây </div><br />
<div class="contentdiv">Nội dung 3 muốn hiển thị nhập vào đây </div><br />
<div class="contentdiv">Nội dung 4 muốn hiển thị nhập vào đây </div><br />
</div><br />
<div id="paginate-slider1" class="pagination"></div><br />
<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><br />
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
<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
Bài đăng
0 nhận xét