Widget bài viết ngẫu nhiên load siêu nhanh cho Blogspot Kamis, 15 Maret 2018
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>:
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):
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)+"…";};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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1teh0Uw0_yPCkhoCmXUecyro97m98hfUFvLE_nm3XgeaxdXqRN3Y7aK5NLatIHN-4nu0Ip2bRo2yK7XTVSs1lfYxfiOZRzlf4bn6T9WLjtSiAxudpcIxjvJnLyl0I-meulgmvVArp2fo3/"}}};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 !
cmt1
BalasHapusquá dữ
BalasHapus:v
Hapusshare nào chế
Hapushay quá thanks e !
BalasHapushjhj
Hapus<3
BalasHapus<3
HapusCái này người ta gọi là 'quá dữ'
BalasHapus:v
HapusNên để cái lưu ý là: Nhớ sữa khanhblogger.com thành tên miền của các bạn :)
BalasHapusdung roi quen mat :v
Hapusà mà khỏi v, e bỏ luon r, chỉ cần bỏ vào là đc :v
Hapus:v chỉ làm nút ủng hộ tôi đi anh
BalasHapusbottom này bên CODEDAYROI. để a xin phép admin r share cho mn nhá
HapusKhanh ơi ! Làm bài hd về code popular post của temp fb parody của Pc đi
BalasHapuscái đó hỏi a Cường đi bạn chứ mình không lưu CSS gì hết
Hapuskhông chỉ nhẹ mà còn đẹp =))
BalasHapus:v
HapusKhanh thật đẹp trai, hãy như Khanh
BalasHapusNhận xét này đã bị quản trị viên blog xóa.
BalasHapussao đăng nhập vào khanhblogger lại redirect sang blogger hả em :v
BalasHapusthì 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
Hapussao đẹp thế bác :v
BalasHapusbản thân admin đã đẹp thì cái gì cũng cần phải đẹp :v
Hapuscó qua niemstyle xem. khá mượt
BalasHapusthì như mình đã nói ở trên đó bạn
Hapushay đó + demo hay <3
BalasHapusdemo đẹp chứ hay gì :3
HapusRất hay đang dùng lun :)
BalasHapustui thấy r :v ông thêm Roboto vào cho đẹp.
HapusNgon nè
BalasHapusthanks <3
Hapusđẹp đấy em <3
BalasHapusthanks a <3
HapusThêm tiện ích này bị treo trình duyệt.
BalasHapusbạn xem hết bài viết mình có nói đó bạn.
HapusQúa nhanh và quá nguy hiểm =]]
BalasHapushjhj :v
HapusTheme này hay nha, có nhiều cái để bắt chước :D
BalasHapusa Duy hả :v thanks a nha <3
HapusỦa e làm cái ẩn bớt cmt đi rồi đấy à ?
BalasHapusvâng ạ
Hapusload cho nhẹ :p
HapusChờ Khanh làm cái thumbnail group fb để nhếch về mà lâu quá trời :3
BalasHapuschả khác gì cả
HapusQuá hay, 1 share cho bạn.
BalasHapusthanks
Hapusfuck và xin chào :v
BalasHapus:3
HapusHé lô anh Khanh deep trike :v
BalasHapushello bạn
Hapushello bạn
Hapushay quá hay,
BalasHapuscảm ơn
Hapus:V Tương tác với Khanh nè!
BalasHapus(y)
Hapus