Mình sẽ giải thích sơ về cách thức này. Giả sử ta có 1 tấm ảnh và 1 tờ giấy màu (màu đen chẳng hạn, và kích thước tờ giấy màu sẽ lớn hơn tấm ảnh), sau đó ta cắt 1 cái lỗ hình vuông trên tờ giấy màu, kích cỡ tùy ý (giả sử 200x200px). Rồi ta đặt tờ giấy màu trên tấm ảnh, khi đó ta sẽ nhìn được 1 phần tấm ảnh qua cái lỗ mà ta đã cắt trên tờ giấy màu. Và phần ảnh ta thấy được này sẽ là ảnh thumbnail. Để tùy chỉnh vùng ảnh để hiển thị ảnh thumbnail thì ta chỉ việc dịch chuyển tờ giấu hoặc dịch chuyển ảnh.
Ảnh thumbnail lấy được:
* Các bước thực hiện:
- đầu tiên các bạn chèn code CSS bên dưới vào trong code template (chèn vào trước dòng code ]]></b:skin> trong code template)
div.thumb{
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
div.thumb {
display:block;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
div.thumb img{
position:absolute;
top:-20px;
left:-50px;
}
/* END CSS thumbnail */
+ Các top, left trong class div.thumb img chính là vị trí góc trái trên của ảnh thumbnail (so với ảnh gốc).
+ Khi muốn hiển thị ảnh thumbnail thì bạn chỉ việc dùng code tương tự như bên dưới
Chúc các bạn thành công.
cách này hay nhưng có một khuyết điểm là đôi khi hình ảnh bị khuyết đi nhìn xấu và rất khó hiểu
Hay quá, để mình áp dụng thử xem
đúng rồi, với các ảnh có chiều cao và rộng quá lệch nhau thì dễ bị khuyết.
chuyển ảnh thành CSS trực tuyến >>> http://www.imgtocss.com
@MoigioiForex.Com : woah. hay thiệt
Cái propage dành cho label của Dzũng ấy, làm sao để nó chỉ hiện ở trang label mà không hiện ở trang chủ vậy ??
Rồi còn cái kiểu xem "Full/List" nữa :D
Đăng thằng bài đi, mình viewsource cũng làm đc rồi, nhưng lại phải dò lại các thành phần để chỉnh nó theo style của mình :D
Dzũng ơi, fix cái lỗi hiện phân trang của propage ở trên đầu đi
IE và Opera bị vậy nên độc giả mỗi lần muốn qua trang phải cuộn ngược lên, khi xem các bài thì dĩ nhiên là phải dò xuống, xong lại phải cuộn ngược lên để qua trang
Trong CSS của Dzũng có cái -khtml.... là gì thế ??
Dzũng ơi, xem dạng list thì phải cho lượng bài viết hiển thị nhiều gấp 5 lần mới đúng chớ
Chỉnh lèm seo ?
Dzũng ui, label của mình nó vẫn hiện bài của theme http://home.blogtruyen.com/search/label/Truyen%20Full
Xong òy , mừng quá :D
Giá Dzũng cũng thức đêm giống mình thì đỡ khổ nhỉ :D
Những khúc mắc nãy giờ hỏi chỉ còn 2 cái không giải quyết đc :
1. dạng list show nhiều post hơn
2. phân trang lộn lên đầu ở IE và Opera :D
Còn về thủ thuật này thì cũng thú vị đấy, chỉ có mỗi cái css ovewflow và position mà Dzũng cũng biến hẳn thành một thủ thuật được ;))
(comments câu cuối để hợp thức hóa mớ comments nãy giờ =)))
Bác Ngân tự sướng ghê quá :D, trình độ thức đêm của bác thật ghê gớm, mình tới 1h là mờ mắt rồi. Anh Dũng cũng làm 1 bài hướng dẫn cho bà con cái này chứ nhỉ ;;)
@Ngân: cái đoạn này là để hiển thị bài viết dạng list nè
if (view=="full") {
var numposts = 15; // số bài viết hiển thịt trên 1 trang
}
else {var numposts = 20;}
số 20 đó, Ngân tập đọc lệnh đi, nếu view có giá trị là full thì số bài viết là 15, ngoài ra (tức là view có giá trị là list) thì số bài viết sẽ là 20
ặck, comment thiếu rồi sai tè le. thôi kệ
Còn cái nữa, ProPage này mình sẽ hướng dẫn chi tiết sau khi bản ProPage 1 được post lại
Cái propage này của bác là lấy dữ liệu từ feed để hiển thị phải k? Và hình như phải lôi hết feed về?
p/s: nếu dùng ảnh trên Picasa thì thêm s72, s100... vào link ảnh cũng resize theo kiểu này nhưng dung lượng ảnh giảm đi.
Em comment bằng tài khoản Blogger hình như toàn vào spam hay sao ý nhỉ, có chèn code gì đâu :-/
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.