Thiết kế danh mục bài viết mới nhất theo cấu trúc dạng trượt tức là Silder sẽ đảm bảo blog của bạn trở nên gọn gàng và chuyên nghiệp hơn.
Thủ thuật tạo khung Slider dưới đây được tham khảo bài viết từ Namkna's Blog nhưng để trông đẹp hơn và chuyên nghiệp hơn tôi đã tinh chỉnh một số thông số cấu hình:
Cách thực hiện như sau:
1. Đăng nhập blog và truy cập vào phần chỉnh sửa mẫu > chỉnh sửa HTML
2. Tìm thẻ <head> và dán đoạn mã dưới đây ngay sau thẻ này:
<script language='javascript' src='http://thietkewebplus.googlecode.com/files/Jquery.min.1.5.1.js' type='text/javascript'/>3. Tìm thẻ ]]></b:skin> và dán đoạn mã dưới đây ngay trước thẻ này:
<script language='javascript' src='http://thietkewebplus.googlecode.com/files/Jquery.min.1.3.js' type='text/javascript'/>
<script language='javascript' src='http://thietkewebplus.googlecode.com/files/script.js' type='text/javascript'/>
/* slider bài viết mới nhất/ phần dưới */Tùy chỉnh: chú ý vào các đoạn tô màu, bạn có thể sủa đổi các giá trị đó tùy ý
.main-slider{width:400px; /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 0px;}
.lof-slidecontent { width:650px; /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:black;position:relative; overflow:hidden; border:#ccc solid 0px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:left; background:black}
.preload
div{ height:100%;width:100%; background:transparent
url()
no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden;
background:black;
no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute;
overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:400px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:350px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:px 80px 5px 20px;
color:#fff;
opacity:0.6;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding: 0 0 8px;font-size:12px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:80px; /*chiều cao của list bài viết bên phải*/
width:240px; /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner
li{ cursor:hand; cursor:pointer; list-style:none; padding:0;
margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner
li.active{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSWo4yFis3CiedK3RY4rhQ3VZVPParI-sgYKsJRDDAgk-DVIPOP94yLEUHhG7jE-GVnkLULOiSHXU-mj73SnM8xo4D5BHvN4RRaydRxdt9Tv1ZqU6RkUP2ewkXEzgpZDpmu0yPl__wvZhL/s1600/arrow-bg-namkna-ngoctra.png)
no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner
li.active
div{background:green;
color:#fff;}
ul.navigator-wrap-inner li > div{
background:#800080;
color:#fff;
height:100%;
position:relative;
margin-left:15px;
padding-left:10px;
border-top:0px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:60px; /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px; /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:0px;
border:#C5C5C5 solid 1px;
}
/* slider bài viết mới nhất / phần trên */
5. Lưu mẫu và quay về trang bố cục và thêm một tiện ích HTML/javascript ngay trước khung bài đăng và dán vào khung tiện ích đoạn mã sau đây:
<script type="text/javascript">Tùy chỉnh: Thay đổi các giá trị bị tô màu, trong đó:
$(document).ready( function(){
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeInOutQuad',
duration:500,
auto:true,
mainWidth:600,
mainHeight:300,
navigatorHeight : 80,
navigatorWidth : 240,
maxItemDisplay:4,
buttons:buttons});
});
summaryposts = 30;
numposts = 5;
label = "all lalbel";
home_page = "http://www.caoago.name.vn/";
</script>
<div id="jslidernews" class="lof-slidecontent">
<script src="http://thietkewebplus.googlecode.com/files/jqslidernews.js" type="text/javascript">
</script></div>
duration:500 là tốc độ trượt (giá trị càng nhỏ thì càng nhanh)
auto:true là tự động trượt, nếu giá trị là "true" nghĩa là tự động còn "false" thì không
mainWidth:600, độ rộng của hình ảnh trượt
mainHeight:300, chiều cao của hình ảnh trượt
navigatorHeight : 80, chiều cao của một ô bài viết ở bên phải
navigatorWidth : 240, độ rộng của ô bài viết ở bên phải
maxItemDisplay:4, số bài viết được hiển thị
summaryposts = 30; số ký tự được tóm tắt ở mỗi bài viết
numposts = 5; số bài viết được liệt vào danh sách trượt
http://www.caoago.name.vn thay bằng địa chỉ blog của bạn
7. Lưu tiện ích và kiểm tra nhé
CHÚC BẠN THÀNH CÔNG.
Nếu bạn thực sự quan tâm đến nội dung bài viết xin để lại những ý kiến đóng góp vào khung bên dưới. Mỗi ý kiến đóng góp của độc giả là những chỉ dẫn quý báo để chúng tôi cung cấp những nội dung hữu ích hơn tới độc giả.