Cách tạo Bài viết ngẫu nhiên (Random Post) đơn giản cho Blogspot

cach tao bai viet ngau nhien random post don gian cho blogspot

Tiện ích Bài viết ngẫu nhiên (Random Post) là một cách rất hay giúp bạn có thể gia tăng thời gian ở lại trang của người đọc cũng như có thể giúp những bài cũ của bạn được người đọc chú ý hơn từ đó tăng số lượt xem cho trang của bạn.

Điểm đặc biệt của thủ thuật này là việc nó sẽ không tải toàn bộ những dữ liệu bài viết về mà thay vào đó nó chỉ tải những bài viết cần cho việc hiển thị và chỉ tải một lần duy nhất mà thôi. Do đó, thủ thuật này sẽ không làm ảnh hưởng nhiều đến tốc độ tải trang của bạn.

Bạn hãy xem hình ở bên dưới để xem thủ thuật này như thế nào nhé!

cach tao bai viet ngau nhien random post don gian cho blogspot

Bây giờ, chúng ta cùng bắt đầu thực hiện nào.

Bài viết ngẫu nhiên tốc độ cao

Bước 1. Đăng nhập vào tài khoản Blogger của bạn.

Bước 2. Sao chép đoạn mã Javascript dưới đây vào nơi mà bạn muốn, ví dụ như tiện ích HTML/Javascript của Blogger chẳng hạn,...

<div id='random-posts'>
<h3>BÀI VIẾT NGẪU NHIÊN</h3>
<script type='text/javascript'>
var rdp_numposts=5;
var rdp_info='yes';
var rdp_comment='Nhận xét';
var rdp_disable='Tắt Nhận xét';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javascript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://www.gameiva.com/images/no_image_available_300x300.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</div>

Có một số điểm bạn cần chú ý ở đây:

  • Nếu bạn muốn thay đổi số lượng bài viết hiển thị thì hãy thay số 5 ở trên thành số mà bạn mong muốn.
  • Nếu bạn không muốn hiển thị ngày tháng đăng bài và số nhận xét thì hãy thay chữ yes ở trên thành no là được.
  • Đường dẫn màu đỏ trong đoạn mã Javascript trên chính là hình ảnh thay thế cho những bài viết không có ảnh đại diện.
  • Nếu bạn muốn áp dụng thủ thuật này cho một nhãn nào đó thì hãy thay đoạn mã màu đỏ /feeds/posts/default thành /feeds/posts/default/-/ten-nhan (chú ý là phải ghi tên nhãn chính xác nha bạn).

Bây giờ, thủ thuật này đã hoạt động rồi đó. Nếu bạn muốn trang trí giống như ở trên thì hãy chép đoạn mã CSS dưới đây vào trước thẻ đóng ]]></b:skin> và nhấn vào nút Lưu chủ đề để hoàn tất nhé!

#random-posts {width:500px; padding:20px 20px 10px 20px; background:#22313f}
#random-posts h3 {font-size:18px; font-weight:700; color:#fff}
#random-posts a {font-size:14px; font-weight:700; color:#fff}
#random-posts span {font-size: 13px; color:#999}
#random-posts img {float:left;margin:10px 10px 30px 0;width:72px;height:72px;padding:0}
#random-posts li {list-style-type:none; margin:0 0 20px 0}

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