Widget của tôi chỉ dùng javascript để xử lý feed. Hầu hết các truyện được định dạng khá thẩm mỹ, đảm bảo hiển thị tốt trên các widget. Với widget này, người dùng có thể dễ dàng chọn màu cho tiêu đề truyện, màu nội dung và cỡ chữ toàn bài viết cho phù hợp với dạng theme của blog.
Demo:
Cách làm:
- Tạo một widget HTML/JS. Đặt tên theo ý bạn, ví dụ: Truyện cười chọn lọc...
- Chèn vào đó toàn bộ mã javascript bên dưới đây (Nhớ thay đổi màu tiêu đề truyện (FHeaderColor), màu nội dung (FBodyColor) và cỡ chữ (FFontSize) cho hợp với blog của bạn):
<iframe id="ifrHTMLFunny" name=ifrHTMLFunny frameborder="0" width="98%"></iframe>
<script type="text/javascript">
FHeaderColor = '#336666';
FBodyColor = '#000000';
FFontSize = '12px';
function getRandomPosts(json) {
var maxEntries = 1;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
var entry = json.feed.entry[indexPosts[0]];
var RandomFunny = document.getElementById('ifrHTMLFunny').contentWindow.document;
RandomFunny.open();
RandomFunny.write('<html><head></head><body><p
class="header" style="font-family: Arial, Tahoma, Verdana;color:' +
FHeaderColor + ';font-size: '+ FFontSize +';font-weight:
bold;">'+ entry.title.$t + '</p><div
align="justify" style="font-family: Arial, Tahoma, Verdana;color:' +
FBodyColor + ';font-size: '+ FFontSize +';font-weight:
normal;">' + entry.content.$t +
'</div><p><b>Power by
<a
href="http://www.cuoititon.com">www.cuoititon.com</a><b></p></body></html>');
RandomFunny.close();
}
</script>
<script
src="http://www.cuoititon.com/feeds/posts/default/-/Truy%E1%BB%87n%20c%C6%B0%E1%BB%9Di/?alt=json-in-script&callback=getRandomPosts&max-results=999999"
type="text/javascript">
</script>
Nếu phân tích kỹ đoạn mã trên, các bạn có thể áp dụng cho các trang blog của mình. Hy vọng sẽ được trao đổi thêm với các bạn trong chủ đề khác.
Thân
No comments:
Post a Comment