Blog Sorting Routine

This is specifically for Blog makers and allows them to create a sorted list page.

Please select and copy the code below and please include a reference as to where you obtained it from when reusing it

Cheers.

<style>

.light-theme {

background-color: #e0e0e0; /* Light grey */

color: #000;

}

.dark-theme {

background-color: #1a1a1a;

color: #eee;

}

.dark-theme a {

color: #aad8ff;

}

.light-theme a {

color: #0066cc;

}

button {

padding: 6px 12px;

font-size: 14px;

cursor: pointer;

margin-bottom: 10px;

}

</style>

🌞 Light Mode

</button>

</a>

</div>

<div class="separator" style="clear: both; text-align: left;"><br /></div><span style="font-size: x-small;"><b><i>The Original Source code for this list can be found at - https://dansator.blogspot.com/2015/10/general-alphabetical-list-of-posts.html</i></b></span><p></p><p><span style="font-size: x-small;"><b><i>Updated to include sort options Shane Gregory Dale May 14th. 2025.</i></b></span></p><p><br /></p><script async="" crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5783612953353511"></script>

<option value="titleAsc">Title (A–Z)</option>

<option value="titleDesc">Title (Z–A)</option>

<option value="dateAsc">Date (Oldest First)</option>

<option value="dateDesc">Date (Newest First)</option>

</select>

</div>

<div>

</div>

var startIndex = 1;

var maxResults = 100;

var allResults = [];

function sendQuery12() {

var scpt = document.createElement("script");

scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;

document.body.appendChild(scpt);

}

function processPostList12(root) {

var elmt = document.getElementById("postList12");

if (!elmt) return;

var feed = root.feed;

if (feed.entry && feed.entry.length > 0) {

for (var i = 0; i < feed.entry.length; i++) {

var entry = feed.entry[i];

var title = entry.title.$t;

var date = entry.published.$t;

for (var j = 0; j < entry.link.length; j++) {

if (entry.link[j].rel === "alternate") {

var url = entry.link[j].href;

if (url && title) {

var liE = document.createElement("li");

var a1E = document.createElement("a");

a1E.href = url;

a1E.textContent = title + " (" + date.substr(0, 10) + ")";

liE.appendChild(a1E);

allResults.push(liE);

}

break;

}

if (feed.entry.length >= maxResults) {

startIndex += maxResults;

sendQuery12();

} else {

printArrayResults();

}

function applySort() {

const sortBy = document.getElementById("sortSelect").value;

localStorage.setItem("postSortPreference", sortBy);

allResults.sort(function (a, b) {

const aText = a.children[0].textContent;

const bText = b.children[0].textContent;

const aDate = new Date(aText.match(/$(\d{4}-\d{2}-\d{2})$/)?.[1]);

const bDate = new Date(bText.match(/$(\d{4}-\d{2}-\d{2})$/)?.[1]);

switch (sortBy) {

case "titleAsc":

return aText.localeCompare(bText);

case "titleDesc":

return bText.localeCompare(aText);

case "dateAsc":

return aDate - bDate;

case "dateDesc":

return bDate - aDate;

default:

return 0;

}

});

renderList();

}

function toggleTheme() {

const container = document.getElementById("themeContainer");

const button = document.getElementById("themeToggleBtn");

const isDark = container.classList.contains("dark-theme");

container.classList.remove(isDark ? "dark-theme" : "light-theme");

container.classList.add(isDark ? "light-theme" : "dark-theme");

// Update button icon and label

if (isDark) {

button.textContent = "🌞 Light Mode";

} else {

button.textContent = "🌙 Dark Mode";

}

localStorage.setItem("postTheme", isDark ? "light" : "dark");

}

// Restore saved theme on load

window.addEventListener("load", function () {

const saved = localStorage.getItem("postTheme") || "light";

const container = document.getElementById("themeContainer");

const button = document.getElementById("themeToggleBtn");

container.classList.remove("light-theme", "dark-theme");

container.classList.add(saved + "-theme");

if (button) {

button.textContent = saved === "dark" ? "🌙 Dark Mode" : "🌞 Light Mode";

}

});

function renderList() {

const elmt = document.getElementById("postList12");

elmt.innerHTML = "";

allResults.forEach(item => elmt.appendChild(item));

}

function printArrayResults() {

applySort(); // apply sorting after all data is fetched

}

window.onload = function () {

const savedSort = localStorage.getItem("postSortPreference") || "titleAsc";

document.getElementById("sortSelect").value = savedSort;

};

sendQuery12(); // Start fetching posts

</script><br /></div></div>