Thêm tiện ích bài viết ngấu nhiên cho blog

 

Một widget bài đăng ngẫu nhiên là một trong những tính năng quan trong trong việc tăng số lần truy cập trang trên blog. Tiện ích, để hiển thị ngẫu nhiên các bài viết trên blogspot. Vì vậy các bài viết cũ mà khách truy cập không thấy được sẽ được mở lại trong tiện ích bài viết ngẫu nhiên.

Nhưng hầu hết các blogger thường nghĩ về việc cài đặt một widger sẽ làm giảm tốc độ tải trang.
Quay trở lại chủ đề chính thủ thuật đơn giản để tạo tiện ích bài đăng ngẫu nhiên nhanh và gọn.

1. Thêm tiện ích bài đăng ngẫu nhiên trên blogspot dạng không có hình ảnh.






  • Đăng nhập vào Blogger
  • Chọn trình đơn Bố cục ⇒Thêm tiện ích ⇒ HTML/Javascript
  • Sao chép và lưu mã bên dưới vào

<style scoped='' type="text/css"> 
#cnttls-random ul{list-style:none;margin:0;padding:0}
#cnttls-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;} 
#cnttls-random li:last-child{border-bottom:0;} 
#cnttls-random li a{color:#444;}
#cnttls-random li a:hover{color:#444;text-decoration:underline} 
</style> 
<div id='cnttls-random'>WebHay.</div> <script> 
//<![CDATA[ 
// Random Post Widget 
var homePage = 'https://vungve.com', 
 maxResults = 10, 
 containerId = 'cnttls-random'; 
function getRandomInt(min, max) { 
                return Math.floor(Math.random() * (max - min + 1)) + min; 
}
function shuffleArray(arr) { 
              var i = arr.length, j, temp; 
              if (i === 0) return false;  
              while (--i) { 
                     j = Math.floor(Math.random() * (i + 1));         temp = arr[i];         arr[i] = arr[j];         arr[j] = temp; 
                            }
                     
                            return arr; 
} 
function cnttlsRandomPosts(json) { 
             var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
            // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
            document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>'); 
} 
function randomPosts(json) { 
           var link, ct = document.getElementById(containerId),         entry = shuffleArray(json.feed.entry),         skeleton = "<ul>"; 
           for (var i = 0, len = entry.length; i < len; i++) { 
                            for (var j = 0, jen = entry[i].link.length; 
                            j < jen; j++) {             link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#'; 
           } 
                           skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>'; 
 } 
                           ct.innerHTML = skeleton + '</ul>'; 
} 
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=cnttlsRandomPosts"></scr' + 'ipt>'); 
//]]> 
</script>


Thay đổi url https://vungve.com thành trang của bạn rồi Lưu tiện ích và xem kết qủa

2. Thêm tiện ích bài đăng ngẫu nhiên trên blogspot dạng có hình ảnh.





Vào chủ đề chính trước hết bạn cần tạo đoạn javascript và đặt chúng ngay trước thẻ đóng </body> 

<script>//<![CDATA[
var randarray = new Array();
var l = 0;
var flag;


function randomposts(json) {
  var total = parseInt(json.feed.openSearch$totalResults.$t, 10);
  for (i = 0; i < numposts;) {
    flag = 0;
    randarray.length = numposts;
    l = Math.floor(Math.random() * total);
    for (j in randarray) {
      if (l == randarray[j]) {
        flag = 1;
      }
    }
    if (flag == 0 && l != 0) {
      randarray[i++] = l;
    }
  }
  for (n in randarray) {
    var p = randarray[n];
    var entry = json.feed.entry[p - 1];
    for (k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        var w = ' thag ';
        var x = ', ';
        var t = entry.published.$t;
        var postPublished = t.substring(8, 10) + w + t.substring(5, 7) + x + t.substring(0, 4);
        var postUrl = entry.link[k].href;
        var postTitle = entry.title.$t;
        var postThumbnail;
            try {
                var postThumbnail = entry.media$thumbnail.url.replace('s72-c', 's1600');
            } catch (error) {
                postThumbnail = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipIISH5hbGtOe33_IwtOSgPzkJzgSBpCK8tkjTv8ENjyaBmDFVJLGxag0FS9qF7ZozRJcAuL-rn_yBXgk1kqAGTu12UndBYt7NOKECgfdzgmRCe0XN3r7AajVnQmei6HqAoml1YEAT13kZ/s1600/safe_image.png';
            }
        var postAuthor = entry.author[0].name.$t;
        var postUri = entry.author[0].uri.$t
        var postSnippet = entry.summary.$t.substring(0, (snippet));
        document.getElementById('random-posts').innerHTML += '<li><div class="post-thumb"><a href=' + postUrl + ' title="' + postTitle + '"><img src=' + postThumbnail + ' alt="' + postTitle + '" /></a></div><h2 class="post-title"><a href=' + postUrl + ' title="' + postTitle + '">' + postTitle + '</a></h2><div class="post-meta"><span class="post-author"><a href=' + postUri + ' title=' + postAuthor + '>' + postAuthor + '</a></span><span class="post-date">' + postPublished + '</span></div><p class="post-snippet">' + postSnippet + '...</p></li>';
      }
    }
  }
}
//]]></script>
<script src='/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=randomposts'/>

Khi tạo xong việc tiếp theo bạn thêm đoạn mã sau vào nơi muốn hiển thị bài viết 

ví dụ trong widget thì bạn chọn thêm 1 tiện ích HTML/Javascript sau đó thêm vào trong phần nội dung: 


<script>var numposts = 5; var snippet = 150;</script><ul id ="random-posts"></ul>




Trong đó:

– 5: là số bài viết muốn hiển thị
– 150: là số từ muốn cắt của đoạn tóm tắt bài viết.


Phần làm đẹp cho bố cục bài viết tức là viết css thì các bạn tự thiết kế theo sở thích của mình, mình đưa ra các class hiển thị của bài viết:


+ Class ảnh: .post-thumb và .post-thumb img
+ Class tiêu đề h2.post-title và h2.post-title a
+ Class meta bao gồm class tác giả và class thời gian: .post-meta, .post-author, .post-date.
+ Class tóm tắt: .post-snippet