Tạo Featured Content Slide bằng tay (dùng cho BlogSpot, uCoz,Wordpress...)

Hiện nay có khá nhiều blog sử dụng chức năng Featured Content (tiếng việt có thể dịch tạm là "Bài viết nổi bật", "Bài viết được quan tâm" gì gì đó :D...). Với những blog sử dụng mã nguồn Wordpress, Joomla... thì việc nhúng chức năng này vào blog khá dễ dàng với các Plug-in hoặc Add-on hỗ trợ sẵn... Tuy nhiên không phải ai cũng biết đến chúng... Và nếu như blog của bạn không sử dụng những platform này thì.... đành chịu sao? Nhưng bạn hãy yên tâm, với các platform như Blogger hay uCoz, bạn cũng có thể làm được Featured Content Slide bằng cách sử dụng mã Javascript và nội dung tự tạo bằng tay, trông cũng có vẻ ấn tượng không kém đâu!



Bạn có thể xem trước demo ở đây. Nếu thấy hài lòng thì bây giờ chúng ta bắt đầu nhé...



Đầu tiên bạn chèn đoạn code sau trước thẻ </head>

<link rel="stylesheet" type="text/css" href="http://demo.b3smile.co.cc/html/featured-content-slider/contentslider.js" />



<script type='text/javascript' src='http://demo.b3smile.co.cc/html/featured-content-slider/contentslider.js'></script>

Sau đó, tìm đến nơi cần hiển thị Featured Content, chèn đoạn code này vào:

<h3 style="margin: 0 0 7px 0; padding: 0 7px 7px 0; color: #000; font-size: 1.4em; font-weight: bold; border-bottom: 1px solid #999999; text-transform: uppercase;font-family:tahoma,verdana,arial">Featured Posts



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



<!--begin: featured_content -->

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



<div class="contentdiv">



<h2><a href="POST URL 1" title="POST TITLE 1">POST TITLE 1</a></h2>



<div class="desc">



<img alt="POST TITLE 1" src="POST IMG THUMBNAIL 1" />POST CONTENT 1</div>



<div class="more"><a href="POST URL 1" title="POST TITLE 1">Read More...</a></div>



</div>



<div class="contentdiv">



<h2><a href="POST URL 2" title="POST TITLE 2">POST TITLE 2</a></h2>



<div class="desc">



<img alt="POST TITLE 2" src="POST IMG THUMBNAIL 2" />POST CONTENT 2</div>



<div class="more"><a href="POST URL 2" title="POST TITLE 2">Read More...</a></div>



</div>



<!-- More post here... --->



</div><!--end: featured_content -->



<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: ["<img width=8 src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cKQ96x0jdO_uncYkDXPzudLLbIJlp9jmDYH6B-ViaW1CAZMtGyzn1DKvJbnCKoMzQdYFuw_6Rzg6WOOM3Y6cbsx5PXpr19wqxWxP4m-1P4cfZpsxeNx2DzWhNNFJXeqzhwpFjfluGxJC/s1600/prev.png' height=7 />", "<img width=8 src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtQ0Rmr4dotwf8lGpVrxXtSuuCtAFhIBaKT8vmyM84AI8vcCGqIe4rvDNizXj28_pQuLjNOmyD4jJNTo-UD7xU1xhw4jM1k2MkEjLbDFnEJRLEl5XsLKbm3yXvm0LWTTqSfYAMydoN5UUs/s1600/next.png' height=7 />"],  //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, 10000],  //[true/false, pausetime]



onChange: function(previndex, curindex){ }



})



</script>

Các thông số cần chỉnh sửa:



Về phần nội dung:

• POST URL 1(2, 3...): liên kết đến bài viết 1 (2, 3...)




• POST TITLE 1 (2, 3...): tiêu đề bài viết




• POST IMG THUMBNAIL 1 (2, 3...): url đến ảnh minh họa cho bài viết




• POST CONTENT 1 (2, 3...): nội dung ngắn gọn mô tả bài viết




• <!-- More post here... --->: bạn có thể chèn thêm nhiều bài viết nữa cho Slide vào đây, nhớ định dạng theo mẫu nằm trong thẻ  <div class="contentdiv">....</div> như trên là được

Về phần hiển thị:

• revealtype: cách chuyển nội dung, có 2 lựa chọn là "click" và "mouseover". Bạn thử từng tùy chọn sẽ thấy kết quả




• enablefade: cho phép có hiệu ứng bóng mờ khi chuyển slide hay không. Giá trị là [true/false, độ mờ]




• autorotate: cho phép tự động chuyển slide hay không. Giá trị là [true/false, thời gian hiển thị từng slide]




• Các thông số còn lại như id, contentsource, toc... bạn nên giữ mặc định hết là được

Download toàn bộ code

http://www.mediafire.com/?vi0yiz56b0lxy12

Chúc các bạn thành công!



Mọi vấn đề thắc mắc xin gửi comment tại đây cho mình nhé. Thanks.