- 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ượt
nhậ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/JavascriptCopy và Dán đoạn mã dưới đây vào
HTML/Javascript<style type="text/css">
#random-post-load{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdWL8bHY_D22R_vuynQHbsEbhGWJJxw41GPfcbRuHoz2zIwphTrWOJlEgxQdKokA-8-CwVY9vuXX1OALg9tFilcMGBIbiKpNjn_fdoob77QKN_RkbADvQEsO8jYzywB0s67arzkoBtqu8j/s1600/ajax-loader.gif) no-repeat; padding-left:20px;}
#random-post-container ul{padding:0;}
#random-post-container li {
padding:10px 0 10px 0;
list-style:none;
overflow:hidden;
border-top:1px solid #CCC;
}
#random-post-container img {
display:block;
float:left;
margin:2px 7px 5px 0;
}
#random-post-container a {
font-weight:normal;
font-size:100%;
}
#rancom-post-container .clear {
display:block;
clear:both;
}
.categories{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhkPbBPprPccgHubZ5gbjd438r4wx1_LCaCzctmDCPueMUwKzq94Xjw9gR4imywDKHAgUK00RRDdhFW0TKeQyC7lXzMTSQauTKDAo8evbYep5QH4IkbUKmRQ-sDxcodTwxym7Dw5DZ8k/s1600/icon-article-tags.png) 0 center no-repeat;padding:0 0 0 20px;float:left;}
</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/AVvXsEjoX8WlQJRAsWP1WE4D0yWQrcWaa1Bx1AnLzlRJlU-iVG8ljKmTvlhVG2xP9VmF_mPL-SMesketohB8e0byN0UW0rFrAyT_evoJ1QK_M-DuYTCTyHjpbKDSpXHtnkejV5E67sEfv64o2SDX/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ả
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
