Tiện ích Bài viết ngẫu nhiên với ảnh thumbnail (random posts with thumbnail)

     Tiện ích bài viết ngẫu nhiên đã được giới thiệu từ lâu, nhưng có rất ít người dùng, 1 phần là do làm trang blog của bạn load chậm, 1 phần là do giao diện của tiện ích hiển thị không được bắt mắt lắm. Vì lý do đó hôm nay mình sẽ giới thiệu cho các bạn tiện ích random posts khác sẽ khắc phục được 2 vấn đề trên. Và cũng vì 1 lý do nữa là đã từng có 1 bạn yêu cầu xem 1 tiện ích random posts với ảnh thumbnail, nhưng tiện ích bạn đó đưa nhờ mình xem bị lỗi trên IE, tức không hiển thị được ảnh thumbnail.

Bản tiện ích này mình đã làm mới lại từ bản cũ mà đã được giới thiệu từ trước. Như ở trên mình có nói, bản cũ load hơi lâu. Tuy ở bản này thời gian load không được cải thiện, nhưng với 1 chút thủ thuật nhỏ thì việc load tiện ích này sẽ không ảnh hưởng tới việc load các thành phần khác trong blog.
Hình ảnh minh họa:

* Sau đây là các bước thực hiện :
1. vào bố cục
2. Vào phần tử trang và tạo 1 widget HTML/javascript và dán đọan code bên dưới vào :

<style type="text/css">

#random-posts {

width:300px;

}

img#rd-thumb {

float:left;

width: 40px;

height:40px;

margin-right:5px;

border:1px solid #ccc;

padding:2px;

}

img#rd-thumb0 {

float:left;

width: 80px;

height:80px;

margin-right:5px;

border:1px solid #ccc;

padding:2px;

}

#random-posts ul {list-style:none;}

#random-posts li {

height:50px !important;

padding:5px 3px 0 5px;

list-style:none;

}

li#li-rd a, li#li-rd-chan a, li#li-rd-le a {text-decoration:none;}

li#li-rd a:hover, li#li-rd-chan a:hover, li#li-rd-le a:hover {text-decoration:underline;}

li#li-rd {border:1px solid #ddd; background:#f6f6f6;height:90px !important;font-weight:bold;}

li#li-rd-chan {background:#f6f6f6;}

</style>

<div id="random-posts">

<div id='rd-posts-loading'>

<img align="absmiddle" src="https://sites.google.com/site/vietlao2003/home/loading-related.gif" />

</div>

</div>

<script type="text/javascript">

var maxEntries = 5; // Num posts you want displayed

nocmtext = "0 comments";

cmtext = "Comments";

</script>

<script src="http://vietlao2003.googlecode.com/files/rd-post-thumb.js" type="text/javascript"></script>

<script src="http://huunghi-t78.blogspot.com/feeds/posts/default/-/System%20Tool?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

3. Save widget lại.


Lưu ý:

- Để có thể tùy chỉnh dễ dàng code CSS, các bạn xem ảnh minh họa bên dưới :

- Đọan code : /feeds/posts/default/-/System%20Tool nó sẽ cho phép hiển thị các bài viết radom từ 1 nhãn, và cụ thể ở đây là nhãn mang tên System%20Tool, nếu các bạn muốn hiển thị cho cả blog thì thay đọan code đó thành /feeds/posts/default

- Chú ý :
+  Nếu blog càng có nhiều bài viết thì tiện ích load càng lâu, vì thế nếu load cho 1 nhãn thì sẽ nhanh hơn là cho cả blog.
+ Ngòai ra để muốn hiển thị được ảnh thumbnail thì bạn phải điều chỉnh trang feed ở dạng xem đầy đủ
+ Để an tòan, các bạn nên download các hình ảnh và file js về, phòng trường hợp host của mình gặp vấn đề

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

Theo fandung.com