The post widget in this (Category Post) is only for the Jago Design template. It will not work in any other theme.
Hello! Welcome to Finestap Design.
|
| © Finestap Design | Category Post Widget. |
Why should we use category posts?
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.
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: Paste the following HTML/JavaScript Widget codes just after the Blog Widget codes.
<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>
Step 6: Now add the following JavaScript just above to </body> tag. If you don't find it, it is probably already parsed which is </body>.
<!--[ Category Posts by @Finestap Blog (finestap-design.blogspot.com) ]-->
<script><b:eval expr='"const blogUrl='" + data:blog.canonicalHomepageUrl + "';"'/>/*<![CDATA[[*/ /*! Category Posts by @Finestap Blog */ 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>
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.finestap-design.blogspot.com/