TẠO KHUNG CHỨA NỘI DUNG TỰ ĐỘNG THAY ĐỔI ~ Thủ Thuật

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.

Đầ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{<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

Posted in: Thủ Thuật blogspot

Bài Viết Ngẫu Nhiên

Menu

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

0 nhận xét:

Đăng nhận xét

Xem nhiều

Các bài đăng

Yahoo