Tạo nội dung trượt với Blockster - 15 October 2010 - All 4 You
Sunday, 26-Mar-2017, 3:40 AM
Welcome Guest | RSS
Main » 2010 » October » 15 » Tạo nội dung trượt với Blockster
10:35 AM
Tạo nội dung trượt với Blockster

Blockster - plugin nhỏ sử dụng jQuery giúp chúng ta tạo ra các featured content với hiệu ứng chuyển động tương đối đẹp.

Xem Demo Tải file về

Blockster hoạt động khá đơn giản. Nó sẽ tự lấy ra các thẻ <div> con bên trong một thẻ <div> cha và lần lượt hiển thị theo thứ tự. Tuy nhiên Blockster cho phép chỉnh cấu hình để hiển thị ngẫu nhiên.

Cách sử dụng :

Các chuyển động được tùy chỉnh bằng việc định nghĩa ra số lượng của dòng và cột, tốc độ. Đầu tiên ta phải có jQuery vào bỏ vào thẻ <head> theo cách sau ( vì trong plugin có đoạn google.setOnLoadCallback(function() { nên bạn phải gọi jQuery qua google jsapi ):

Code
<script src='http://www.google.com/jsapi'></script>
<script>google.load('jquery', '1.4.2');</script>
<script src='http://all4u.dmon.com/Js/blockster.js'></script>
<script>google.setOnLoadCallback(function() 
{
new Blockster({
holder: '#slidesHolder',
rows: 4,
cols: 6,
random: true
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://all4u.dmon.com/CSS/demo_CSS.css" />
<div id='slidesHolder'>
<div class='fr_slide1'><div><h5>Title 1</h5><p>ND 1 <a href='#'>read more</a></p>
</div></div>
<div class='fr_slide2'><div><h5>Title2</h5><p>ND 2 <a href='#'>read more</a></p>
</div></div>
<div class='fr_slide3'><div><h5>Title3</h5><p>ND 3 <a href='#'>read more</a></p>
</div></div> </div>

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



Category: Featured Post - Image Gallery | Views: 1059 | Added by: all4u | Rating: 0.0/0
Total comments: 3
3  
*' is a catch all. Your css looks really<a href="http://cjrngfdxub.com"> wkechad</a> by all the amazon styuuf.Try *{border:solid #FFF 0px;}near the end of the style tag after all css classes.

2  
Maybe try to use percentages, and leave a liltte room between them (maybe 45%, 25%, 25%). Different browsers display things a liltte differently and the percentages will keep it constant for whoever brings up your page.Just so you know, right now I'm looking at a canon press banner on the left top of your page (under your title and your conference notice) with white space all underneath it to the very bottom of the page. To the right of it is your theologia banner with your most recent post starting directly on top of it. your posts go down the page until they stop and then your usual right sidebar stuff is underneath that and continues to the bottom of the page. Its been like that for a couple of days now. I don't know if its you or me (none of the other blogger sites I visit look like this though). Also, do you mean why is ther a margin space, or do you see an actual border? if you are talking about margin space then I think using the percentages might help you out there. I could e-mail you my template if you want to look it over for differences. sorry i can't be more of a help, I pretty much have to trial-and-error it every time I want to make changes.

1  
Các bạn có thể xem thêm tại đây: http://dhtp5.dmon.com

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