if you want this paid theme for free Contact Us Get Now!

Create a Category Posts Widget for JagoDesain Themes with AJAX Using Vanilla Javascript

Create a Category Posts Widget for JagoDesain Themes with AJAX Using Vanilla Javascript
marwat
Create a categorized posts widget for JagoDesain templates with AJAX using Vanilla Javascript.


Hello! Welcome to daily technologies

As we know, there is currently no widget in Blogger Layout that allows us to display posts with a specific tag, but we can sort the posts by their tag with an AJAX (Asynchronous JavaScript and XML) call to receive the JSON (JavaScript Object Notation) data. ) from Blog Sources.

Why is Search by Category useful?

It helps your visitors not to search for you as they will find posts from their favorite categories right on the home page. If you're posting articles about products, you can order them and have them appear on the home page. Just add tags and the latest posts with those specific tags will appear.

Does it require the jQuery library?

No it doesn't, it's made with vanilla javascipt and the javascript size is 9.86 KB, but remember it requires @shinsenter's defer.js to lazy load scripts and images. You don't need to worry about that as the package is already added in JagoDesain themes.

Will it work on all templates?

Yes No. Since it is javascript only and the required CSS is already available in all the latest JagoDesain themes, this widget will look good in these themes but not others.

How to make a category posts widget?

Creating a category posts widget won't require much knowledge of HTML, CSS, or JS because I've already designed it for you. What you need to do is implement the codes in the correct place in your Blogger theme XML.

important!

Before you start adding code in XML, I'll recommend that you make a backup of your current theme. By any chance, if any problem occurs, you can restore it later.

Step 1: First of all, login to your Blogger dashboard.

Step 2 – In the Blogger Dashboard, click Theme.

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

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

Step 5: Now find the ]]></b:skin> or /*]]>*/</style> code and paste the following CSS codes just above 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 right 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 according to your needs.

Step 7: Save changes by clicking this icon

Step 8: You are done!



Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
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.
Site is Blocked
Sorry! This site is not available in your country.