[HD] Tiện ích bài viết ngẫu nhiên cho Blogger

- Việc hiển thị một danh sách bài viết ngẫu nhiên cho blogger cũng là một cách để thu hút người xem và giúp bạn khơi dậy các bài viết đã bị chôn sâu theo thời gian khi blog của bạn có quá nhiều bài viết, với tiện ích này nó giúp cho những người mới tham gia vào blog của bạn dễ dàng hơn trong việc tìm kiếm nội dung. Bên cạnh đó cũng góp phần làm cho blog của bạn trở nên chuyên nghiệp hơn.
Trong hướng dẫn này, xin chia sẽ với bạn một cách để hiển thị bài viết ngẫu nhiên cho blogger, nó là một tiện ích giúp hiển thị 1 danh sách các bài viết ngẫu nhiên cho blogger.
- Ưu điểm của tiện ích này là nó có thể dễ dàng tùy chỉnh và tốc độ tải khá nhanh, bên cạnh việc hiển thị hình ảnh thu nhỏ (thumbnail), còn có thể tùy chỉnh tiện ích để hiển thị thêm tên tác giả, ngày tháng, lượtnhận xét (comments), mô tả bài viết và nhãn (labels) của bài viết như hình dưới đây

[Random Post Widget] Tiện ích bài viết ngẫu nhiên cho Blogger

Nếu bạn là người mới sử dụng blogger và muốn có một tiện ích như hình trên cho blog của bạn? Chỉ cần làm theo các bước dưới đây:

Tiện ích bài viết ngẫu nhiên cho Blogger

- Đăng nhập vào tài khoản Blogger >> Bố cục >> Thêm tiện ích >> HTML/Javascript
Copy và Dán đoạn mã dưới đây vào HTML/Javascript

01	<style type="text/css">

02	#random-post-load{background:url(http://1.bp.blogspot.com/-2oJZT1D_IdU/VBj0TRf2EUI/AAAAAAAACH0/PVf_s0ifMrw/s1600/ajax-loader.gif) no-repeat; padding-left:20px;}

03	#random-post-container ul{padding:0;}

04	#random-post-container li {

05	padding:10px 0 10px 0;

06	list-style:none;

07	overflow:hidden;

08	border-top:1px solid #CCC;

09

}

10	#random-post-container img {

11	display:block;

12	float:left;

13	margin:2px 7px 5px 0;

14

}

15	#random-post-container a {

16	font-weight:normal;

17	font-size:100%;

18

}

19	#rancom-post-container .clear {

20	display:block;

21	clear:both;

22

}

23	.categories{background:url(http://2.bp.blogspot.com/-H_9Y0VCbjY8/VCAqwUaopUI/AAAAAAAACIU/UwHMsTW7yh4/s1600/icon-article-tags.png) 0center no-repeat;padding:0 0 0 20px;float:left;}

24

</style>

<div id='random-post-container'>
     <div id="random-post-load">Đang tải dữ liệu...</div>
</div>

<script type="text/javascript">
var homePage = 'http://www.nhatchanh.info', //Địa chỉ Blog của bạn
    maxResults = 5, //Số bài viết hiển thị
    author_date_commentShow = true; //Hiển thị tên Tác giả + Ngày tháng + Nhận xét
    authorShow = true, //Hiển thị tên tác giả
    commentName = 'Nhận xét',
    thumbnail = true, //Sử dụng hình thumbnail
    imgSize = 72, //Kích thước hình thumbnail
    noImageUrl ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtSluYrg69vh0Fv_HZgrlz4lp9flCcUL2c7bN_flz-ZAIUGJyA5byE41ccnGGbEUFbwFrUFt4yuq7q7YJd-9_aB_b6IqCtkH_TpIJIV8guBPEabbDcyw6BPcccoEM1WrvtSa2QLq2tJ9i_/s1600/default.gif',
    summaryShow = true, //Hiển thị nội dung tóm tắt
    summaryLength = 180, //Số ký tự hiển thị cho nội dung tóm tắt
    labelShow = true, //Hiển thị nhãn label
    maxResultsLabel = 10, //Số bài viết trả về của nhãn
    containerId = 'random-post-container';
</script>
<script type="text/javascript" src="https://googledrive.com/host/0BwL0KbT-xOaTYllCYnpYQVNJVTg/"></script>

- Lưu lại và xem kết quả

Xem Demo hoặc Demo Jsfiddle.net

Tùy chỉnh tiện ích

+ homePage = 'http://www.nhatchanh.info' Thay thế bằng địa chỉ blog của bạn
+ maxResults = 5 Số bài viết cần hiển thị
+ author_date_commentShow = true Hiển thị tên tác giả, ngày tháng và nhận xét (true:có |false:không)
+ authorShow = true Hiển thị tên tác giả
+ thumbnail = true Hiển thị hình ảnh thu nhỏ (thumbnail) (true:có | false:không)
+ imgSize = 72 Kích thước hình thumbnail
+ summaryShow = true Hiển thị nội dung tóm tắt (true:có | false:không)
+ summaryLength = 180 Số ký tự hiển thị cho nội dung tóm tắt
+ labelShow = true Hiển thị nhãn(label) bài viết (true:có | false:không)
+ maxResultsLabel = 10 Số bài viết trả về của nhãn

Hy vọng với tiện ích này sẽ giúp cho blog của bạn trở nên thú vị hơn :D