Plus Ui Templete Category Posts Widget

Step: 1

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

Now search the code Middle Post Ad 01 and paste the following Codes just above to it.

<b:widget cond='data:view.isHomepage' id='TextList035' locked='true' title='Categorised Post' type='TextList' version='2' visible='true'> <b:includable id='main'> <b:include name='content'/> </b:includable> <b:includable id='content'> <b:loop index='ctgry' values='data:items' var='item'> <div class='ctgW'> <h2 class='ctg-title'><data:item/></h2> <!--[ Categorised Posts ADS Start ]--> <center> <div style='max-width:700px;max-height:250px;margin-bottom:10px;'> <!--[ Ads code here ]--> </div> </center> <!--[ Categorised Posts ADS End ]--> <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:9,thmbSize:600,snptLnth:120,pgn:true})};}); /*]]>*/</script> </b:includable> </b:widget>