Tạo Featured Content bằng tay - 7 September 2010 - All 4 You
Monday, 23-Jan-2017, 2:21 AM
Welcome Guest | RSS
Main » 2010 » September » 7 » Tạo Featured Content bằng tay
9:22 PM
Tạo Featured Content bằng tay



Đầu tiên, bạn chèn đoạn code sau lên trước thẻ <head> trong Site Pages. Ở đây đã cố định kích thước ảnh, và kích thước hiển thị ảnh + phần nội dung. Nếu muốn thay đổi, bạn mở file js bằng Nopated rồi edit lại.

Code 

<link rel="stylesheet" type="text/css" href="http://all4u.dmon.com/CSS/contentslider_noibat.css" />

<script type='text/javascript' src='http://all4u.dmon.com/Js/baivietnoibat.js'></script>


Sau đó, chèn đoạn code sau vào chỗ bạn muốn hiển thị Featured.

Code 

<!-- bat dau bai viet noi bat -->

<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">

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

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

<!-- bai 01 -->

<div class="contentdiv">

<h2><a href="Link bài 1" title="Tiêu đề của bài 1">Tiêu đề bài 1</a></h2>

<div class="desc">

<img alt="Chương trình cộng tác viên" src="Link ảnh bài 1">Nội dung bạn muốn hiển thị</div>

<div class="more"><a href="Link bài 1" title="Tiêu đề của bài 1">Chi tiết…</a></div>

</div>

<!-- bai 02 -->

<div class="contentdiv">

<h2><a href="Link bài 2" title="Tiêu đề bài 2">Tiêu đề bài 2</a></h2>

<div class="desc">

<img alt="Tiêu đề bài 2" src="Link ảnh bài 2">Nội dung bạn muốn hiển thị</div>

<div class="more"><a href="Link bài 2" title="Tiêu đề bài 2">Chi tiết…</a></div>

</div>

<!-- bai 03 -->

<div class="contentdiv">

<h2><a href="Link bài 3" title="Tiêu đề bài 3">Tiêu đề bài 3</a></h2>

<div class="desc">

<img alt="Tiêu đề bài 3" src="Link ảnh bài 3">Nội dung bạn muốn hiển thị</div>

<div class="more"><a href="Link bài 3" title="Tiêu đề bài 3">Chi tiết…</a></div>

</div>

<!-- bai 04 -->

<div class="contentdiv">

<h2><a href="Link bài 4" title="Tiêu đề bài 4">Tiêu đề bài 4</a></h2>

<div class="desc">

<img alt="Tiêu đề bài 4" src="Link ảnh bài 4">Nội dung bạn muốn hiển thị</div>

<div class="more"><a href="Link bài 4" title="Tiêu đề bài 4">Chi tiết…</a></div>

</div>

<!-- bai 05 -->

<div class="contentdiv">

<h2><a href="Link bài 5" title="Tiêu đề bài 5">Tiêu đề bài 5</a></h2>

<div class="desc">

<img alt="Tiêu đề bài 5" src="Tiêu đề bài 5">Nội dung bạn muốn hiển thị</div>

<div class="more"><a href="Link bài " title="Tiêu đề bài 5">Chi tiết…</a></div>

</div>

</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: ["<img width=8 src='http://i.imgur.com/SQ8CX.png' height=7 />"

, "<img width=8 src='http://i.imgur.com/Mvu7G.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>

<!-- /ket thuc bai viet noi bat -->


Hoặc đơn giản hơn, bạn hãy copy lần lượt 2 đoạn code trên rồi paste vào nơi bạn muốn hiển thị Featured.


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

Về phần nội dung:

Thay đổi các thông số cần thiế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

Category: Featured Post - Image Gallery | Views: 559 | Added by: all4u | Tags: Featured Post | Rating: 0.0/0
Total comments: 0
Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page