Tạo tiện ích bài đăng theo chủ đề với AJAX bằng Vanilla Javascript

Xin chào! Chào mừng bạn đến với iTeam OS.

Như chúng tôi biết, hiện tại không có tiện ích nào trong Bố cục Blogger cho phép chúng tôi hiển thị các bài đăng có nhãn cụ thể nhưng chúng tôi có thể sắp xếp các bài đăng theo nhãn của chúng bằng lệnh gọi AJAX (Asynchronous JavaScript And XML) tới nhận dữ liệu JSON (JavaScript Object Notation) từ Nguồn cấp dữ liệu Blog.

© Fineshop Design | Category Post Widget

Làm cách nào để tạo Tiện ích Bài đăng Danh mục?

Tạo Tiện ích bài đăng theo danh mục sẽ không yêu cầu nhiều kiến ​​thức về HTML, CSS hoặc JS vì tôi đã thiết kế tiện ích này cho bạn. Điều bạn cần làm là triển khai mã ở đúng vị trí trong XML Chủ đề Blogger của mình.

Trước khi bắt đầu, chúng ta hãy xem Bản trình diễn của nó.

Quan trọng!Trước khi chúng ta bắt đầu thêm mã vào XML, tôi khuyên bạn nên Sao lưu mã hiện tại của mình chủ đề. Nếu tình cờ xảy ra bất kỳ sự cố nào, bạn có thể khôi phục lại sau.

Bước 1: Trước hết, hãy đăng nhập vào Trang tổng quan Blogger của bạn.

Bước 2: Trên Trang tổng quan Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển hướng đến trang chỉnh sửa.

Bước 5: Bây giờ hãy tìm kiếm mã ]]></b:skin> hoặc /*]]>*/</ style> và dán các mã CSS ngay bên trên vào đó.

/* Category posts */ .ctgC{margin-bottom:20px} .ctgC.loaded{animation:opaC .5s 0s;-webkit-animation:opaC .5s 0s} .ctgC .blogPg >*{margin-left:auto;margin-right:auto} @keyframes opaC{0%{opacity:0}100%{opacity:1}} @-webkit-keyframes opaC{0%{opacity:0}100%{opacity:1}}

Bước 6: Dán mã Tiện ích Danh sách Văn bản sau ngay sau mã Tiện ích Blog.

<b:widget cond='data:view.isHomepage' id='TextList035' locked='true' title='Categorised Post' type='TextList' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='shownum'>6</b:widget-setting>
    <b:widget-setting name='item-3'>Product</b:widget-setting>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='item-2'>Features</b:widget-setting>
    <b:widget-setting name='item-1'>Art</b:widget-setting>
    <b:widget-setting name='item-0'>Adventure</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <!--[ Categorised Posts by Fineshop Design (fineshopdesign.com) ]-->
    <b:loop index='ctgry' values='data:items' var='item'>
      <div class='ctgW'>
        <h2 class='title'><data:item/></h2>
        <div class='ctgC' data-title='' expr:data-home='data:blog.homepageUrl.canonical' expr:data-label='data:item' expr:id='&quot;categoryId&quot; + data:ctgry'>
          <div class='note'>Loading Posts...</div>
        </div>
      </div>
    </b:loop>
    <script>/*<![CDATA[*/ Defer.js('https://cdn.jsdelivr.net/gh/fineshopdesign/blogger@main/assets/categoryPosts/js/categoryPosts.min.js','cPts-js',10,function(){for(var cId=document.querySelectorAll('[id^=categoryId]'),i=0;i<cId.length;++i){categoryPost({home:cId[i].getAttribute('data-home'),title:cId[i].getAttribute('data-title'),label:cId[i].getAttribute('data-label'),id:cId[i].id,time:'published',ldCl:'loaded',pstNm:6,thmbSize:600,snptLnth:120,pgn:true})};}); /*]]>*/</script>
  </b:includable>
</b:widget>

Thay thế các bộ phận được đánh dấu theo nhu cầu của bạn.

Bước 7: Lưu các thay đổi bằng cách nhấp vào biểu tượng này

Bước 8: hế là xong!

Kết luận

Đây là tất cả về việc tạo Tạo tiện ích bài đăng theo chủ đề với AJAX bằng Vanilla Javascript cho Bài đăng trên Blog. Tôi hy vọng bạn thích bài viết này. Xin vui lòng chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào, hãy hỏi chúng tôi trong hộp nhận xét.

© Copyright:
www.fineshopdesign.com

Truy cập Bypass Google Account APK để tải file APK nhé