Navigating Next And Prev Posts Under Same Labels in Blogger

Question

For starters I want you to read
Next and Prev Buttons for Blogger Theme

Understood the concept of what I want? Then let's continue with my question :

Now I have the code that was already embedded to the theme for next and prev buttons and they were :

<nav class='op-pagi'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><i class='fa fa-angle-left'/> Prev</a>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'> Next <i class='fa fa-angle-right'/></a>
</nav>

And Using the questions I had asked before like :
How to store the URL's and Titles of a list of posts under same label into a String array in Blogger AND
How to match and point to a particular data in array in Blogger

I made a code myself :

<script>
//<![CDATA[

<b:if cond='data:blog.searchLabel'>

  var URLArray = <b:eval expr='data:posts map (post =&gt; post.url)'/>;
  var TitleArray = <b:eval expr='data:posts map (post =&gt; post.title)'/>;  

var cURL = "<data:post.url/>";
var gTitle = "<data:post.title>";
function IndexFinder(element,index) {
   return element == cURL
}
function IndexFinderT(element,index){
   return element == gTitle;
}
var sU = URLArray.findIndex(IndexFinder);
var sT = TitleArray.findIndex(IndexFinderT);

function prevURL(){
    var prevU=URLArray[sU-1];
return prevU;
}
function prevTitle(){
    var prevT=TitleArray[sT-1];
return prevT;
}
function nextURL(){
    var nextU=URLArray[sU+1];
return nextU;
}
function nextTitle(){
    var nextT=TitleArray[sT+1];
return nextT;
}

</b:if>
//]]>
</script>

Now I tried Using the code which I showed first for next and prev button by changing expr:href='data:olderPageUrl' to expr:href='prevURL()'
and the same for Title also
expr:title='data:olderPageTitle' to expr:title='prevTitle()'
but didn't work.

Can you please tell me where I went wrong and how to make it work?

Note: I'm using CDATA Tag for no particular reason, just put it there thinking it might help in someway. I didn't understand its exact usage even when I searched on google. If it's causing any problem please mention it.

Answer 1

You can paste this code in the posting widget

<b:includable id='pager_chapter' var='type'>
<b:if expr:cond='data:post.labels any (l =&gt; l.name != data:type.name)'>
  <script type='text/javascript'>var selectchap = false;</script>
</b:if>
<b:if expr:cond='data:post.labels any (l =&gt; l.name == data:type.name)'>
  <script type='text/javascript'>var selectchap = true;</script>
