Hiển thị các bài đăng có nhãn Thủ thuật blog. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Thủ thuật blog. Hiển thị tất cả bài đăng
Plugin load feed Blogger version 1
Đây là công cụ đặc biệt, có lẽ rất được nhiều người mong đợi. Công cụ này được mình phát triển khi rip blog. Đôi khi bạn thấy các site của pro (HelloXimo) rip chạy rất nhanh và mượt. Tại sao vậy ? Câu hỏi nằm ở function showrecentposts(json) của js mà nhiều blog vẫn đang dùng. Đây là một hàm lọc feed (hay file .xml) của Blogger. Việc sử dụng feed sẽ đem lại tốc độ cao hơn so với dùng biến có sẵn mà mình đã giới thiệu ở một số bài viết trước.
(ViewSource Demo để xem code)
Nhưng đặc điểm bất tiện của hàm này là với mỗi lần callback showrecentposts trong đoạn script ví dụ sau.
title : tiêu đề bài viết.
url : link bài viết.
label: nhãn bài viết.
img: ảnh bài viết
- img.f : file ảnh đầu tiên của bài viết kich thươc full khổ.
- img.i72: file ảnh mặc định của google nếu bạn up lên, hoặc sử dụng các sản phẩm ảnh của google.
content: nội dung toàn bộ bài viết.
snippet : nội dung tóm tắt gồm 120 ký tự.
date: ngày tháng năm gửi bài
- date.d : ngày
- date.m : tháng
- date.y : năm
author: tác giả gửi bài viết.
0
nhận xét
(ViewSource Demo để xem code)
Nhưng đặc điểm bất tiện của hàm này là với mỗi lần callback showrecentposts trong đoạn script ví dụ sau.
<script src="http://www.maphim.net/feeds/posts/default/-/Phim chiếu rạp?max-results=4&orderby=published&alt=json-in-script&callback=showrecentposts ">
</script>
</script>
Ta lại phải đổi tên hàm callback để lấy feed cho một tag mới. Nói khác đi, chúng ta lại phải copy y sì một hàm showrecentposts2, showrecentpost3, showrecentposts4 ...v.vv cho các tag mới.
Vậy, ANCData là gì ? Chắc bạn cũng đoán ra từ VD trên. Nó là một plugin load feed. Nhưng nó chỉ là một hàm callback duy nhất : ancdata. Có vẻ với những ai chưa nghe về load feed sẽ rất khó mường tượng. Nhưng bạn chỉ cần sử dụng ANCData sẽ không cần phải vọc nhiều.
* Thuộc tính.
Vậy, ANCData là gì ? Chắc bạn cũng đoán ra từ VD trên. Nó là một plugin load feed. Nhưng nó chỉ là một hàm callback duy nhất : ancdata. Có vẻ với những ai chưa nghe về load feed sẽ rất khó mường tượng. Nhưng bạn chỉ cần sử dụng ANCData sẽ không cần phải vọc nhiều.
* Thuộc tính.
title : tiêu đề bài viết.
url : link bài viết.
label: nhãn bài viết.
img: ảnh bài viết
- img.f : file ảnh đầu tiên của bài viết kich thươc full khổ.
- img.i72: file ảnh mặc định của google nếu bạn up lên, hoặc sử dụng các sản phẩm ảnh của google.
content: nội dung toàn bộ bài viết.
snippet : nội dung tóm tắt gồm 120 ký tự.
date: ngày tháng năm gửi bài
- date.d : ngày
- date.m : tháng
- date.y : năm
author: tác giả gửi bài viết.
* Sử dụng :
B1: Bạn chỉ cần chèn đoạn mã sau vào sau thẻ <head> hoặc sau <body>
B1: Bạn chỉ cần chèn đoạn mã sau vào sau thẻ <head> hoặc sau <body>
<script src="http://anhnc.googlecode.com/svn/trunk/ANC/data/feed.js"></script> <script>
anc.home ="domain của bạn"; // (mặc định là maphim.net)
anc.post = sô lượng tối đa ; // (mặc định là 100)
anc.img.no = "ảnh hiển thị khi bài viết không có ảnh"; // mặc định là ảnh của maphim.net
</script>
anc.home ="domain của bạn"; // (mặc định là maphim.net)
anc.post = sô lượng tối đa ; // (mặc định là 100)
anc.img.no = "ảnh hiển thị khi bài viết không có ảnh"; // mặc định là ảnh của maphim.net
</script>
B2: Giờ bạn sẽ sử dụng ANCData một cách dễ dàng.
Giả sử mình muốn tạo ra một module có cấu trúc như hình sau.
Giả sử mình muốn tạo ra một module có cấu trúc như hình sau.
Mình chỉ cần viết như sau :
<div class="box">
<h3>Phim hành động mới</h3>
<div class="bcontent">
<script src="http://www.maphim.net/feeds/posts/default/-/Hành động?max-results=4&orderby=published&alt=json-in-script&callback=ancdata">
</script>
<script>
for (var i =0; i< anc.max; i++){
document.write('<li><a href='+anc.url[i]+'>'+anc.title[i]+'</a></li>');
}
</script>
</div>
</div>
<h3>Phim hành động mới</h3>
<div class="bcontent">
<script src="http://www.maphim.net/feeds/posts/default/-/Hành động?max-results=4&orderby=published&alt=json-in-script&callback=ancdata">
</script>
<script>
for (var i =0; i< anc.max; i++){
document.write('<li><a href='+anc.url[i]+'>'+anc.title[i]+'</a></li>');
}
</script>
</div>
</div>
Không chỉ dừng ở đó, bạn có thể tạo nhiều tag giống nhau ngoài tag Hành động kể trên, chỉ với một hàm callback duy nhất. Đây chỉ là VD đơn giản sử dụng ANCData, bạn có thể tạo riêng cho mình các modum hợp lý từ các thuộc tính mình đã đưa.
Version 1 chưa áp dụng cho comment. Sẽ tiếp tục phát triển trong các phiên bản sau nếu có thời gian.
Note: Để gọi các biến trong thuộc tính, bạn cần thêm trước anc.thuoctinh
Muốn lấy một tag trong list tag bạn chỉ cần viết. anc.label.split(',')[vitri tag can lay]
Version 1 chưa áp dụng cho comment. Sẽ tiếp tục phát triển trong các phiên bản sau nếu có thời gian.
Note: Để gọi các biến trong thuộc tính, bạn cần thêm trước anc.thuoctinh
Muốn lấy một tag trong list tag bạn chỉ cần viết. anc.label.split(',')[vitri tag can lay]
Chúc các bạn thành công !
Nguồn: www.fandung.com
Tiện ích 3D Flash Slider cho Blogger
PieceMaker là một trong hai plugin 3D Image Slider nổi tiếng nhất của Wordpress. Trong khi cu3er chỉ dừng ở phiên bản Beta và bắt đầu thu phí trên phiên bản chính thức thì PieceMaker đã có phiên bản 2 và vẫn hoàn toàn miễn phí. Với mục đích đem đến cho Blogger các tiện ích đẹp nhằm "thay đổi cái nhìn", lần này Noct sẽ hướng dẫn cách áp dụng PieceMaker trên Blogspot.
Xem Demo tại đây
Download PieceMaker tại đây.
Tiến hành giải nén file vừa tải về, được một thư mục, trong đó chúng ta chỉ quan tâm tới các file sau:
- swfobject.js
- piecemaker.xml
- piecemaker.css
- piecemaker.swf
Bạn upload các file này lên DROPBOX. Tiếp theo, log in vào Blogger, tạo một widget HTML/Javascript rồi paste đoạn code sau:
Các link màu đỏ chính là các file mà chúng ta vừa upload lên DROPBOX, các giá trị màu xanh là kích cỡ của flash. Save widget.<script src="http://dl.dropbox.com/u/11103024/scripts/swfobject/swfobject.js" type="text/javascript"></script><center><div id="piecemaker">Put your alternative Non Flash content here.</div></center><script type="text/javascript">var flashvars = {};flashvars.cssSource = "http://dl.dropbox.com/u/11103024/piecemaker.css";flashvars.xmlSource = "http://dl.dropbox.com/u/11103024/piecemaker.xml";var params = {};params.play = "true";params.menu = "false";params.scale = "showall";params.wmode = "transparent";params.allowfullscreen = "true";params.allowscriptaccess = "always";params.allownetworking = "all";swfobject.embedSWF('http://dl.dropbox.com/u/11103024/piecemaker.swf', 'piecemaker', '940', '300', '10', null, flashvars, params, null);</script>
Để tùy chỉnh Flash thì chúng ta edit file piecemaker.xml trong thư mục Public bằng Notepad, nó sẽ có một đoạn như thế này:
Bạn chỉ việc thay đổi link ảnh, link feature và phần miêu tả cho phù hợp rồi save lại, nó sẽ tự động được cập nhật lên DROPBOX.<Image Source=".../piecemaker2.png" Title="Lots of new Features"><Text><h1>New hot Features</h1><p>The all new Piecemaker comes with lots of ...</p></Text><Hyperlink URL="http://noct-land.blogspot.com" Target="_blank" /></Image>
Ngoài ra, ta cũng có thể tùy chỉnh các hiệu ứng Slide theo ý thích cũng bằng cách edit piecemaker.xml, chi tiết thì bạn đọc hướng dẫn trên trang chủ chứ mình cũng không thể nói hết ở đây được.
Hiện tại thì mình thấy PieceMaker rất phổ biến bên Wordpress nhưng lại khá khiêm tốn trên Blogger, hy vọng trong tương lai sẽ có nhiều designer sử dụng Flash 3D này trên Blogspot.
Đăng ký:
Nhận xét (Atom)