Cách tạo widget hiển thị bài viết của các blog khác nhau

Thêm mới và định cấu hình tiện ích HTML/JavaScript, thêm id của mỗi blog vào nội dung của tiện ích. Từ id của blog đã thêm gắn vào URL nguồn cấp get trích xuất nội dung hiển post.

Tiếp tục với chủ đề nguồn cấp, bài hôm nay mình giới thiệu các bạn tiện ích hiển thị bài viết của các blog khác nhau. Nếu bạn vẫn chưa hình dung ra thì tiện ích đó sẽ hiển thị bài viết của các blog với mỗi blog lấy bài xuất bản mới nhất, còn số bài viết tùy thuộc bạn sẽ thêm blog giả sử bạn thêm 5 blog tiện ích hiển thị 5 post của 5 blog.

Cách tạo widget hiển thị bài viết của các blog khác nhau
Widget hiển thị 8 bài đăng mới nhất của 8 blog khác nhau

Cụ thể, bạn sẽ thêm mới và định cấu hình tiện ích HTML/JavaScript thêm id của mỗi blog, nếu bạn chưa biết id blog là gì thì đó là một dãy gồm 19 số nằm trên địa chỉ trình duyệt đăng sau tham số "blogID=" khi bạn đăng nhập vào Blogger. Tiếp theo, từ id của blog đã thêm gắn vào URL nguồn cấp get trích xuất nội dung hiển post.

Cách tạo widget hiển thị bài viết của các blog khác nhau

Bước 1: Thêm mới tiện ích HTML/JavaScript

Cách tạo widget hiển thị bài viết của các blog khác nhau
Thêm mới và chèn id blog vào nội dung của tiện ích HTML/JavaScript

Giả sử bạn sẽ thêm tiện ích hiển thị bài viết của các blog khác nhau bên sidebar, ngoài bố cục tiện ích bạn sẽ thêm mới tiện ích HTML/JavaScript, sau đó bạn sẽ thêm id của blog trong Nội dung của tiện ích. Dấu phẩy được thêm giữa các id của blog.

Bước 2: Định cấu hình tiện ích

Cách tạo widget hiển thị bài viết của các blog khác nhau
Định cấu hình tiện ích thêm class data-feed-entry vào thuộc tính data-id vào widget

Trong chỉnh sửa HTML của chủ đề chọn chuyển đến tiện ích vừa thêm mới, mở thẻ <b:includable id='main'> của tiện ích thêm mới hai dòng sau:

<b:attr name='class' value='widget data-feed-entry'/>
<b:attr expr:value='data:content' name='data-id'/>

Luu chủ đề lại khi bạn đã thêm.

Bước 3: Chèn script trước thẻ đóng </body>

<script asyns='asyns' defer='defer' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
<script>//<![CDATA[
window.addEventListener('load',function(){
  var load_feeds=0
  function defer_feed(){
    if(load_feeds==0){
      load_feeds=1
      var widget=$('.data-feed-entry')
      if(widget.length!=''){
        var r=Number($(widget).attr('data-item')),
          cate_id=$(widget).attr('data-id')
          cate_id=cate_id.split(',')
          function feed_entry(e){
            if(e.feed.entry){
              for(var t=0;t<e.feed.entry.length;t++){
                var entry=e.feed.entry[t]
                // Lấy nội dung từ nguồn cấp

                // Tạo element cho post
                var html=''
                // Chèn post vào widget
                $(widget).find('.widget-content').append(html)
              }
            }
          }
          cate_id.forEach(function(m,n){
            $.ajax({
              type:'GET',
              url:'https://www.blogger.com/feeds/'+m+'/posts/default',
              data:{'alt':'json','max-results':1},
              dataType:'jsonp',
              success:feed_entry
            })                 
         })
      }
    }
  }
  window.addEventListener('scroll',function(){defer_feed()})
  window.addEventListener('mousemove',function(){defer_feed()})
  setTimeout(function(){defer_feed()},1000)
})
//]]></script>

Các bạn lấy nội dung trong nguồn cấp trong hàm function feed_entry(e){} ở trên, các bạn xem lại bài viết cũ về Trích xuất nội dung bài viết từ nguồn cấp blog

Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!

Back to Top