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.
Xem DEMO :

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;
}
#random-posts h3 {
background:url(http://data.fandung.com/blog/demo/rd-post-thumb/img-bg-rd1.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
color:#fff;
}
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"><h3>Random Posts</h3>
<div id='rd-posts-loading'>
<img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/>
</div>
</div>

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

4. Vào chỉnh sửa code HTML
5. Dán đọan code bên dưới vào trước thẻ đóng </body>

- Đọan code : /feeds/posts/default/-/Label 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 Label, nếu các bạn muốn hiển thị cho cả blog thì thay đọan code đó thành /feeds/posts/default
- đọan code ở bước 5 là muốn để cho tiện ích được load sau cùng.
- 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 đủ
6. Save template.
- Lưu ý chung: để 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

<script type="text/javascript">
var maxEntries = 7;
nocmtext = "Chưa có nhận xét nào";
cmtext = "Nhận xét";
</script>
<script src="http://data.fandung.com/blog/demo/rd-post-thumb/rd-post-thumb.js" type="text/javascript"></script>
<script src="/feeds/posts/default/-/Label?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

 copyright IloveYou ViệtNam