</b:if>
<b:loop index='i' values='data:post.labels' var='label'>
  <b:if cond='data:i == 0'>
  <div class='pager-js rounded' id='pager-js'>
  <div class='_prev' id='prevjs'><a class='pager-js-nolink'><span class='material-icons' style='font-size:2.5rem;'>chevron_left</span></a></div>
  <div class='_index' id='indexjs'><a class='pager-js-nolink'><span class='material-icons' style='font-size:2.5rem;'>list</span></a></div>
  <div class='_next' id='nextjs'><a class='pager-js-nolink'><span class='material-icons' style='font-size:2.5rem;'>chevron_right</span></a></div>
  </div>
  <script type='text/javascript'>
    var postPrev = &quot;<span class='material-icons' style='font-size:2.5rem;'>chevron_left</span>&quot;;
    var postNext = &quot;<span class='material-icons' style='font-size:2.5rem;'>chevron_right</span>&quot;;
    var postIndex = &quot;<span class='material-icons' style='font-size:2.5rem;'>list</span>&quot;;
    var postID = <data:post.id/>;
    /*<![CDATA[*/
    if(selectchap==false){
      var yktocs=function(data){
        var i=0;
        for(;
        i<data.feed.entry.length;
        i++){
          var j=0;
          for(;
          j<data.feed.entry[i].link.length;
          j++){
            if("alternate"==data.feed.entry[i].link[j].rel){
              var entityUrl=data.feed.entry[i].link[j].href;
              break
            }
          }
          document.getElementById("indexjs").innerHTML="<a href='"+entityUrl+"' title='Index Novel'>"+postIndex+"</a>"
        }
      };
      var ykpager=function(data){
        var node={
          postlist:[]
        };
        var i=0;
        for(;
        i<data.feed.entry.length;
        i++){
          var j=0;
          for(;
          j<data.feed.entry[i].link.length;
          j++){
            if("alternate"==data.feed.entry[i].link[j].rel){
              var murl=data.feed.entry[i].link[j].href;
              break
            }
          }
          var videoId=data.feed.entry[i].id.$t;
          var CAPTURE_ID=videoId.substr(51,19);node.postlist.push({
            url:murl,id:CAPTURE_ID
          })
        }var v=node.postlist.findIndex((timeline_mode)=>{
          return timeline_mode.id==postID
        });
        var id=v+1;
        var cbs=node.postlist[id];
        if(null!=cbs){var g=Object.values(cbs)[0];
          var lnkDiv=document.getElementById("prevjs");
          lnkDiv.innerHTML="<a href='"+g+"' title='Chapter Sebelumnya'>"+postPrev+"</a>"
        }
        var q=v-1;
        var val=node.postlist[q];
        if(null!=val){
          var k=Object.values(val)[0];
          lnkDiv=document.getElementById("nextjs");
          lnkDiv.innerHTML="<a href='"+k+"' title='Chapter Selanjutnya'>"+postNext+"</a>"
        }
      }
    }
    else{document.write("<style>.pager-js{display:none;}</style>")
  };
    /*]]>*/
  </script>
  <script defer='defer' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=ykpager&amp;max-results=99999999&quot;' type='text/javascript'/>
  <script defer='defer' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:type.name + &quot;/&quot; + data:label.name + &quot;?orderby=published&amp;alt=json-in-script&amp;callback=yktocs&amp;max-results=1&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:includable>

And paste code below After <data:post.body/>

<b:include data='{name : &quot;Novel&quot;}' name='pager_chapter'/>

You can read full tutorial How To Make Next and Prev Button By Label on Blogger

Answer 2

Using CDATA prevents blogger XML parser from interpreting data tags like <b:if cond='data:blog.searchLabel'>

Remove //<![CDATA[ and //]]> from the code or use them after blogger tags :

<script>

<b:if cond='data:blog.searchLabel'>

var URLArray = <b:eval expr='data:posts map (post =&gt; post.url)'/>;
var TitleArray = <b:eval expr='data:posts map (post =&gt; post.title)'/>;  
var cURL = "<data:post.url/>";
var gTitle = "<data:post.title>";

//<![CDATA[

function IndexFinder(element,index) {
   return element == cURL
}
function IndexFinderT(element,index){
   return element == gTitle;
}
var sU = URLArray.findIndex(IndexFinder);
var sT = TitleArray.findIndex(IndexFinderT);

function prevURL(){
    var prevU=URLArray[sU-1];
return prevU;
}
function prevTitle(){
    var prevT=TitleArray[sT-1];
return prevT;
}
function nextURL(){
    var nextU=URLArray[sU+1];
return nextU;
}
function nextTitle(){
    var nextT=TitleArray[sT+1];
return nextT;
}

//]]>

</b:if>

</script>

Answer 3

As both prevURL() and prevTitle() are JavaScript functions and not Blogger data tags, you don't need to use the expr in front of the attribute.

You will instead need to modify the functions as follows -

function prevURL(){
    var prevU=URLArray[sU-1];
    document.querySelector('.blog-pager-older-link').href = prevU;
}

function prevTitle(){
    var prevT=TitleArray[sT-1];
    document.querySelector('.blog-pager-older-link').title = prevT;
}

and similarly for the next page links. No need to change the HTML of the page.

Also as Bassam mentioned in the other answer. Don't wrap the JavaScript in CDATA directive otherwise, the XML parser that Blogger uses will completely ignore the script block and no data tag will get evaluated