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

Make Categorised Posts Widget for JagoDesain Templates 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.

Category Post Widget - Blogger
© Fineshop Design | Category Post Widget

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.

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-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:includable id='main'>
    <b:include name='content'/>
  <b:includable id='content'>
    <!--[ Categorised Posts by Fineshop Design ( ]-->
    <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>
    <script>/*<![CDATA[*/ Defer.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>

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.


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 .

© Copyright:

About the Author

~ Hello World!


  1. Plz make tutorial on robot verfiy widget with timer
    1. Not sure, but I shall try.
  2. Bro I want to add this code on my website but post not showing only note loading post showed now what I do Please Response As Soon As And You Can Check My Site My Site Name Techly420
    1. Please read the steps carefully, I have mentioned that you have to go to Theme > Edit HTML, find the Blog Widget Codes and paste it below the widget.
      Don't add the codes through Layout Menu otherwise it may not work.
  3. Hello!
    I like your blog and I suggest 2 tutorials for Blogger:
    1 - Post views counter
    2 - Mini player for blogger

    Your email inbox does not work.
    1. Check out tutorial on Realtime Views Counter by House Of Blogger:
      View Post
  4. Amazing information brother.
    1. Thank you 😊
  5. Nice
    1. Thanks for having visit.
  6. Thank you!
    Worked 🧡
    1. 😊
  7. Nice information
  8. Thanks
  9. I have added all this code perfectly and perfect place, but it doesn't work . What should I do for this reason?
    1. You need to add the XML codes below Blog Widget code in the Edit HTML section.
  10. Hi Fineshop Design, Can you recreate this tutorial for Median UI v1.7?
  11. I'm very thankful for this. I'm really Appreciate your efforts.
    1. Thanks, Buddy!
To avoid SPAM, all comments will be moderated before being displayed.
Don't share any personal or sensitive information.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.