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}}<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>Step 7: Save changes by clicking this icon
Step 8: You are done!
Tags:
Blogger Widgets
