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 |
Tại sao Duyệt theo danh mục lại hữu ích?
Nó giúp khách truy cập của bạn không phải tìm kiếm nó vì họ sẽ tìm thấy các bài đăng thuộc danh mục yêu thích của họ trên trang chủ. Nếu bạn đang đăng bài viết trên Sản phẩm, bạn có thể sắp xếp chúng và hiển thị trên trang chủ. Bạn chỉ cần thêm Nhãn và các bài đăng mới nhất có các nhãn cụ thể đó sẽ xuất hiện.
Có yêu cầu thư viện jQuery không?
Không, không phải, nó được tạo bằng Vanilla Javascipt và kích thước của javascript là 9,86 KB nhưng hãy nhớ rằng nó yêu cầu @shinsenter của defer.js để tải chậm tập lệnh và hình ảnh. Bạn không cần phải lo lắng về điều đó vì gói này đã được thêm vào Chủ đề của JagoDesain .
Nó có hoạt động trong tất cả các mẫu không?
Có, không. Vì nó chỉ là javascript và CSS cần thiết đã có sẵn trong tất cả các Chủ đề mới nhất của JagoDesain, tiện ích con này sẽ trông đẹp mắt trong các chủ đề này nhưng không đẹp mắt trong các chủ đề khác.
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='"categoryId" + 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 .
© Copyright:
www.fineshopdesign.com
Truy cập Bypass Google Account APK để tải file APK nhé
Tham gia cuộc trò chuyện