Make Category Posts Widget for JagoDesain Themes with AJAX using Vanilla Javascript

Hello! Welcome to Fineshop Design.

As we know there is currently no widget in Blogger Layout that allows us to show posts with specific label, but we can sort posts as per their label with AJAX (Asynchronous JavaScript And XML) call to receive the JSON (JavaScript Object Notation) data from Blog Feeds.

Why is Browse by Category useful?

It helps your visitors not to search for it as they will find their favourite categories' posts on the homepage. If you are posting articles on Products, you can sort them and make it appear on homepage. You just have to add Labels, and the latest posts with those specific labels will appear.

Does it require jQuery library?

No, it does not, it is made using Vanilla Javascipt and the javascript's size is 9.86 KB but remember that it requires @shinsenter's defer.js to lazyload scripts and the images. You don't need to worry about it as the package is already added in JagoDesain's Themes.

Will it work in all templates?

Yes, no. As it is only javascript and the CSS required is already available in all the Latest Themes by JagoDesain, this widget will look good in these themes but not in others.

How to make a Category Posts Widget?

Creating a Category Posts Widget will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.

Before we start let's take a look at its Demo.

View Demo

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.

/* 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}}

Step 6: Paste the following Text List Widget codes just after the Blog Widget codes.

<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>

Replace the marked parts as per your need.

Step 7: Save the changes by clicking on this icon

Step 8: That's done!

Terms of Use

To appreciate our works, consider keeping the credits in codes.

We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.

Conclusion

This is all about making a Categorised Posts Widget for Blog Posts. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.