WIDGET BÀI VIẾT NGẪU NHIÊN LOAD SIÊU NHANH CHO BLOGSPOT

Một trong những tiện ích mình kiêng kỵ nhất là Random Posts, bởi tiện ích này tải toàn bộ dữ liệu từ feed về, không những làm chậm tốc độ cho blog mà còn không chính xác với blog có trên 500 bài viết - đây là con số bài viết tối đa được feed tải về. Bởi vậy nhiều Blogger đã e ngại sử dụng tiện ích này.
Trong tiện ích mình giới thiệu sau đây được lấy JS từ tiền bối Duy Phạm thay vì 1 lần tải toàn bộ feed thì mình tải lần lượt theo số bài viết muốn hiển thị và chỉ lấy duy nhất 1 bài trong 1 lần tải. Trước đó sẽ có 1 lần tải dữ liệu đầu tiên từ feed để xác định tổng số bài viết hiện có, 1 hàm lấy ngẫu nhiên 5 số khác nhau từ 1 đến tổng số bài viết. Ví dụ muốn hiển thị 5 bài viết ngẫu nhiên thì sẽ có 6 lần tải feed, mặc dù số lần lấy nhiều nhưng dung lượng 1 lần lấy lại nhỏ. Khối lượng chỉ tương đương với blog bạn có tổng số bài viết là 6, so sánh vậy để thấy nếu blog càng nhiều bài viết thì tiện ích này có tốc độ nhanh hơn kiểu tải toàn bộ feed rất nhiều lần




Các bước thực hiện
Bước 1: Đăng nhập Blogger > Chủ đề  > Chỉnh sửa HTML > Chèn CSS dưới đây vào dưới thẻ <style>:
#random-posts img{float:left;margin-right:10px; background:#FFF;width:50px;height:50px; border-radius: 50%}
.li_rd_post_tkn {margin-bottom: 7px!important; list-style: none; line-height: 23px; padding: 0!important; margin-top: 0!important; margin-left: 0!important; margin-right: 0!important}
.a_rd_post_tkn {
color: #000!important;
text-decoration: none!important;
font-family: Roboto;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.svc_rd_post {
font-size: 14px;
font-family: Roboto;
font-weight: 400;
color: #878787;
padding-top: 3px;
}
.rcs_tkn1 {
background: #f4f4f4;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
border-radius: 13px;
}
.lifatkn { padding-left: 10px;
padding-right: 1px;}

Bước 2: Chèn đoạn code sau vào vị trí muốn hiển thị trong HTML blogspot: (Hoặc bạn có thể vào Bố cục > Thêm tiện ích > HTML/Javascript, chèn đoạn code dưới vào):
<ul id='random-posts' style='margin: 0!important; padding: 0!important'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='bình luận';
var rdp_disable='Tắt bình luận';
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){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};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;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};document.write('<li class="li_rd_post_tkn">');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a class="a_rd_post_tkn" href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<div class="svc_rd_post"><span class="rcs_tkn1">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+'</span> <i class="fa fa-comments lifatkn" aria-hidden="true"></i> <span class="time_tkn1">'+rdp_commentsNum)+'</span></div>'}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>
</ul>

Bước 3: Lưu chủ đề và hưởng thụ.
Bây giờ bạn sẽ không còn e ngại bởi tốc độ load trang khi sử dụng random post nữa nhé !
Chúc các bạn thành công !
Tác giả: Lê ANh Đức

Tôi là Đức, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Admin của trang web này đã qua đời ! Hãy để lại một comment để thể hiện lòng biết ơn, tiếc thương đối với người đã mất. Chúng tôi hy vọng những người yêu quý Lê Anh Đức sẽ cảm thấy được an ủi khi truy cập trang web này, cùng nhớ lại và tôn vinh cuộc đời của anh ấy. Cảm ơn rất nhiều !!!
    ^_^
    =r
    :))
    ;)
    =))
    :((
    <3
    ==
    :v
    :)
    :(
    :*
    :D
    (yy)
    (y)
    =hi
    :P
    =s
    =ok
    =clap
    =he
    =hl
    =hr
    :-)
    =hup
    =hd
    =l
    =ht
    =aa
    =no
    =hum
    =haizz
    =ask

    63 nhận xét:

    1. Cái này người ta gọi là 'quá dữ'

      Trả lờiXóa
    2. Nên để cái lưu ý là: Nhớ sữa khanhblogger.com thành tên miền của các bạn :)

      Trả lờiXóa
      Trả lời
      1. à mà khỏi v, e bỏ luon r, chỉ cần bỏ vào là đc :v

        Xóa
    3. :v chỉ làm nút ủng hộ tôi đi anh

      Trả lờiXóa
      Trả lời
      1. bottom này bên CODEDAYROI. để a xin phép admin r share cho mn nhá

        Xóa
    4. Khanh ơi ! Làm bài hd về code popular post của temp fb parody của Pc đi

      Trả lờiXóa
      Trả lời
      1. cái đó hỏi a Cường đi bạn chứ mình không lưu CSS gì hết

        Xóa
    5. không chỉ nhẹ mà còn đẹp =))

      Trả lờiXóa
    6. Khanh thật đẹp trai, hãy như Khanh

      Trả lờiXóa
    7. Nhận xét này đã bị quản trị viên blog xóa.

      Trả lờiXóa
    8. sao đăng nhập vào khanhblogger lại redirect sang blogger hả em :v

      Trả lờiXóa
      Trả lời
      1. thì nó là đăng nhập blogger mà. khi a đăng nhập rồi mà click vào đăng nhập nữa là nó tự chuyển sang blogger. còn nếu a là admin khanh blogger đăng nhập vô là nó chuyển sang blogger - khanh blogger

        Xóa
    9. Trả lời
      1. bản thân admin đã đẹp thì cái gì cũng cần phải đẹp :v

        Xóa
    10. Trả lời
      1. thì như mình đã nói ở trên đó bạn

        Xóa
    11. Trả lời
      1. tui thấy r :v ông thêm Roboto vào cho đẹp.

        Xóa
    12. Thêm tiện ích này bị treo trình duyệt.

      Trả lờiXóa
      Trả lời
      1. bạn xem hết bài viết mình có nói đó bạn.

        Xóa
    13. Theme này hay nha, có nhiều cái để bắt chước :D

      Trả lờiXóa
    14. Ủa e làm cái ẩn bớt cmt đi rồi đấy à ?

      Trả lờiXóa
    15. Chờ Khanh làm cái thumbnail group fb để nhếch về mà lâu quá trời :3

      Trả lờiXóa
      Trả lời
      1. https://static.xx.fbcdn.net/rsrc.php/v3/yk/r/LOOn0JtHNzb.gif
        đó a :v

        Xóa
      2. nhầm :v cái này nè a :v
        https://scontent.fdad3-2.fna.fbcdn.net/v/t1.0-0/p480x480/29389211_2004858806501513_2667822316049661952_o.jpg?oh=d3d16c0ee1f3bc18265baa310cf49247&oe=5B31FE6C

        Xóa
      3. sao ko hiện nhỉ
        https://i.imgur.com/a8tnGU5.jpg

        Xóa
      4. Cái này cho rõ
        https://imgur.com/a/PeEiy.png

        Xóa
      5. Méo hiện :v
        https://i.imgur.com/0yRYBPb.png

        Xóa

    Một số lưu ý khi bình luận

    Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

    Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

    Để bình luận một đoạn code, hãy mã hóa code trước nhé !