ARTICLE AD BOX
The bottom of my blog's sidebar shows hyperlink titles of the last few posts (from newest to oldest).
I wanted readers to be able to view a larger number of hyperlink post titles on a new Archive page on the blog. These are arranged from oldest to newest. The user is able to select these in groups of 50 using a hyperlink.
---
FIRST SOLUTION:
I added the following script to several new pages on the blog, each loading 50 titles.
The only way this code differs from one page to another is the the starting position is different; thus the page for posts 1-50 has a starting position of "1" and the page for posts 51-100 has a starting position of "51".
The actual name of my blog has been replaced with "myblogname" in code below.
<script type="text/javascript"> document.write("<ul>"); function LoadTheArchive(TotalFeed) { var PostTitles = new Array(); var PostURLs = new Array(); var PostYears = new Array(); var PostMonths = new Array(); var PostDays = new Array(); if("entry" in TotalFeed.feed) { var PostEntries=TotalFeed.feed.entry.length; for(var PostNum=0; PostNum<PostEntries ; PostNum++) { var ThisPost = TotalFeed.feed.entry[PostNum]; PostTitles.push(ThisPost.title.$t); PostYears.push(ThisPost.published.$t.substring(0,4)); PostMonths.push(ThisPost.published.$t.substring(5,7)); PostDays.push(ThisPost.published.$t.substring(8,10)); var ThisPostURL; for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++) { if(ThisPost.link[LinkNum].rel == "alternate") { ThisPostURL = ThisPost.link[LinkNum].href; break } } PostURLs.push(ThisPostURL); } } DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays); } function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays) { var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"]; var NumberOfEntries=PostTitles.length; var currentMonth = ""; var currentYear = ""; document.write('<ul class="archlist">'); for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) { NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1] if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) { currentMonth = NameOfMonth; currentYear = PostYears[EntryNum]; } document.write('<li><a href ="'+PostURLs[EntryNum]+'">'+PostTitles[EntryNum]+"</a></li>"); } } document.write("</ul>"); </script><script src="https://myblogname.blogspot.com/feeds/posts/default?max-results=50&start-index=1&alt=json-in-script&callback=LoadTheArchive"></script>I added a Archive page to the blog which uses uses the following script to display the individual pages above within a iFrame when user clicks a link.
This works, but is not ideal as it loads the whole page.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Iframe Auto Load</title> <style> iframe { width: 100%; height: 500px; border: 1px solid #ccc; } </style> </head> <body> <a href="https://myblogname.blogspot.com/p/posts-1-50.html" id="a50" target="iframeHolder">1-50</a> | <a href="https://myblogname.blogspot.com/p/posts-51-100.html" id="a100" target="iframeHolder">51-100</a> | <a href="https://myblogname.blogspot.com/p/posts-101-150.html" id="a150" target="iframeHolder">101-150</a> | <a href="https://myblogname.blogspot.com/p/posts-151-200.html" id="a200" target="iframeHolder">151-200</a> | <a href="https://myblogname.blogspot.com/p/posts-201-250.html" id="a200" target="iframeHolder">201-250</a> | <a href="https://myblogname.blogspot.com/p/posts-251-300.html" id="a300" target="iframeHolder">251-300</a><br /> <iframe id="archiveIframe" class="iframeHolder" name="iframeHolder" src="https://https://myblogname.blogspot.com/p/posts-1-50.html"></iframe> <script> document.addEventListener("DOMContentLoaded", function () { try { // Get the link and iframe elements const link = document.getElementById("a50"); const iframe = document.getElementById("archiveIframe"); if (!link || !iframe) { console.error("Required elements not found."); return; } // Get the link's href and set it as the iframe's src const url = link.getAttribute("href"); if (url && url.trim() !== "") { iframe.src = url; } else { console.warn("Link has no valid href."); } } catch (err) { console.error("Error loading iframe:", err); } }); </script> </body> </html>---
BETTER SOLUTION WANTED:
I want to get rid of the iframe and the separate pages for each 50 post range.
I want the Archive page to dynamically generate the post titles based upon what link the user clicks. The archive page should also load the first 50 page titles when it first opens.
This code will display links that change the value of a variable:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <h2>Click a link to run a different script</h2> <a href="#" data-script="1">1-50</a> | <a href="#" data-script="2">51-100</a> | <a href="#" data-script="3">101-150</a> <script type="text/javascript"> function scriptOne() { var startp = 1 } function scriptTwo() { var startp = 51 } function scriptThree() { var startp = 101 } document.querySelectorAll("a[data-script]").forEach(link => { link.addEventListener("click", function(event) { event.preventDefault(); const scriptId = this.getAttribute("data-script"); switch (scriptId) { case "1": scriptOne(); break; case "2": scriptTwo(); break; case "3": scriptThree(); break; default: console.warn("No script assigned."); } }); }); </script> </body> </html>This variable can then be used to change the starting position of the previously mentioned script to something similar to this:
<script src="https://myblogname.blogspot.com/feeds/posts/default?max-results=50&start-index=" + startp + "&alt=json-in-script&callback=LoadTheArchive"></script>Any ideas on how I can do this?
I have not be able to successfully integrate the code so far.
![How to fix CORS policy blocked request error when calling API from frontend? [duplicate]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)