Why Should We Use Category Posts?
Using Category Posts helps your visitors find what they are looking for more easily. They don’t need to search manually, as posts from their favorite categories will appear directly on the homepage.
For example, if you are posting articles about Products, you can organize them into specific categories and make them appear on the homepage. All you need to do is add Labels, and the latest posts with those specific labels will automatically appear.
How to Make a Category Posts Widget?
Creating a Category Posts Widget does not require much knowledge of HTML, CSS, or JavaScript because I have already designed it for you. All you need to do is implement the codes in the correct place within your Blogger Theme XML.
Important!
Before we start adding codes in XML, I recommend taking a backup of your current theme.
By chance any problem occurs, you can restore it later.
- First of all, login to your Blogger Dashboard.
- On Blogger Dashboard, click Theme.
- Click the arrow down icon next to 'Customize' button.
- Click Edit HTML, you will be redirected to the editing page.
- Paste the following HTML/JavaScript Widget codes just after the Blog Widget codes.
Now add the following JavaScript just above the
</body>tag. If you don't find it, it is probably already parsed which is</body>.Save the changes by clicking on this icon
- That's done!
<b:widget cond='data:view.isHomepage' id='HTML2' locked='true' title='Category Posts' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>Place the post you want to show here</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!--[ Categorised Posts - 1 ]-->
<b:if cond='data:title != ""'>
<h2 class='title dt'>
<data:title/>
</h2>
</b:if>
<div class='ctgry'>
<div class='note'>Loading Posts...</div>
<script>const ctgryLb1 = '<data:content/>';</script>
</div>
</b:includable>
</b:widget>If you want to use multiple category posts then use this code
<b:widget cond='data:view.isHomepage' id='HTML2' locked='true' title='Category Posts' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>Place the post you want to show here</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!--[ Categorised Posts - 1 ]-->
<b:if cond='data:title != ""'>
<h2 class='title dt'>
<data:title/>
</h2>
</b:if>
<div class='ctgry'>
<div class='note'>Loading Posts...</div>
<script>const ctgryLb1 = '<data:content/>';</script>
</div>
</b:includable>
</b:widget>
<b:widget cond='data:view.isHomepage' id='HTML3' locked='true' title='Category Posts 2' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>Place the post you want to show here</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!--[ Categorised Posts - 2 ]-->
<b:if cond='data:title != ""'>
<h2 class='title dt'>
<data:title/>
</h2>
</b:if>
<div class='ctgry'>
<div class='note'>Loading Posts...</div>
<script>const ctgryLb2 = '<data:content/>';</script>
</div>
</b:includable>
</b:widget><!--[ Category Posts by EmadulAi (www.emadulai.in) ]-->
<script><b:eval expr='"const blogUrl='" + data:blog.canonicalHomepageUrl + "';"'/>/*<![CDATA[[*/ /*! Category Posts by EmadulAi */ var _0xfa28=["\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x72\x65\x6D\x6F\x76\x65","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x64","\x61\x73\x79\x6E\x63","\x73\x72\x63","\x6F\x6E\x6C\x6F\x61\x64","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x4D\x73\x78\x6D\x6C\x32\x2E\x58\x4D\x4C\x48\x54\x54\x50","\x4D\x69\x63\x72\x6F\x73\x6F\x66\x74\x2E\x58\x4D\x4C\x48\x54\x54\x50","\x53\x6F\x6D\x65\x74\x68\x69\x6E\x67\x20\x77\x65\x6E\x74\x20\x77\x72\x6F\x6E\x67\x21","\x77\x61\x72\x6E","\x6F\x6E\x72\x65\x61\x64\x79\x73\x74\x61\x74\x65\x63\x68\x61\x6E\x67\x65","\x72\x65\x61\x64\x79\x53\x74\x61\x74\x65","\x73\x74\x61\x74\x75\x73","\x72\x65\x73\x70\x6F\x6E\x73\x65\x54\x65\x78\x74","\x73\x75\x63\x63\x65\x73\x73","\x66\x75\x6E\x63\x74\x69\x6F\x6E","\x65\x72\x72\x6F\x72","\x47\x45\x54","\x75\x72\x6C","\x6F\x70\x65\x6E","\x73\x65\x6E\x64","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x63\x64\x6E\x2E\x6A\x73\x64\x65\x6C\x69\x76\x72\x2E\x6E\x65\x74\x2F\x67\x68\x2F\x74\x61\x6E\x76\x69\x72\x2D\x75\x6C\x31\x30\x2F\x66\x69\x6E\x65\x73\x74\x61\x70\x40\x6D\x61\x69\x6E\x2F\x43\x61\x74\x65\x67\x6F\x72\x79\x50\x6F\x73\x74\x2E\x6D\x61\x69\x6E\x2E\x6A\x73","\x63\x74\x67\x72\x79\x5F\x6A\x73","\x62\x6F\x64\x79","\x48\x54\x4D\x4C\x32","\x23\x48\x54\x4D\x4C\x32\x20\x2E\x63\x74\x67\x72\x79","\x48\x54\x4D\x4C\x33","\x23\x48\x54\x4D\x4C\x33\x20\x2E\x63\x74\x67\x72\x79"];function getid(_0xc465x2){return document[_0xfa28[0]](_0xc465x2)}function qSel(_0xc465x2){return document[_0xfa28[1]](_0xc465x2)}function addCt(_0xc465x2,_0xc465x5){return _0xc465x2[_0xfa28[3]][_0xfa28[2]](_0xc465x5)}function remCt(_0xc465x2,_0xc465x5){return _0xc465x2[_0xfa28[3]][_0xfa28[4]](_0xc465x5)}function ldJs(_0xc465x2,_0xc465x5,_0xc465x8,_0xc465x9,_0xc465xa){const _0xc465xb=document[_0xfa28[6]](_0xfa28[5]);_0xc465xb[_0xfa28[7]]= _0xc465x5,_0xc465xb[_0xfa28[8]]= _0xc465x8,_0xc465xb[_0xfa28[9]]= _0xc465x2,_0xc465xa&& (_0xc465xb[_0xfa28[10]]= _0xc465xa),qSel(_0xc465x9)[_0xfa28[11]](_0xc465xb)}var Pu={gAj:function(_0xc465x2){var _0xc465xa= new XMLHttpRequest;try{_0xc465xa= new XMLHttpRequest}catch(t){try{_0xc465xa= new ActiveXObject(_0xfa28[12])}catch(t){try{_0xc465xa= new ActiveXObject(_0xfa28[13])}catch(t){return console[_0xfa28[15]](_0xfa28[14]),!1}}};_0xc465xa[_0xfa28[16]]= function(){var _0xc465x8;4== _0xc465xa[_0xfa28[17]]&& (200== _0xc465xa[_0xfa28[18]]?(_0xc465x8= _0xc465xa[_0xfa28[19]],_0xc465x2[_0xfa28[20]](_0xc465x8)):_0xfa28[21]== typeof _0xc465x2[_0xfa28[22]]&& _0xc465x2[_0xfa28[22]](_0xc465xa))},_0xc465xa[_0xfa28[25]](_0xfa28[23],_0xc465x2[_0xfa28[24]],_0xc465x2[_0xfa28[8]]),_0xc465xa[_0xfa28[26]]()}};Defer(function(){ldJs(_0xfa28[27],_0xfa28[28],!0,_0xfa28[29],function(){getid(_0xfa28[30])!= null&& (ctgryPst(ctgryLb1,_0xfa28[31],6,600,200,true));getid(_0xfa28[32])!= null&& (ctgryPst(ctgryLb2,_0xfa28[33],6,600,200,true))})},100) /*]]>*/</script>Terms of Use
To appreciate our works, consider keeping the credits in codes.
We don't allow rewriting this post in any manner. Do not copy this post, codes, or any part of this article without permission. It is strictly prohibited. Legal actions will be taken if violated.
Conclusion!
That’s all about adding the Category Posts Widget in Blogger Easily in your Blogger posts. We hope you found this guide helpful and easy to follow. Please feel free to share this article with others. If you face any issues or have any questions regarding any step, don’t hesitate to ask in the comment section. Thank you for reading!
