Want more tutorials? Request!

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

Make Categorised Posts Widget for JagoDesain Templates with AJAX using Vanilla Javascript.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

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 .

© Copyright:
www.fineshopdesign.com

Getting Info...

About the Author

Hey there! My name is Deo Kumar aka Dev, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator. I love to Code and create interesting things while playing with it.

Buy me a Coffee

3 comments

  1. 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.
  2. Amazing information brother.
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.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.